准备
开始
-
在public目录下创建helloworld.html内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@15.3.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/remarkable@1.7.1/dist/remarkable.min.js"></script>
<script type="text/babel" src="scripts/helloworld.js"></script>
</head>
<body>
<div id="example"></div></body> </html>
在public/scripts目录下创建helloword.js内容如下
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
- 离线转换代码
npm install -g react-tools
jsx --watch src/ build/ 此后只要修改文件就可以自动生成新的js文件 - 运行NodeJs
npm install
node server.js - 打开localhost:3000/helloworld.html，发现运行成功
运行结果
网友评论