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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

20814閲覧

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

yohira0616

総合スコア255

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/02/20 02:33

###前提・実現したいこと
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.jsxsrc/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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

はじめに

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

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

0

ぱっと見でないなーと思ったのは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.51%

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

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

質問する

関連した質問