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

Question

这是我的 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

如何解决？(-_-)ゞ゛

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

加载器属性采用加载器数组，下面我只使用了babel-loader。每个加载程序属性应该通过测试属性指定它必须处理的文件扩展名是什么。 .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

React is not defined ReferenceError? I am using webpack and webpack-dev-server

node.js

reactjs

webpack

webpack-dev-server

react-dom