4

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

索引.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
在此处输入图像描述

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

4

2 回答 2

4

你应该把它添加到你的app.jsnot.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！

于 2016-08-29T03:40:45.090 回答
0

并非所有浏览器都支持 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. 每个加载器属性都应该通过 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'
      })
  ] 
};
于 2016-08-29T04:07:48.673 回答