From 0676d67dbf56d06a6677dcf3e8ce6c1991cb2499 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Thu, 16 Apr 2020 19:13:21 +0200 Subject: [PATCH] add basic react setup --- .babelrc | 3 + content/posts/react.md | 8 ++ gridsome.server.js | 9 ++- package.json | 3 + src/components/ReactTestComponent/index.jsx | 38 +++++++++ src/components/ReactWrapper/index.vue | 19 +++++ src/main.js | 2 + yarn.lock | 89 ++++++++++++++++++++- 8 files changed, 168 insertions(+), 3 deletions(-) create mode 100644 .babelrc create mode 100644 content/posts/react.md create mode 100644 src/components/ReactTestComponent/index.jsx create mode 100644 src/components/ReactWrapper/index.vue diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000..85e86ab60 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-react"] +} \ No newline at end of file diff --git a/content/posts/react.md b/content/posts/react.md new file mode 100644 index 000000000..d12cda604 --- /dev/null +++ b/content/posts/react.md @@ -0,0 +1,8 @@ +--- +title: React Test +slug: react +--- + +This is a basic example of tiptap. + + \ No newline at end of file diff --git a/gridsome.server.js b/gridsome.server.js index 9becda522..c2dfcd1c2 100644 --- a/gridsome.server.js +++ b/gridsome.server.js @@ -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/', '')) diff --git a/package.json b/package.json index 3cf53f905..d15872425 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/ReactTestComponent/index.jsx b/src/components/ReactTestComponent/index.jsx new file mode 100644 index 000000000..74fab5cb5 --- /dev/null +++ b/src/components/ReactTestComponent/index.jsx @@ -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 ( +
+ +
+ value: {this.state.value} +
+ ); + } +} + +export default Form; \ No newline at end of file diff --git a/src/components/ReactWrapper/index.vue b/src/components/ReactWrapper/index.vue new file mode 100644 index 000000000..47b2b005e --- /dev/null +++ b/src/components/ReactWrapper/index.vue @@ -0,0 +1,19 @@ + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index b3f4bd550..3098267cb 100644 --- a/src/main.js +++ b/src/main.js @@ -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) }) diff --git a/yarn.lock b/yarn.lock index 204599cf5..ba340eb59 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"