Question

这是我的 jsx ：

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

我使用webpack构建build/bundle.js＆amp;
我将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了

我该如何解决？（ - _-）ゞ゛

Answer 1

您应该将其添加到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才能使React组件解释jsx !!

Answer 2

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

因此，如果我们在React代码中使用它们，我们需要使用一种工具将它们转换为浏览器支持的格式。 Babel就是这样一个工具

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

loaders属性采用了一系列加载器，下面我只使用了babel-loader。每个loader属性应指定它必须通过test属性处理的文件扩展名。 .js和.jsx文件可以使用正则表达式/\.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'
      })
  ] 
};

React没有定义ReferenceError？我正在使用webpack和webpack-dev-server

2 个答案: