组件未在简单的 React.js 应用程序中呈现

Question

我正在尝试从书 React and React Native 运行ning 中获取一个简单的 "Hello, World" 类型 React.js 应用程序在 Node/webpack-dev-server 下。我没有看到任何错误，但是 当我在浏览器中访问它时该页面是空白的。

以下是我尝试并失败的方式运行这本书的 very first example：

使用这些步骤安装 node 和 npm（改编自 this gist）：

$ mkdir ~/.local/node-latest-install
$ cd ~/.local/node-latest-install
$ curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1
$ ./configure --prefix=~/.local
$ make -j install
$ curl https://www.npmjs.com/install.sh | sh
$ node -v; npm -v
v7.7.4
4.1.2

从书中克隆示例代码库：

$ git clone https://github.com/PacktPublishing/React-and-React-Native.git

运行 npm install 来自顶级示例文件夹：
```
$ cd React-and-React-Native
$ npm install
```

尝试compile/runhello-jsx示例：

$ cd Chapter02/hello-jsx
$ node ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js
...
ERROR in ./main.js
Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately. If you use Babel, we recommend that you remove "react-hot-loader" from the "loaders" section of your Webpack configuration altogether, and instead add "react-hot-loader/babel" to the "plugins" section of your .babelrc file. If you prefer not to use Babel, replace "react-hot-loader" or "react-hot" with "react-hot-loader/webpack" in the "loaders" section of your Webpack configuration.
at Object.warnAboutIncorrectUsage (/home/evadeflow/.local/React-and-React-Native/node_modules/react-hot-loader/lib/index.js:7:11)
@ multi main
webpack: Failed to compile.

编辑 hello-jsx/webpack.config.js 以解决上述错误：

diff --git a/Chapter02/hello-jsx/webpack.config.js b/Chapter02/hello-jsx/webpack.config.js
index 312f152..592e767 100644
--- a/Chapter02/hello-jsx/webpack.config.js
+++ b/Chapter02/hello-jsx/webpack.config.js
@@ -13,7 +13,7 @@ module.exports = {
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
-        loaders: ['react-hot', 'babel?presets[]=es2015'],
+        loaders: ['react-hot-loader/webpack', 'babel?presets[]=es2015'],
       },
     ],
   },

Recompile/re-run:

$ node ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js
http://localhost:8080/webpack-dev-server/  
webpack result is served from /
content is served from /home/evadeflow/.local/React-and-React-Native/Chapter02/hello-jsx
Hash: 590282c761dccbb5710a
Version: webpack 1.14.0
Time: 1260ms
         Asset    Size  Chunks             Chunk Names
main-bundle.js  978 kB       0  [emitted]  main 
chunk    {0} main-bundle.js (main) 923 kB [rendered]
    [0] multi main 52 bytes {0} [built]
    [1] (webpack)-dev-server/client?http://0.0.0.0:8080 3.97 kB {0} [built]
    [2] /home/evadeflow/.local/React-and-React-Native/~/url/url.js 23.3 kB {0} [built]
    [3] /home/evadeflow/.local/React-and-React-Native/~/url/~/punycode/punycode.js 14.6 kB {0} [built]

  <... lots of similar output omitted ...>

  [251] /home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMUnknownPropertyHook.js 4.32 kB {0} [built]
  [252] /home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMNullInputValuePropHook.js 1.37 kB {0} [built]
  [253] /home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMInvalidARIAHook.js 3.14 kB {0} [built]
webpack: Compiled successfully.

经过最后一步，node是运行ning。但是，当我在浏览器中点击 localhost:8080 时，我看到了一个空白页面：

我是不是做错了什么？

Answer 1

尝试以下操作：

1) 在全局和本地安装 webpack，即在代码的基本目录中执行以下操作：

npm install webpack --global
npm install webpack --save-dev

2) 安装 webpack 开发服务器，包括全局和本地：

npm install webpack-dev-server --global
npm install webpack-dev-server --save-dev

3) 更新 webpack.config.js 文件，特别是 "loader" 行，如下所示：

(A) 将 'react-hot' 替换为 'react-hot-loader/webpack'

(B) 将 'babel' 替换为 'babel-loader'

例如，这里的 "hello-jsx" 文件是旧的原始 webpack.config.js 文件中的行：

loaders: ['react-hot', 'babel?presets[]=es2015'],

这是新的更新 webpack.config.js 文件中的行：

loaders: ['react-hot-loader/webpack', 'babel-loader?presets[]=es2015'],

4) 运行具有热和内联选项的 webpack 开发服务器（来自子目录），例如

$ pwd
[whatever_base_directory]/Chapter02/hello-jsx
$ webpack-dev-server --hot --inline

Answer 2

我已经解决了很多这样的问题。尝试拉 latest.

我修复的两个主要问题是：

使用 Webpack 2 作为依赖项并添加说明以在全局范围内安装 webpack/webpack-dev-server 作为初始设置的一部分。
每个示例的简化 webpack 配置。我们只需要 babel-loader 和一个入口点。

试一试，让我知道是否更容易上手。

组件未在简单的 React.js 应用程序中呈现

Component not rendering in simple React.js app

javascript

node.js

reactjs

webpack-dev-server