Skip to content

Commit b8c7dbc

Browse files
Hombre2014Hombre2014
committed
Run raisl webpacker:install:react
1 parent 749b500 commit b8c7dbc

File tree

5 files changed

+153
-4
lines changed

5 files changed

+153
-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

+20-3
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: [
@@ -68,14 +77,22 @@ module.exports = function(api) {
6877
[
6978
'@babel/plugin-transform-runtime',
7079
{
71-
helpers: false
80+
helpers: false,
81+
regenerator: true,
82+
corejs: false
7283
}
7384
],
7485
[
7586
'@babel/plugin-transform-regenerator',
7687
{
7788
async: false
7889
}
90+
],
91+
isProductionEnv && [
92+
'babel-plugin-transform-react-remove-prop-types',
93+
{
94+
removeImport: true
95+
}
7996
]
8097
].filter(Boolean)
8198
}

‎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

+5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
{
22
"dependencies": {
3+
"@babel/preset-react": "^7.16.7",
34
"@rails/webpacker": "5.4.3",
5+
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
6+
"prop-types": "^15.8.1",
7+
"react": "^18.1.0",
8+
"react-dom": "^18.1.0",
49
"webpack": "^4.46.0",
510
"webpack-cli": "^3.3.12"
611
},

‎yarn.lock

+101-1
Original file line numberDiff line numberDiff line change
@@ -451,6 +451,13 @@
451451
dependencies:
452452
"@babel/helper-plugin-utils" "^7.8.0"
453453

454+
"@babel/plugin-syntax-jsx@^7.16.7":
455+
version "7.16.7"
456+
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
457+
integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
458+
dependencies:
459+
"@babel/helper-plugin-utils" "^7.16.7"
460+
454461
"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
455462
version "7.10.4"
456463
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -692,6 +699,39 @@
692699
dependencies:
693700
"@babel/helper-plugin-utils" "^7.16.7"
694701

702+
"@babel/plugin-transform-react-display-name@^7.16.7":
703+
version "7.16.7"
704+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz#7b6d40d232f4c0f550ea348593db3b21e2404340"
705+
integrity sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==
706+
dependencies:
707+
"@babel/helper-plugin-utils" "^7.16.7"
708+
709+
"@babel/plugin-transform-react-jsx-development@^7.16.7":
710+
version "7.16.7"
711+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz#43a00724a3ed2557ed3f276a01a929e6686ac7b8"
712+
integrity sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==
713+
dependencies:
714+
"@babel/plugin-transform-react-jsx" "^7.16.7"
715+
716+
"@babel/plugin-transform-react-jsx@^7.16.7":
717+
version "7.17.3"
718+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.3.tgz#eac1565da176ccb1a715dae0b4609858808008c1"
719+
integrity sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==
720+
dependencies:
721+
"@babel/helper-annotate-as-pure" "^7.16.7"
722+
"@babel/helper-module-imports" "^7.16.7"
723+
"@babel/helper-plugin-utils" "^7.16.7"
724+
"@babel/plugin-syntax-jsx" "^7.16.7"
725+
"@babel/types" "^7.17.0"
726+
727+
"@babel/plugin-transform-react-pure-annotations@^7.16.7":
728+
version "7.16.7"
729+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.7.tgz#232bfd2f12eb551d6d7d01d13fe3f86b45eb9c67"
730+
integrity sha512-hs71ToC97k3QWxswh2ElzMFABXHvGiJ01IB1TbYQDGeWRKWz/MPUTh5jGExdHvosYKpnJW5Pm3S4+TA3FyX+GA==
731+
dependencies:
732+
"@babel/helper-annotate-as-pure" "^7.16.7"
733+
"@babel/helper-plugin-utils" "^7.16.7"
734+
695735
"@babel/plugin-transform-regenerator@^7.14.5", "@babel/plugin-transform-regenerator@^7.17.9":
696736
version "7.17.9"
697737
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.17.9.tgz#0a33c3a61cf47f45ed3232903683a0afd2d3460c"
@@ -860,6 +900,18 @@
860900
"@babel/types" "^7.4.4"
861901
esutils "^2.0.2"
862902

903+
"@babel/preset-react@^7.16.7":
904+
version "7.16.7"
905+
resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.16.7.tgz#4c18150491edc69c183ff818f9f2aecbe5d93852"
906+
integrity sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==
907+
dependencies:
908+
"@babel/helper-plugin-utils" "^7.16.7"
909+
"@babel/helper-validator-option" "^7.16.7"
910+
"@babel/plugin-transform-react-display-name" "^7.16.7"
911+
"@babel/plugin-transform-react-jsx" "^7.16.7"
912+
"@babel/plugin-transform-react-jsx-development" "^7.16.7"
913+
"@babel/plugin-transform-react-pure-annotations" "^7.16.7"
914+
863915
"@babel/runtime@^7.15.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
864916
version "7.17.9"
865917
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
@@ -1445,6 +1497,11 @@ babel-plugin-polyfill-regenerator@^0.3.0:
14451497
dependencies:
14461498
"@babel/helper-define-polyfill-provider" "^0.3.1"
14471499

1500+
babel-plugin-transform-react-remove-prop-types@^0.4.24:
1501+
version "0.4.24"
1502+
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
1503+
integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
1504+
14481505
balanced-match@^1.0.0:
14491506
version "1.0.2"
14501507
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -3848,7 +3905,7 @@ jest-worker@^26.5.0:
38483905
merge-stream "^2.0.0"
38493906
supports-color "^7.0.0"
38503907

3851-
js-tokens@^4.0.0:
3908+
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
38523909
version "4.0.0"
38533910
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
38543911
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -4023,6 +4080,13 @@ loglevel@^1.6.8:
40234080
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114"
40244081
integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==
40254082

4083+
loose-envify@^1.1.0, loose-envify@^1.4.0:
4084+
version "1.4.0"
4085+
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
4086+
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
4087+
dependencies:
4088+
js-tokens "^3.0.0 || ^4.0.0"
4089+
40264090
lru-cache@^5.1.1:
40274091
version "5.1.1"
40284092
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -5484,6 +5548,15 @@ promise-inflight@^1.0.1:
54845548
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
54855549
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
54865550

5551+
prop-types@^15.8.1:
5552+
version "15.8.1"
5553+
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
5554+
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
5555+
dependencies:
5556+
loose-envify "^1.4.0"
5557+
object-assign "^4.1.1"
5558+
react-is "^16.13.1"
5559+
54875560
proxy-addr@~2.0.7:
54885561
version "2.0.7"
54895562
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -5614,6 +5687,26 @@ [email protected]:
56145687
iconv-lite "0.4.24"
56155688
unpipe "1.0.0"
56165689

5690+
react-dom@^18.1.0:
5691+
version "18.1.0"
5692+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
5693+
integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
5694+
dependencies:
5695+
loose-envify "^1.1.0"
5696+
scheduler "^0.22.0"
5697+
5698+
react-is@^16.13.1:
5699+
version "16.13.1"
5700+
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
5701+
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
5702+
5703+
react@^18.1.0:
5704+
version "18.1.0"
5705+
resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
5706+
integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
5707+
dependencies:
5708+
loose-envify "^1.1.0"
5709+
56175710
read-cache@^1.0.0:
56185711
version "1.0.0"
56195712
resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -5889,6 +5982,13 @@ sax@~1.2.4:
58895982
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
58905983
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
58915984

5985+
scheduler@^0.22.0:
5986+
version "0.22.0"
5987+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
5988+
integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
5989+
dependencies:
5990+
loose-envify "^1.1.0"
5991+
58925992
schema-utils@^1.0.0:
58935993
version "1.0.0"
58945994
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"

0 commit comments

Comments
 (0)