ReactDOM.render 不渲染组件答案

【问题标题】：ReactDOM.render not rendering the componentReactDOM.render 不渲染组件
【发布时间】：2018-05-16 23:41:52
【问题描述】：

我正在使用带有 react 的 nodeJS。

在我使用的节点中安装 react。

npm install --save react react-dom

这是我的 index.html 文件

<html>
<head>
  <script src="Script/script.jsx" type="text/babel"></script>
</head>
<body>
  <div id="ExperimentForm"></div>
</body>
</html>

script.jsx

从“反应”导入反应；从 'react-dom' 导入 ReactDOM;

var FormComponent = React.createClass({
  render :function(){
  return(<h2>Hello World</h2>);
  }

})

ReactDOM.render(<FormComponent />, document.getElementById("ExperimentForm"));

我尝试过使用

var express = require('express');
var app = express();

但这也不起作用。

我的 app.js 是

var SwaggerExpress = require('swagger-express-mw');
const express = require('express');
const app = express();
const path = require('path');

    var config = {
      appRoot: __dirname // required config
    };

    app.use(express.static(path.join(__dirname, 'views')));

    app.get('/index', function (req, res) {
      console.log("index page");
      res.sendFile(path.join(__dirname + '/views/index.html'));
    });

    console.log(path.join(__dirname + '/views/index.html'));
    SwaggerExpress.create(config, function (err, swaggerExpress) {
      console.log("Starting server");
      if (err) {
        throw err;
      }


      swaggerExpress.register(app);


      const port = 11011;
      const server = app.listen(port, function () {
        console.log('Server started @ %s!', port);
      });


    });

在谷歌开发者工具中我没有看到任何错误，它似乎加载了 index.html 但没有在浏览器中显示任何内容。

【问题讨论】：

标签： node.js reactjs

【解决方案1】：

您不能使用import 来获取react 和react-dom。您必须使用其 CDN 中的 script 标记显式导入它们。此外，要启用jsx 的解析，您还需要babel-core。只需从script.jsx 中删除import 语句，您的index.html 应该如下所示

<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" type="text/javascript"></script>

</head>

<body>
    <div id="ExperimentForm"></div>
    <script src="Script/script.jsx" type="text/babel"></script>
</body>

</html>

【讨论】：

感谢解答，那npm install --save react react-dom的用例是什么，所以如果我们在脚本中包含cdnjs就不需要安装这些react包了？跨度>
@bhavesh 上述方法是创建 React 应用程序的一种方法。但通常这种方法不是首选。另一种方法是独立创建反应应用程序。这样，您可以使用 npm install 安装 react、dom 等，然后使用 webpack 之类的工具将它们捆绑起来。
@bhavesh 我建议使用 github.com/facebookincubator/create-react-app 。你可以直接开始使用react，不用担心各种配置。

【解决方案2】：

正确的做法是：

npm install webpack babel-loader babel-core babel-preset-es2015 babel-preset-react

在你的 package.json 里面的 script 标签中添加这个：

"scripts": {
"pack": "webpack"
// other default script tag here
}

在您的应用根目录中创建一个 deploy 文件夹

在您的应用根目录中创建 webpack.config.js 并粘贴以下 json

const path = require('path');
module.exports = {
  entry:"./<replace with your js file entry point>",
  output:{
  path: __dirname+"/deploy",
  filename:"app.js"
},
module:{
  loaders:[
  { test:/\.js$/, exclude:/node_modules/, loader:"babel-loader" }
]
}};

它的作用是将所有 js 文件捆绑到一个 js 文件中，并将其保存在部署文件夹文件名 app.js 中

接下来在app根目录下创建一个.babelrc，并包含以下json

 {
   "presets":[
   "es2015",
   "react"
   ]
 }

这确保 babel 理解 es6 和 react 语法。

【讨论】：

在这种方法中我需要在 index.js 文件中包含 cdn 脚本吗？导入 react 和 ReactDom 应该可以工作吗？
如果您使用 npm install --save react react-dom 安装，您将不再需要 CDN。创建 index.js 文件，在其中导入 react 和 react-dom，并将其作为入口点包含在 webpack.config.js 中。在那里你写你的反应代码 var FormComponent = React.createClass({ render :function(){ return(
Hello World
); } }) ReactDOM.render(, document.getElementById("实验表格"));