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

Question

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

以下是我如何尝试(但失败了)运行本书的 very first example :

1. 使用以下步骤安装 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
   

2. 从书中克隆示例存储库:

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

3. 从顶级示例文件夹运行 npm install:

   $ cd React-and-React-Native
   $ npm install
   

4. 尝试编译/运行 hello-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.
   

5. 编辑 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'],
          },
        ],
      },
   

6. 重新编译/重新运行:

   $ 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 正在运行。但是，当我在浏览器中点击 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) 使用 hot 和 inline 选项运行 webpack 开发服务器(从子目录)，例如

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