First, the environmental project ready to build &
(1) Install the latest node.js
Chinese official website: https://nodejs.org/zh-cn/
Download msi, can be installed directly (remember to check the installation process Add to path)
View node version
node -v
View npm (package management tool under nodejs)
asl -v
(2) Installation tool react scaffolding create-react-app
npm install -g create-react-app
(3) react to create a project using the create-react-app scaffolding tool
React easily build a project folder, and the folder in the following cmd: the Create-react-App Project Name
This process takes a little time, because download the required module modules more (large)
After the installation is complete, the wizard will tell you how to run your project react
(4) react project directory structure
后端看前端，说的不对也是情理之中的，这里插一句话：以前大学上编程主课的时候，经常不知道老师在讲什么，云里雾里的，记住他经常说的一句话就是："你们现在不懂，没关系好吧，以后慢慢就会懂得！"。现在觉得这句话简直就是真理，不必刻意去验证，时间就是最好的证明；因为我坚信，编程就是一门语言，而编程语言就一开发工具，大致来说，思想都是一样的，目的也是一样的；即使我现在在学前端，有很多说不上来道的东西，但加以数日，起初让我费解的地方后面都会慢慢解开迷雾的，难吗？不难啊，难在坚持的道路上，你会遇到很多坑，就看你有没有恒心和毅力去一个个解决了！
（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’）
现在还不知道具体应该怎么使用，先留着，以后就会明白的，哈哈！
三、React官网中文学习教程
React中文文档：https://react.docschina.org/
为什么要选择react呢？
感觉从后端转到前端学习，不费什么力气啊，是不是这样呢，还有待考证吧；唯一要调整的就是，挤出时间，多看多写多理解前 端的代码，没事，再来个前后端结合的项目练练手，想想都没时间和精力啊，哈哈！
四、井字棋游戏
（1）跟着官网建议，按着教程提示，手敲了一遍代码，最终只实现了简单的棋子交替下和输赢判断，历史状态什么的没有实现
三个组件：
A：格子（方块）组件 --> Square.jsx
B：棋盘组件 --> Board.jsx
C：游戏组件 -->Game.jsx
额外组件：
D：商品列表组件 --> ShopList.jsx
（2）效果
其中棋盘历史记录这个，效果如下：
五、GitHub项目地址
地址：搭建react脚手架，并结合官网的井字游戏教程，初识react
Bloggers have a habit, whether or not a simple project, as long as the constitution of a demonstration project, the code will be uploaded to GitHub repository, a repository is to increase the number of, another key point is to find the next, you can not turn local project files, plainly, it is easy to manage your own code;
