1.前期准备:
1 | 全局下载工具:npm install -g create-react-ap |
2.使用Visual Studio Code打开模板项目,如下图所示:
3.在Terminal中输入npm start
,如下图所示:
4.编译器会自动打开项目的首页,此时显示的就是react的默认页面,如下图所示:
5.将默认生成出来的src文件夹下的全部文件删掉,这里需要重新创建如下图的文件或者文件夹,如下图所示:
添加文件夹:src/api
、src/asset
、src/components
、src/config
、src/pages
、src/utils
、public/css
添加文件:public/css/reset.css
、src/App.js
、src/index.js
6.public/css/reset.css
1 | /*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */ |
参考:https://github.com/jgthms/minireset.css/blob/master/minireset.css
7.public/index.html
1 |
|
8.src/App.js
1 | import React, {Component} from 'react' |
9.index.js
1 | /* |
10.观察package.json是否有有react的对应的组件,如下图所示,保存上面的文件,服务会自动部署并显示最新的页面。
11.效果如下图所示: