一、环境准备&项目搭建

（1）安装最新node.js

中文官网：https://nodejs.org/zh-cn/

下载msi，直接安装即可（安装过程中记得勾选 Add to path）

查看node版本

node -v

查看npm（nodejs下的包管理工具）

npm -v

（2）安装react脚手架工具 create-react-app

npm install -g create-react-app

（3）利用 create-react-app 脚手架工具创建react项目

随便建一个react项目工程文件夹，并在文件夹下面cmd：create-react-app 项目名称

这个过程需要花费一点时间，因为下载所需的模块modules比较多（大）

安装完成后，向导会告诉你怎么运行你的react项目

（4）react项目目录结构

后端看前端，说的不对也是情理之中的，这里插一句话：以前大学上编程主课的时候，经常不知道老师在讲什么，云里雾里的，记住他经常说的一句话就是："你们现在不懂，没关系好吧，以后慢慢就会懂得！"。现在觉得这句话简直就是真理，不必刻意去验证，时间就是最好的证明；因为我坚信，编程就是一门语言，而编程语言就一开发工具，大致来说，思想都是一样的，目的也是一样的；即使我现在在学前端，有很多说不上来道的东西，但加以数日，起初让我费解的地方后面都会慢慢解开迷雾的，难吗？不难啊，难在坚持的道路上，你会遇到很多坑，就看你有没有恒心和毅力去一个个解决了！

（5）运行/启动项目

建议在VSCode代码编辑器里（专业、强大、插件丰富）打开你项目的folder

Ctrl+Shift+Y 调出控制台，输入：npm start

默认端口3000，项目启动后，自动跳转到默认的浏览器中，地址：http://localhost:3000

（这种webpack都是热启动的，即你在项目中修改了某个css、js或者html后，保存一下，无需重启项目，浏览器中的页面就会自动捕捉修改后的状态）

二、结构说明

（1）Web首页入口文件：index.html

（2）App 组件中DOM元素的(className)样式

（3）App.js（函数定义组件）

参考react官网中文教程里面的：函数定义组件

（4）index.js（react渲染组件，将组件的内容描述绑定到制定的DOM上）

有了App组件后，我们要怎么用它呢？

（5）serviceWorker.js（）

这个是什么鬼？有什么作用呢？

摘自网络：

service worker是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务。registerServiceWorker就是为react项目注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。注意，registerServiceWorker注册的service worker 只在生产环境中生效（process.env.NODE_ENV === ‘production’）