React未定义ReferenceError? 我正在使用webpack和webpack-dev-server

这是我的jsx

var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>hello world</h1>, document.getElementById('content') ) 

我用webpack build/bundle.js
我将bundle.js导入index.html

index.html的:

 <!DOCTYPE html> <html> <head> ┊ <meta charset="utf-8"> ┊ <meta name="viewport" content="width=device-width"> ┊ <title></title> </head> <body> ┊ <div id="content"></div> ┊ <script src="./build/bundle.js" type="text/javascript" charset="utf-8"></script> </body> </html> 

但是当我运行webpack-dev-server ,chrome控制台错误:
bundle.js:57 Uncaught ReferenceError: React is not defined
我相信,我已经运行npm install react
在这里输入图像描述

我怎么解决它?(-_-)ゞ゛

你应该添加到你的app.js而不是.jsx

 var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>hello world</h1>, document.getElementById('content') ) 

JSX是一种由React组件解释的转译语言。 所以,必须在app.js中有React组件来解释jsx!

所有浏览器都不支持JSX语法和ES6。

因此,如果我们在React代码中使用它们,我们需要使用一个工具将它们翻译成浏览器支持的格式。 巴别是一个这样的工具

Webpack使用加载器在捆绑文件之前翻译文件

要设置,请安装以下npm软件包

 npm i babel-loader babel-preset-es2015 babel-preset-react -S 

babel-preset-es2015和babel-preset-react是babel-loader使用的插件,分别转换ES6和JSX语法。

下一步是告诉Webpack在捆绑文件时使用babel-loader

 // Existing Code .... var config = { // Existing Code .... module : { loaders : [ { test : /\.jsx?/, include : APP_DIR, loader : 'babel' } ] } } 

装载机属性需要一个装载机数组,下面我使用了babel-loader 。 每个加载器属性应该指定它通过testing属性处理的文件扩展名是什么。 .js和.jsx文件可以使用正则expression式configuration为/\.jsx?/

最终的webpack.config.js

 var webpack = require('webpack'); var path = require('path'); module.exports = { context: path.join(__dirname, "src"), devtool: "inline-sourcemap", entry: "./js/client.js", module: { loaders: [ { test: /\.jsx?/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], } } ] }, output: { path: __dirname + "/src/", filename: "client.min.js" }, plugins: [ new webpack.ProvidePlugin({ 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' }) ] };