###前提・実現したいこと
React-ES6-Webpack環境を作って触っているのですが、ブラウザコンソールに「React is not defined」と表示されうまくいきません。

###発生している問題・エラーメッセージ

Uncaught ReferenceError: React is not defined

###該当のソースコード

public/index.html

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta http-equiv="X-UA-Compatible" content="IE=edge">
5<title>react sandbox</title>
6<meta charset="utf-8">
7<meta name="description" content="">
8<meta name="author" content="">
9<meta name="viewport" content="width=device-width, initial-scale=1">
10<link rel="stylesheet" href="">
11</head>
12<body>
13<div id="app"></div>
14
15<script src="app.bundle.js"></script>
16</body>
17</html>
18
19

src/app.jsx

javascript
1const ReactDOM=require('react-dom');
2const HelloMessage=require('./components/HelloMessage.jsx');
3
4ReactDOM.render(
5  <HelloMessage name="Jane" />,
6  document.getElementById('app')
7)
8
9

src/components/HelloMessage.jsx

javascript
1import React from 'react';
2
3class HelloMessage extends React.Component{
4
5  render(){
6    return (
7      <div>Hello {this.props.name}</div>
8    );
9  }
10}
11
12module.exports=HelloMessage;
13
14

webpack.config.js

javascript
1const webpack = require('webpack');
2const path = require('path');
3
4module.exports = {
5  entry: './src/app.jsx',
6  output: {
7    filename: 'app.bundle.js',
8    path: path.resolve(__dirname, 'public')
9  },
10  module: {
11    loaders: [
12      {
13        test: /\.jsx?$/,
14        exclude: /(node_modules|bower_components)/,
15        loader: 'babel-loader',
16        query: {
17          presets: ['es2015','react']
18        }
19      }
20    ]
21  },
22  plugins: [
23    new webpack.optimize.UglifyJsPlugin({
24      compress: {
25          warnings: false
26      }
27    })
28  ],
29  devServer: {
30    contentBase: 'public',
31    port: 3333
32  },
33  devtool: "inline-source-map"
34};
35

###試したこと

webpack-dev-serverコマンドでwebpack-dev-serverを起動
consoleを見ると上記のエラー
webpackのコンソールでは、webpack: Compiled successfully.と表示されている。
jsxファイルをsrc/app.jsxとsrc/components/HelloMessage.jsxに分割せず、src/app.jsxに全部まとめると動きましたが、一枚のファイルに全部のComponentを書くのはReactを使う意味がない。。。

###補足情報(言語/FW/ツール等のバージョンなど)
package.json

javascript
1{
2  "name": "react",
3  "version": "1.0.0",
4  "main": "index.js",
5  "repository": {},
6  "license": "MIT",
7  "devDependencies": {
8    "babel": "^6.23.0",
9    "babel-core": "^6.23.1",
10    "babel-loader": "^6.3.2",
11    "babel-preset-es2015": "^6.22.0",
12    "babel-preset-react": "^6.23.0",
13    "babili": "^0.0.11",
14    "react": "^15.4.2",
15    "react-dom": "^15.4.2",
16    "webpack": "^2.2.1",
17    "webpack-dev-server": "^2.4.1"
18  }
19}

行動規範の内容に同意します

回答2件

ベストアンサー

はじめに

JSXとして記述された部分は、そのまま実行されるのではなくJavascriptコードに変換されます。これは実行時ではなく、アセット(app.bundle.js)を生成する段階で行われます。

説明

具体的には、src/app.jsxの下記の部分は

ReactDOM.render(
  <HelloMessage name="Jane" />,
  document.getElementById('app')
)

次のように変換されます。
(これはJSXを利用しない場合のReactの記述方法です)

javascript
1ReactDOM.render(
2  React.createElement(HelloMessage, { name: 'Jane' }),
3  document.getElementById('app')
4);

エラーの原因

変換後のコードのReact.createElement(〜でReactを参照しているが、src/app.jsxではrequire('react')していないのでエラーメッセージの通りとなります。

解決方法

src/app.jsxにもconst React = require('react')を追加してください。
また、上記の理由からJSXを利用する場合、モジュール毎にrequire('react')(またはimport)する必要があります。

javascript
1const React = require('react');
2const ReactDOM = require('react-dom');
3const HelloMessage = require('./components/HelloMessage.jsx');
4
5ReactDOM.render(
6  <HelloMessage name="Jane" />,
7  document.getElementById('app')
8)

おまけ

モジュール毎にrequireしてもwebpackが依存ツリーを整理してから出力へまとめるので配布ファイルが、もりもり増えることはありません。

投稿2017/02/23 20:28

StupidDog

総合スコア263

yohira0616

2017/03/10 01:29

ありがとうございます。解決できました！

行動規範の内容に同意します

ぱっと見でないなーと思ったのはwebpack.configのresolveですにゃ

JS
1resolve: {
2  extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"]
3}

投稿2017/02/20 10:49

nyancat

総合スコア132

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Reactで「React is not defined」と表示される

はじめに

説明

エラーの原因

解決方法

おまけ

関連した質問