Rails上でreactを動かすのに、こちらの記事を参考に/client
以下にwebpack環境を置いて、webpackでビルドした結果を/app/assets/javascripts/webpack/
に配置したのですが、componentを描画しようとすると、Uncaught ReferenceError: React is not defined
と表示されてしまいます。以下が各ファイルの中身になっています。どこが間違っているのか教えていただけると幸いです。どうぞよろしくお願いいたします。
ファイル構成
client ├─ src │ ├ components │ │ └─ favorite_box.js.jsx │ └─index.js ├─ node_modules ├─ package.json └─ webpack.config.js
各ファイル
javascript
1// favorite_box.js.jsx 2class FavoriteBox extends React.Component { 3 // (中略) 4 5 render() { 6 return ( 7 <div className="FavoriteBox"> 8 </div> 9 ) 10 } 11}
javascript
1// index.js 2import React from 'react' 3import ReactDOM from 'react-dom' 4 5import FavoriteBox from './components/favorite_box.js.jsx' 6 7ReactDOM.render( 8 <FavoriteBox/>, 9 document.getElementById('favorite_box') 10) 11
javascript
1// webpack.config.js 2module.exports = { 3 entry: { 4 app: './src/index.js', 5 }, 6 7 output: { 8 path: '../app/assets/javascripts/webpack', 9 filename: '[name].js', 10 }, 11 12 module: { 13 loaders: [ 14 { test: /\.(js|jsx)$/, 15 loader: "babel", 16 exclude: /node_modules/, 17 query: { 18 presets: ["es2015", "react"], 19 } 20 }, 21 ] 22 }, 23}
json
1// package.json 2{ 3 "private": true, 4 "scripts": { 5 "webpack-watch": "webpack -w", 6 "webpack-build": "webpack -p" 7 }, 8 "devDependencies": { 9 "babel-core": "^6.25.0", 10 "babel-loader": "^6.2.4", 11 "babel-preset-es2015": "^6.9.0", 12 "babel-preset-react": "^6.11.1", 13 "webpack": "^1.13.1" 14 }, 15 "dependencies": { 16 "react": "^15.2.1", 17 "react-dom": "^15.2.1" 18 } 19} 20
Rails5.1以降を使えばもっと簡単にReactが使えますよ。http://l-chika.hatenablog.com/entry/2017/05/02/191403とかを参考に最新のrailsを使うことをおすすめします。