搭建react脚手架&初识react - 好文

一、环境准备&项目搭建

（1）安装最新node.js

中文官网：https://nodejs.org/zh-cn/ <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 <https://www.cnblogs.com/clwydjgs/p/10078065.html>
代码编辑器里（专业、强大、插件丰富）打开你项目的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官网中文教程里面的：函数定义组件
<https://react.docschina.org/tutorial/tutorial.html#%E5%87%BD%E6%95%B0%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6>

（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/ <https://react.docschina.org/>

为什么要选择react呢？

感觉从后端转到前端学习，不费什么力气啊，是不是这样呢，还有待考证吧；唯一要调整的就是，挤出时间，多看多写多理解前
端的代码，没事，再来个前后端结合的项目练练手，想想都没时间和精力啊，哈哈！

四、井字棋游戏

（1）跟着官网建议，按着教程提示，手敲了一遍代码，最终只实现了简单的棋子交替下和输赢判断，历史状态什么的没有实现

三个组件：

A：格子（方块）组件 --> Square.jsx

B：棋盘组件 --> Board.jsx

C：游戏组件 -->Game.jsx

额外组件：

D：商品列表组件 --> ShopList.jsx

（2）效果

其中棋盘历史记录这个，效果如下：

五、GitHub项目地址

地址：搭建react脚手架，并结合官网的井字游戏教程，初识react <https://github.com/kobeyk/react-demo>

博主有个习惯，不管项目的简单与否，只要构成一个演示项目的，都会上传到GitHub代码仓库中，一个是为了增加repository的数量，另外一个关键的一点就是，下次查找的话，可以不用翻本地项目文件了，说白了，还是方便管理自己的代码；

热门工具换一换