ReactDOM.render不渲染组件
我正在使用nodeJS进行反应。
在我使用的节点上安装反应。
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，但不显示任何东西在浏览器中。
你不能使用import来得到react和react-dom 。 您必须使用cdn中的script标记显式导入它们。 也为了parsingjsx ，你也需要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 webpack babel-loader babel-core babel-preset-es2015 babel-preset-react
在脚本标签里面的package.json中join：
"scripts": { "pack": "webpack" // other default script tag here }
在您的应用程序根目录中创build一个deploy文件夹
在你的app根目录下创buildwebpack.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根目录下创build一个.babelrc ，并包含下面的json
{ "presets":[ "es2015", "react" ] }
这确保babel理解es6并且反应语法。