一、环境准备&项目搭建

 

(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的数量,另外一个关键的一点就是,下次查找的话,可以不用翻本地项目文件了,说白了,还是方便管理自己的代码;