![bb06a1cd9a5c6b92b63af32e735d1043.png](https://i-blog.csdnimg.cn/blog_migrate/d0e1087cbc88c7e6e590b7c84c97b40b.jpeg)
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使用两个,不让下一份工作可能就很难了~
老规矩,先看完官方文档:
教程:https://www.runoob.com/react/react-tutorial.html
文档:http://caibaojian.com/react/
简介:简介:React是Facebook开发的一款JS库,是一个声明式、组件化并且用于构建用户界面的 JavaScript 库,通俗来讲就是将界面分成可以复用的组件,在需要时引入,使界面解耦,互不影响而又相互联系,在界面更新时,只会更新需要更新的组件,使得效率和性能上大大提升。
本着学习的精神,开始了搭建react开发环境之前需要准备的工作:
1:安装node.js,查看版本号
![80c05b0929fe5243ed763467013ea857.png](https://i-blog.csdnimg.cn/blog_migrate/e77ec399dd097e52bf0d9f589076c58f.jpeg)
2:安装cnpm替代npm,查看版本号
![10b97acc1a2054fbed6af2525624c5ab.png](https://i-blog.csdnimg.cn/blog_migrate/1955ece5440d1076e32bf77e7708b2ab.jpeg)
3:yarn,查看版本号
![867c4c176e835ea69c7b79bf57427323.png](https://i-blog.csdnimg.cn/blog_migrate/35de3378588ebaca3e348c6e07d25ac0.jpeg)
不会安装yarn的童鞋,可以查看官方文档。
使用安装命令:npm i -g yarn
![f056c5792de595e0d10f73c5464856e2.png](https://i-blog.csdnimg.cn/blog_migrate/8db255c6079b5a9af20853fc8f06fde0.jpeg)
以上三大步骤就不细说了,准备工作完成后
4:安装脚手架
cnpm install -g create-react-app
![5306af01a784a26d852bc1fb1a1309f3.png](https://i-blog.csdnimg.cn/blog_migrate/b4067a6ff6f2ff8c5280ed51028ff596.jpeg)
5:在d盘创建一个空目录,存放项目
![fa5c911620cf7fab42b02bc22db9d3ae.png](https://i-blog.csdnimg.cn/blog_migrate/925f40dae9bbf4499dd3ef2e34249630.jpeg)
6:进入文件夹,创建项目
![6bd1bb4d7c2ca129a768aecec6b8c587.png](https://i-blog.csdnimg.cn/blog_migrate/7723ff0cb48556fe021c9af45f40970d.jpeg)
create-react-app reactdemo
等待生成我们的项目之中(网络慢的话可能要等几分钟哦)
![d83bd1269443846478243ed96151b0a5.png](https://i-blog.csdnimg.cn/blog_migrate/608f6276cf2205f86c3c79408aaeb0dc.jpeg)
可以看到,d盘里面初始化的这个项目了
![e54e788009da27e6dce86e3203a60286.png](https://i-blog.csdnimg.cn/blog_migrate/24d898d1b71915a8998ac71fe4dc5136.jpeg)
7:cd 到刚刚生成的项目文件里面,运行项目
cd reactdemo使用yarn start或者 npm start
弹出浏览器,显示界面,react环境安装完成了。
![cf256747b34781c89c2e1914d9b500d2.png](https://i-blog.csdnimg.cn/blog_migrate/908a473acf08a0103d39aab73d3397a1.jpeg)
![3e41200bcfb33e6cddb28d1233d5c871.png](https://i-blog.csdnimg.cn/blog_migrate/dc391cf6ec86f7c2e0b59151f39ad536.jpeg)
从零开始学习React-开发环境的搭建完成,忽然觉得,是不是和vue的操作步骤是一样一样的呐。