Skip to content

Commit 0e7cd33

Browse files
justin808justin808
committed
bundle exec rails webpacker:install:react
1 parent c91e1ff commit 0e7cd33

File tree

5 files changed

+184
-4
lines changed

5 files changed

+184
-4
lines changed

‎app/javascript/packs/hello_react.jsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
2+
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
3+
// of the page.
4+
5+
import React from 'react'
6+
import ReactDOM from 'react-dom'
7+
import PropTypes from 'prop-types'
8+
9+
const Hello = props => (
10+
<div>Hello {props.name}!</div>
11+
)
12+
13+
Hello.defaultProps = {
14+
name: 'David'
15+
}
16+
17+
Hello.propTypes = {
18+
name: PropTypes.string
19+
}
20+
21+
document.addEventListener('DOMContentLoaded', () => {
22+
ReactDOM.render(
23+
<Hello name="React" />,
24+
document.body.appendChild(document.createElement('div')),
25+
)
26+
})

‎babel.config.js

+17-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@ module.exports = function(api) {
2222
{
2323
targets: {
2424
node: 'current'
25-
}
26-
}
25+
},
26+
modules: 'commonjs'
27+
},
28+
'@babel/preset-react'
2729
],
2830
(isProductionEnv || isDevelopmentEnv) && [
2931
'@babel/preset-env',
@@ -34,6 +36,13 @@ module.exports = function(api) {
3436
modules: false,
3537
exclude: ['transform-typeof-symbol']
3638
}
39+
],
40+
[
41+
'@babel/preset-react',
42+
{
43+
development: isDevelopmentEnv || isTestEnv,
44+
useBuiltIns: true
45+
}
3746
]
3847
].filter(Boolean),
3948
plugins: [
@@ -66,6 +75,12 @@ module.exports = function(api) {
6675
{
6776
async: false
6877
}
78+
],
79+
isProductionEnv && [
80+
'babel-plugin-transform-react-remove-prop-types',
81+
{
82+
removeImport: true
83+
}
6984
]
7085
].filter(Boolean)
7186
}

‎config/webpacker.yml

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ default: &default
3333
- .woff2
3434

3535
extensions:
36+
- .jsx
3637
- .mjs
3738
- .js
3839
- .sass

‎package.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
{
22
"dependencies": {
3-
"@rails/webpacker": "5.1.1"
3+
"@babel/preset-react": "^7.10.4",
4+
"@rails/webpacker": "5.1.1",
5+
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
6+
"prop-types": "^15.7.2",
7+
"react": "^16.13.1",
8+
"react-dom": "^16.13.1"
49
},
510
"devDependencies": {
611
"webpack-dev-server": "^3.11.0"

‎yarn.lock

+134-1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,23 @@
6464
"@babel/helper-explode-assignable-expression" "^7.10.4"
6565
"@babel/types" "^7.10.4"
6666

67+
"@babel/helper-builder-react-jsx-experimental@^7.10.4":
68+
version "7.10.5"
69+
resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.5.tgz#f35e956a19955ff08c1258e44a515a6d6248646b"
70+
integrity sha512-Buewnx6M4ttG+NLkKyt7baQn7ScC/Td+e99G914fRU8fGIUivDDgVIQeDHFa5e4CRSJQt58WpNHhsAZgtzVhsg==
71+
dependencies:
72+
"@babel/helper-annotate-as-pure" "^7.10.4"
73+
"@babel/helper-module-imports" "^7.10.4"
74+
"@babel/types" "^7.10.5"
75+
76+
"@babel/helper-builder-react-jsx@^7.10.4":
77+
version "7.10.4"
78+
resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.4.tgz#8095cddbff858e6fa9c326daee54a2f2732c1d5d"
79+
integrity sha512-5nPcIZ7+KKDxT1427oBivl9V9YTal7qk0diccnh7RrcgrT/pGFOjgGw1dgryyx1GvHEpXVfoDF6Ak3rTiWh8Rg==
80+
dependencies:
81+
"@babel/helper-annotate-as-pure" "^7.10.4"
82+
"@babel/types" "^7.10.4"
83+
6784
"@babel/helper-compilation-targets@^7.10.4":
6885
version "7.10.4"
6986
resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz#804ae8e3f04376607cc791b9d47d540276332bd2"
@@ -405,6 +422,13 @@
405422
dependencies:
406423
"@babel/helper-plugin-utils" "^7.8.0"
407424

425+
"@babel/plugin-syntax-jsx@^7.10.4":
426+
version "7.10.4"
427+
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c"
428+
integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==
429+
dependencies:
430+
"@babel/helper-plugin-utils" "^7.10.4"
431+
408432
"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
409433
version "7.10.4"
410434
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -638,6 +662,56 @@
638662
dependencies:
639663
"@babel/helper-plugin-utils" "^7.10.4"
640664

665+
"@babel/plugin-transform-react-display-name@^7.10.4":
666+
version "7.10.4"
667+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.4.tgz#b5795f4e3e3140419c3611b7a2a3832b9aef328d"
668+
integrity sha512-Zd4X54Mu9SBfPGnEcaGcOrVAYOtjT2on8QZkLKEq1S/tHexG39d9XXGZv19VfRrDjPJzFmPfTAqOQS1pfFOujw==
669+
dependencies:
670+
"@babel/helper-plugin-utils" "^7.10.4"
671+
672+
"@babel/plugin-transform-react-jsx-development@^7.10.4":
673+
version "7.10.4"
674+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.10.4.tgz#6ec90f244394604623880e15ebc3c34c356258ba"
675+
integrity sha512-RM3ZAd1sU1iQ7rI2dhrZRZGv0aqzNQMbkIUCS1txYpi9wHQ2ZHNjo5TwX+UD6pvFW4AbWqLVYvKy5qJSAyRGjQ==
676+
dependencies:
677+
"@babel/helper-builder-react-jsx-experimental" "^7.10.4"
678+
"@babel/helper-plugin-utils" "^7.10.4"
679+
"@babel/plugin-syntax-jsx" "^7.10.4"
680+
681+
"@babel/plugin-transform-react-jsx-self@^7.10.4":
682+
version "7.10.4"
683+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.4.tgz#cd301a5fed8988c182ed0b9d55e9bd6db0bd9369"
684+
integrity sha512-yOvxY2pDiVJi0axdTWHSMi5T0DILN+H+SaeJeACHKjQLezEzhLx9nEF9xgpBLPtkZsks9cnb5P9iBEi21En3gg==
685+
dependencies:
686+
"@babel/helper-plugin-utils" "^7.10.4"
687+
"@babel/plugin-syntax-jsx" "^7.10.4"
688+
689+
"@babel/plugin-transform-react-jsx-source@^7.10.4":
690+
version "7.10.5"
691+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.5.tgz#34f1779117520a779c054f2cdd9680435b9222b4"
692+
integrity sha512-wTeqHVkN1lfPLubRiZH3o73f4rfon42HpgxUSs86Nc+8QIcm/B9s8NNVXu/gwGcOyd7yDib9ikxoDLxJP0UiDA==
693+
dependencies:
694+
"@babel/helper-plugin-utils" "^7.10.4"
695+
"@babel/plugin-syntax-jsx" "^7.10.4"
696+
697+
"@babel/plugin-transform-react-jsx@^7.10.4":
698+
version "7.10.4"
699+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.4.tgz#673c9f913948764a4421683b2bef2936968fddf2"
700+
integrity sha512-L+MfRhWjX0eI7Js093MM6MacKU4M6dnCRa/QPDwYMxjljzSCzzlzKzj9Pk4P3OtrPcxr2N3znR419nr3Xw+65A==
701+
dependencies:
702+
"@babel/helper-builder-react-jsx" "^7.10.4"
703+
"@babel/helper-builder-react-jsx-experimental" "^7.10.4"
704+
"@babel/helper-plugin-utils" "^7.10.4"
705+
"@babel/plugin-syntax-jsx" "^7.10.4"
706+
707+
"@babel/plugin-transform-react-pure-annotations@^7.10.4":
708+
version "7.10.4"
709+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.4.tgz#3eefbb73db94afbc075f097523e445354a1c6501"
710+
integrity sha512-+njZkqcOuS8RaPakrnR9KvxjoG1ASJWpoIv/doyWngId88JoFlPlISenGXjrVacZUIALGUr6eodRs1vmPnF23A==
711+
dependencies:
712+
"@babel/helper-annotate-as-pure" "^7.10.4"
713+
"@babel/helper-plugin-utils" "^7.10.4"
714+
641715
"@babel/plugin-transform-regenerator@^7.10.4", "@babel/plugin-transform-regenerator@^7.8.7":
642716
version "7.10.4"
643717
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.4.tgz#2015e59d839074e76838de2159db421966fd8b63"
@@ -800,6 +874,19 @@
800874
"@babel/types" "^7.4.4"
801875
esutils "^2.0.2"
802876

877+
"@babel/preset-react@^7.10.4":
878+
version "7.10.4"
879+
resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.10.4.tgz#92e8a66d816f9911d11d4cc935be67adfc82dbcf"
880+
integrity sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==
881+
dependencies:
882+
"@babel/helper-plugin-utils" "^7.10.4"
883+
"@babel/plugin-transform-react-display-name" "^7.10.4"
884+
"@babel/plugin-transform-react-jsx" "^7.10.4"
885+
"@babel/plugin-transform-react-jsx-development" "^7.10.4"
886+
"@babel/plugin-transform-react-jsx-self" "^7.10.4"
887+
"@babel/plugin-transform-react-jsx-source" "^7.10.4"
888+
"@babel/plugin-transform-react-pure-annotations" "^7.10.4"
889+
803890
"@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
804891
version "7.11.0"
805892
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.0.tgz#f10245877042a815e07f7e693faff0ae9d3a2aac"
@@ -1369,6 +1456,11 @@ babel-plugin-macros@^2.8.0:
13691456
cosmiconfig "^6.0.0"
13701457
resolve "^1.12.0"
13711458

1459+
babel-plugin-transform-react-remove-prop-types@^0.4.24:
1460+
version "0.4.24"
1461+
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
1462+
integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
1463+
13721464
balanced-match@^1.0.0:
13731465
version "1.0.0"
13741466
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -4174,7 +4266,7 @@ loglevel@^1.6.8:
41744266
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
41754267
integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==
41764268

4177-
loose-envify@^1.0.0:
4269+
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
41784270
version "1.4.0"
41794271
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
41804272
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -5771,6 +5863,15 @@ promise-inflight@^1.0.1:
57715863
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
57725864
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
57735865

5866+
prop-types@^15.6.2, prop-types@^15.7.2:
5867+
version "15.7.2"
5868+
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
5869+
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
5870+
dependencies:
5871+
loose-envify "^1.4.0"
5872+
object-assign "^4.1.1"
5873+
react-is "^16.8.1"
5874+
57745875
proxy-addr@~2.0.5:
57755876
version "2.0.6"
57765877
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
@@ -5914,6 +6015,30 @@ [email protected]:
59146015
iconv-lite "0.4.24"
59156016
unpipe "1.0.0"
59166017

6018+
react-dom@^16.13.1:
6019+
version "16.13.1"
6020+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
6021+
integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
6022+
dependencies:
6023+
loose-envify "^1.1.0"
6024+
object-assign "^4.1.1"
6025+
prop-types "^15.6.2"
6026+
scheduler "^0.19.1"
6027+
6028+
react-is@^16.8.1:
6029+
version "16.13.1"
6030+
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
6031+
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
6032+
6033+
react@^16.13.1:
6034+
version "16.13.1"
6035+
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
6036+
integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
6037+
dependencies:
6038+
loose-envify "^1.1.0"
6039+
object-assign "^4.1.1"
6040+
prop-types "^15.6.2"
6041+
59176042
read-cache@^1.0.0:
59186043
version "1.0.0"
59196044
resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -6238,6 +6363,14 @@ sax@~1.2.4:
62386363
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
62396364
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
62406365

6366+
scheduler@^0.19.1:
6367+
version "0.19.1"
6368+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
6369+
integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
6370+
dependencies:
6371+
loose-envify "^1.1.0"
6372+
object-assign "^4.1.1"
6373+
62416374
schema-utils@^1.0.0:
62426375
version "1.0.0"
62436376
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"

0 commit comments

Comments
 (0)