Node.js React未定义引用错误？我正在使用webpack和webpack开发服务器

这是我的jsx:

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

但是当我运行

webpack dev server

时，chrome控制台出现错误：

bundle.js:57未捕获引用错误：未定义React

我确信，我已经运行了

npm install react

---

我怎样才能修好它呢ゞ゛

您应该将其添加到您的

app.js

而不是

.jsx

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

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
ReactDOM.render(
你好，世界，
document.getElementById（'content'）
)

---

JSX是一种传输语言，由React组件进行解释。因此，app.js中必须有React，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加载程序分别用来翻译ES6和JSX语法的插件

下一步是告诉Webpack在绑定文件时使用babel加载程序

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

loaders属性接受一个loader数组，下面我刚刚使用了

babel loader

。每个加载程序属性都应该指定它必须通过test属性处理的文件扩展名。可以使用正则表达式将js和.jsx文件配置为

/\.jsx？/

Finalwebpack.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'
      })
  ] 
};

---

您是否运行了npm start，并在命令行上看到了它的运行情况？您的webpack.config.js是什么？你设置了反应预设吗？@bitsMix是的，我设置了预设。babelrc@nataila.jsx是html/css和javascript的一半，其中as.js是纯javascript。您的app.js中必须有react，JSX被转换为react.createElement（）调用，因此在作用域中需要react来处理它们。无论是app.js还是app.JSX，除非OP在webpack.config.js中使用正确的配置构建文件，否则这都无关紧要。毕竟语法是JSXonly@ShubhamKhatri但是如果我想使用

JSX

，我如何在我的

webpack.config.js

中配置它？如果你发布你的webpack配置，我可能会有所帮助。@shubhamkhattri它确实很重要。JSX是一种传输语言，由React组件进行解释。因此，app.js中必须有React，React组件才能解释jsx！！请看这个帖子，

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'
      })
  ] 
};