2．使用React编码
下面正式开始使用React来编写前端代码。
（1）npm安装react和react-dom：
npm install react react-dom -S
（2）用下面代码替换./src/index.jsx中的console：
import React from 'react';
import { render } from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React</p>;
}
}
render(<App/>, document.getElementById(‘app'));
（3）在根目录下执行：
./node_modules/.bin/webpack -d
现在浏览器打开index.html将会在页面展示Hello World。当然真实开发中不能每一次修改前端代码就执行一次Webpack编译打包，可以执行如下命令来监听文件变化：
./node_modules/.bin/webpack -d —-watch
终端将会显示：
myfirstapp Jack$ ./node_modules/.bin/webpack -d --watch
webpack is watching the files…
Hash: 6dbf97954b511aa86515
Version: webpack 4.22.
Time: 839ms
Built at: -- ::
Asset Size Chunks Chunk Names
bundle.js 1.87 MiB main [emitted] main
Entrypoint main = bundle.js
[./src/index.jsx] 2.22 KiB {main} [built]
+ hidden modules
这就是Webpack的监听模式，一旦项目中的文件有改动，就会自动执行Webpack编译命令。不过浏览器上展示的HTML文件不会主动刷新，需要读者手动刷新浏览器。如果想实现浏览器自动刷新，可以使用react-hot-
loader（https://github.com/gaearon/react-hot-loader）。
（4）真实项目开发中，一般使用npm执行./node_modules/.bin/webpack -d —watch这个命令来开发。这需要在package.json中配置：
{
// ...
"scripts": {
"dev": "webpack -d --watch",
"build": "webpack -p",
"test": "echo \"Error: no test specified\" && exit 1"
},
// ...
}
（5）现在只需要在根目录下执行如下命令就能开发与构建：
npm run dev npm run build
以上为真实项目中一个较为完整的项目结构，读者可以在此基础上根据项目的需要自行拓展其他功能。本例源码地址为https://github.com/khno/react-hello-world，分支为master。项目完整的结构如下：
.
├── build
│ └── bundle.js
├── index.html
├── package-lock.json
├── package.json
├── src
│ └── index.jsx
├── .gitignore
├── .babelrc
└── webpack.config.js
《海贼王》中罗杰说，每个人都有自己出场的机会！在将来，React可能会在前端历史的浪潮中被人遗忘，但今天，React的设计思想影响了无数的开发者，当下正是属于它的时代！！
