Question

我正在使用nodeJS with react。

在我使用的节点中安装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

导入来自＆＃39;的反应＆＃39 ;; 从＆＃39; react-dom＆＃39;;

导入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但没有在浏览器中显示任何内容。

Answer 1

您无法使用import获取react和react-dom。您必须使用cdn中的script标记显式导入它们。另外，要启用jsx解析，您还需要babel-core。只需从import移除script.jsx语句，您的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>

Answer 2

这样做的正确方法是：

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

在你的package.json里面的脚本标签中添加：

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

在您的应用根目录

中创建部署文件夹

在您的应用根目录中创建 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文件中并将其保存在deploy文件夹filename app.js

中

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

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

这可以确保babel了解es6并对语法做出反应。

ReactDOM.render无法渲染组件

2 个答案: