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

Question

我试图从Node/webpack-dev服务器下运行的图书“-type，React.js”中获得一个简单的“你好，世界”应用程序。我没有看到任何错误，但是当我在浏览器中访问它时，页面是空白的。

以下是我如何尝试--但失败了--运行这本书的第一个例子

1. 使用以下步骤安装node和npm (改编自这个要旨)： $ mkdir ~/..local/ node - install -install$ cd ~/..local/node-install$ curl http://nodejs.org/dist/node-latest.tar.gz区xz -组件=1美元/配置-前缀=~/.本地$ -j install$ curl https://www.npmjs.com/install.sh _ sh节点-v；npm -v v7.7.4 4.1.2
2. 从这本书中克隆回购的例子： $ git克隆https://github.com/PacktPublishing/React-and-React-Native.git
3. 从顶级示例文件夹运行npm install： $ cd反应反应-本机$ npm安装
4. 尝试编译/运行hello-jsx示例： $ cd，第02章/hello-jsx$ node ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js ../main.js模块构建中的错误失败: Error: React : Webpack加载程序现在分别导出。如果您使用Babel，我们建议您从Webpack配置的“加载器”部分全部删除“react热加载器”，并在.babelrc文件的"plugins“部分中添加”react/babel“。如果您不喜欢使用Babel，请将Webpack配置的“加载器”部分中的“react热装载机”或“react热装载机/Webpack”替换为“react热加载器/Webpack”。在(/home/evadeflow/.local/React-and-React-Native/node_modules/react-hot-loader/lib/index.js:7:11) @ multi :编译失败。
5. 编辑hello-jsx/webpack.config.js以解决上述错误： jsx/webpac.config.js b/hot 02/hello-jsx/webpac.config.js索引312f152.592e767 100644 --a/haf02/hello-jsx/webpac.config.js +++ b/chaair02/hello-jsx/webpac.config.js@ -13,7 +13,7 @@ module.exports ={ test: /jsx？$/，不包括:/node_node/，-加载者：[‘hot热’，+装载机：[“反应-热装载机/webpack”，‘babel?presets[]=es2015’，}，}，
6. 重新编译/重新运行： $ node ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js http://localhost:8080/webpack-dev-server/ webpack结果来自/内容来自/home/evadeflow/.local/React-and-React-Native/Chapter02/hello-jsx Hash: 590282c761dccbb5710a版本: webpack 1.14.0 Time: 1260 is资产块大小块名称main-bundle.js 978 kB 0发出主块{0} main-bundle.js ( main ) 923.client=‘client 3’>生成的/home/evadeflow/.local/React-and-React-Native/~/url/url.js 23.3 http://0.0.0.0:8080 {0}生成的/home/evadeflow/.local/React-and-React-Native/~/url/~/punycode/punycode.js 14.6 kB {0}编译<.许多类似的输出忽略了/home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMNullInputValuePropHook.js 251 /home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMNullInputValuePropHook.js 4.32 kB {0}构建的/home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMInvalidARIAHook.js 1.37 kB {0}构建/home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMInvalidARIAHook.js 3.14 kB {0}构建webpack:成功编译。

在最后一步之后，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文件，特别是“加载程序”行，如下所示：

(A)将“反应-热”改为“反应-热装载机/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 dev服务器(从子目录)。

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

Answer 2

我解决了很多这些问题。试着拉最新版本。

我主要解决的两件事是：

1. 使用Webpack 2作为依赖项，并作为初始设置的一部分，添加关于在全球范围内安装webpack/增加值服务器的说明。
2. 每个例子的简化webpack配置。我们只需要巴贝尔装载机和一个入口点。

试试看，让我知道它是否更容易开始。