From f62442a446cf9a143ff8a646e323066f2d09d128 Mon Sep 17 00:00:00 2001 From: Yuji Takaesu Date: Wed, 14 Feb 2018 08:33:55 +0900 Subject: [PATCH] chap4: Initialized React and Modify babel settings flow warning workaround: https://github.com/verekia/js-stack-from-scratch/issues/249 --- _work/.babelrc | 6 ++- _work/package.json | 6 ++- _work/src/client/app.jsx | 7 +++ _work/src/client/index.js | 5 --- _work/src/client/index.jsx | 16 +++++++ _work/yarn.lock | 88 +++++++++++++++++++++++++++++++++++--- 6 files changed, 116 insertions(+), 12 deletions(-) create mode 100644 _work/src/client/app.jsx delete mode 100644 _work/src/client/index.js create mode 100644 _work/src/client/index.jsx diff --git a/_work/.babelrc b/_work/.babelrc index 01325500..e778f6d9 100644 --- a/_work/.babelrc +++ b/_work/.babelrc @@ -1,6 +1,10 @@ { "presets": [ "env", - "flow" + "flow", + "react" + ], + "plugins": [ + "flow-react-proptypes" ] } diff --git a/_work/package.json b/_work/package.json index 92892cb7..29da5532 100644 --- a/_work/package.json +++ b/_work/package.json @@ -21,7 +21,9 @@ "dependencies": { "babel-polyfill": "^6.26.0", "compression": "^1.7.1", - "express": "^4.16.2" + "express": "^4.16.2", + "react": "^16.2.0", + "react-dom": "^16.2.0" }, "devDependencies": { "babel-cli": "^6.26.0", @@ -29,8 +31,10 @@ "babel-eslint": "^8.2.1", "babel-jest": "^22.2.2", "babel-loader": "^7.1.2", + "babel-plugin-flow-react-proptypes": "^17.1.2", "babel-preset-env": "^1.6.1", "babel-preset-flow": "^6.23.0", + "babel-preset-react": "^6.24.1", "cross-env": "^5.1.3", "eslint": "^4.9.0", "eslint-config-airbnb": "^16.1.0", diff --git a/_work/src/client/app.jsx b/_work/src/client/app.jsx new file mode 100644 index 00000000..92758a45 --- /dev/null +++ b/_work/src/client/app.jsx @@ -0,0 +1,7 @@ +// @flow + +import React from 'react' + +const App = () =>

Hello React!!!!

+ +export default App diff --git a/_work/src/client/index.js b/_work/src/client/index.js deleted file mode 100644 index 53ba5e32..00000000 --- a/_work/src/client/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import 'babel-polyfill' - -import { APP_CONTAINER_SELECTOR } from '../shared/config' - -document.querySelector(APP_CONTAINER_SELECTOR).innerHTML = '

Hello Webpack!!!!!!!!!!

' diff --git a/_work/src/client/index.jsx b/_work/src/client/index.jsx new file mode 100644 index 00000000..05dd752b --- /dev/null +++ b/_work/src/client/index.jsx @@ -0,0 +1,16 @@ +// @flow + +import 'babel-polyfill' + +import React from 'react' +import ReactDOM from 'react-dom' + +import App from './app' +import { APP_CONTAINER_SELECTOR } from '../shared/config' + +const rootEl = document.querySelector(APP_CONTAINER_SELECTOR) +if (!(rootEl instanceof Element)) { + throw new Error('invalid type') +} + +ReactDOM.render(, rootEl) diff --git a/_work/yarn.lock b/_work/yarn.lock index bd274155..110636bd 100644 --- a/_work/yarn.lock +++ b/_work/yarn.lock @@ -422,7 +422,7 @@ babel-code-frame@^6.22.0, babel-code-frame@^6.26.0: esutils "^2.0.2" js-tokens "^3.0.2" -babel-core@^6.0.0, babel-core@^6.26.0: +babel-core@^6.0.0, babel-core@^6.25.0, babel-core@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8" dependencies: @@ -478,6 +478,14 @@ babel-helper-builder-binary-assignment-operator-visitor@^6.24.1: babel-runtime "^6.22.0" babel-types "^6.24.1" +babel-helper-builder-react-jsx@^6.24.1: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz#39ff8313b75c8b65dceff1f31d383e0ff2a408a0" + dependencies: + babel-runtime "^6.26.0" + babel-types "^6.26.0" + esutils "^2.0.2" + babel-helper-call-delegate@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d" @@ -598,6 +606,15 @@ babel-plugin-check-es2015-constants@^6.22.0: dependencies: babel-runtime "^6.22.0" +babel-plugin-flow-react-proptypes@^17.1.2: + version "17.1.2" + resolved "https://registry.yarnpkg.com/babel-plugin-flow-react-proptypes/-/babel-plugin-flow-react-proptypes-17.1.2.tgz#89f75928a47ea869dab312605f42542dd7b6755c" + dependencies: + babel-core "^6.25.0" + babel-template "^6.25.0" + babel-traverse "^6.25.0" + babel-types "^6.25.0" + babel-plugin-istanbul@^4.1.5: version "4.1.5" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e" @@ -622,6 +639,10 @@ babel-plugin-syntax-flow@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d" +babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + babel-plugin-syntax-object-rest-spread@^6.13.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" @@ -821,6 +842,34 @@ babel-plugin-transform-flow-strip-types@^6.22.0: babel-plugin-syntax-flow "^6.18.0" babel-runtime "^6.22.0" +babel-plugin-transform-react-display-name@^6.23.0: + version "6.25.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1" + dependencies: + babel-runtime "^6.22.0" + +babel-plugin-transform-react-jsx-self@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e" + dependencies: + babel-plugin-syntax-jsx "^6.8.0" + babel-runtime "^6.22.0" + +babel-plugin-transform-react-jsx-source@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6" + dependencies: + babel-plugin-syntax-jsx "^6.8.0" + babel-runtime "^6.22.0" + +babel-plugin-transform-react-jsx@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3" + dependencies: + babel-helper-builder-react-jsx "^6.24.1" + babel-plugin-syntax-jsx "^6.8.0" + babel-runtime "^6.22.0" + babel-plugin-transform-regenerator@^6.22.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f" @@ -890,6 +939,17 @@ babel-preset-jest@^22.2.0: babel-plugin-jest-hoist "^22.2.0" babel-plugin-syntax-object-rest-spread "^6.13.0" +babel-preset-react@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380" + dependencies: + babel-plugin-syntax-jsx "^6.3.13" + babel-plugin-transform-react-display-name "^6.23.0" + babel-plugin-transform-react-jsx "^6.24.1" + babel-plugin-transform-react-jsx-self "^6.22.0" + babel-plugin-transform-react-jsx-source "^6.22.0" + babel-preset-flow "^6.23.0" + babel-register@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071" @@ -909,7 +969,7 @@ babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0: core-js "^2.4.0" regenerator-runtime "^0.11.0" -babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0: +babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02" dependencies: @@ -919,7 +979,7 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0: babylon "^6.18.0" lodash "^4.17.4" -babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0: +babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee" dependencies: @@ -933,7 +993,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0: invariant "^2.2.2" lodash "^4.17.4" -babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0: +babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.25.0, babel-types@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497" dependencies: @@ -3966,7 +4026,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.3.1: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -4992,6 +5052,24 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-dom@^16.2.0: + version "16.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044" + dependencies: + fbjs "^0.8.16" + loose-envify "^1.1.0" + object-assign "^4.1.1" + prop-types "^15.6.0" + +react@^16.2.0: + version "16.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba" + dependencies: + fbjs "^0.8.16" + loose-envify "^1.1.0" + object-assign "^4.1.1" + prop-types "^15.6.0" + read-pkg-up@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"