add basic react setup

This commit is contained in:
Philipp Kühn 2020-04-16 19:13:21 +02:00
parent 34b8f18a57
commit 0676d67dbf
8 changed files with 168 additions and 3 deletions

3
.babelrc Normal file
View File

@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-react"]
}

8
content/posts/react.md Normal file
View File

@ -0,0 +1,8 @@
---
title: React Test
slug: react
---
This is a basic example of tiptap.
<react-wrapper />

View File

@ -11,7 +11,14 @@ module.exports = function (api) {
.test(/\.tsx?$/)
.use()
.loader('ts-loader')
.options({ appendTsSuffixTo: [/\.vue$/] });
.options({ appendTsSuffixTo: [/\.vue$/] })
config.module
.rule('jsx')
.test(/\.jsx?$/)
.use()
.loader('babel-loader')
// .options({ appendTsSuffixTo: [/\.vue$/] })
globby.sync('./packages/*', { onlyDirectories: true })
.map(name => name.replace('./packages/', ''))

View File

@ -35,9 +35,12 @@
"microbundle": "^0.11.0",
"parcel": "^1.12.4",
"raw-loader": "^4.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"typescript": "^3.8.3"
},
"devDependencies": {
"@babel/preset-react": "^7.9.4",
"cypress": "^4.3.0",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",

View File

@ -0,0 +1,38 @@
import React, { Component } from 'react';
class Form extends Component {
constructor() {
super();
this.state = {
value: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const { value } = event.target;
this.setState(() => {
return {
value
};
});
}
render() {
return (
<form>
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
<br/>
value: {this.state.value}
</form>
);
}
}
export default Form;

View File

@ -0,0 +1,19 @@
<template>
<div></div>
</template>
<script>
import React from 'react'
import ReactDOM from 'react-dom'
import ReactTestComponent from '~/components/ReactTestComponent/index.jsx'
export default {
mounted(){
ReactDOM.render(React.createElement(ReactTestComponent, this.$props), this.$el)
},
beforeDestroy(){
ReactDOM.unmountComponentAtNode(this.$el)
}
}
</script>

View File

@ -3,11 +3,13 @@ import 'prismjs/themes/prism-coy.css'
import DefaultLayout from '~/layouts/Default.vue'
import Demo from '~/components/Demo'
import Tab from '~/components/Tab'
import ReactWrapper from '~/components/ReactWrapper'
export default function (Vue, { router, head, isClient }) {
Vue.component('Layout', DefaultLayout)
Vue.component('Demo', Demo)
Vue.component('Tab', Tab)
Vue.component('ReactWrapper', ReactWrapper)
Vue.filter('highlight', (code, lang = 'javascript') => {
return Prism.highlight(code, Prism.languages[lang], lang)
})

View File

@ -701,7 +701,39 @@
dependencies:
"@babel/helper-plugin-utils" "^7.8.3"
"@babel/plugin-transform-react-jsx@^7.0.0":
"@babel/plugin-transform-react-display-name@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz#70ded987c91609f78353dd76d2fb2a0bb991e8e5"
integrity sha512-3Jy/PCw8Fe6uBKtEgz3M82ljt+lTg+xJaM4og+eyu83qLT87ZUSckn0wy7r31jflURWLO83TW6Ylf7lyXj3m5A==
dependencies:
"@babel/helper-plugin-utils" "^7.8.3"
"@babel/plugin-transform-react-jsx-development@^7.9.0":
version "7.9.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.9.0.tgz#3c2a130727caf00c2a293f0aed24520825dbf754"
integrity sha512-tK8hWKrQncVvrhvtOiPpKrQjfNX3DtkNLSX4ObuGcpS9p0QrGetKmlySIGR07y48Zft8WVgPakqd/bk46JrMSw==
dependencies:
"@babel/helper-builder-react-jsx-experimental" "^7.9.0"
"@babel/helper-plugin-utils" "^7.8.3"
"@babel/plugin-syntax-jsx" "^7.8.3"
"@babel/plugin-transform-react-jsx-self@^7.9.0":
version "7.9.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.9.0.tgz#f4f26a325820205239bb915bad8e06fcadabb49b"
integrity sha512-K2ObbWPKT7KUTAoyjCsFilOkEgMvFG+y0FqOl6Lezd0/13kMkkjHskVsZvblRPj1PHA44PrToaZANrryppzTvQ==
dependencies:
"@babel/helper-plugin-utils" "^7.8.3"
"@babel/plugin-syntax-jsx" "^7.8.3"
"@babel/plugin-transform-react-jsx-source@^7.9.0":
version "7.9.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.9.0.tgz#89ef93025240dd5d17d3122294a093e5e0183de0"
integrity sha512-K6m3LlSnTSfRkM6FcRk8saNEeaeyG5k7AVkBU2bZK3+1zdkSED3qNdsWrUgQBeTVD2Tp3VMmerxVO2yM5iITmw==
dependencies:
"@babel/helper-plugin-utils" "^7.8.3"
"@babel/plugin-syntax-jsx" "^7.8.3"
"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.9.4":
version "7.9.4"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.9.4.tgz#86f576c8540bd06d0e95e0b61ea76d55f6cbd03f"
integrity sha512-Mjqf3pZBNLt854CK0C/kRuXAnE6H/bo7xYojP+WGtX8glDGSibcwnsWwhwoSuRg0+EBnxPC1ouVnuetUIlPSAw==
@ -914,6 +946,18 @@
"@babel/types" "^7.4.4"
esutils "^2.0.2"
"@babel/preset-react@^7.9.4":
version "7.9.4"
resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.9.4.tgz#c6c97693ac65b6b9c0b4f25b948a8f665463014d"
integrity sha512-AxylVB3FXeOTQXNXyiuAQJSvss62FEotbX2Pzx3K/7c+MKJMdSg6Ose6QYllkdCFA8EInCJVw7M/o5QbLuA4ZQ==
dependencies:
"@babel/helper-plugin-utils" "^7.8.3"
"@babel/plugin-transform-react-display-name" "^7.8.3"
"@babel/plugin-transform-react-jsx" "^7.9.4"
"@babel/plugin-transform-react-jsx-development" "^7.9.0"
"@babel/plugin-transform-react-jsx-self" "^7.9.0"
"@babel/plugin-transform-react-jsx-source" "^7.9.0"
"@babel/runtime-corejs2@^7.2.0":
version "7.9.2"
resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.9.2.tgz#f11d074ff99b9b4319b5ecf0501f12202bf2bf4d"
@ -8771,7 +8815,7 @@ longest@^1.0.0:
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
loose-envify@^1.0.0:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@ -11458,6 +11502,15 @@ promzard@^0.3.0:
dependencies:
read "1"
prop-types@^15.6.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.8.1"
property-information@^4.0.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/property-information/-/property-information-4.2.0.tgz#f0e66e07cbd6fed31d96844d958d153ad3eb486e"
@ -11814,6 +11867,30 @@ rc@^1.2.7, rc@^1.2.8:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-dom@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.19.1"
react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
read-cmd-shim@^1.0.1:
version "1.0.5"
resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz#87e43eba50098ba5a32d0ceb583ab8e43b961c16"
@ -12608,6 +12685,14 @@ saxes@^3.1.9:
dependencies:
xmlchars "^2.1.1"
scheduler@^0.19.1:
version "0.19.1"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
schema-utils@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"