从零开始学习React-开发环境的搭建（一）

Myth丶恋晨 2023-02-14 13:25 120阅读 0赞

![format_png][]

其实16年的时候就已经接触到React，那个时候也只是入门，时隔多年，工作上一直都没有接触到相关的业务，不知不觉，前端的天也开始渐变，看到 了很多招聘要求上都是要求会React，三大框架怎么也得熟悉使用两个，不让下一份工作可能就很难了~

老规矩，先看完官方文档：  
教程：https://www.runoob.com/react/react-tutorial.html  
文档：http://caibaojian.com/react/

简介：简介：React是Facebook开发的一款JS库，是一个声明式、组件化并且用于构建用户界面的 JavaScript 库，通俗来讲就是将界面分成可以复用的组件，在需要时引入，使界面解耦，互不影响而又相互联系，在界面更新时，只会更新需要更新的组件，使得效率和性能上大大提升。

本着学习的精神，开始了搭建react开发环境之前需要准备的工作：  
\#\#\#\#1：安装node.js，查看版本号  
![format_png 1][]

\#\#\#\#2：安装cnpm替代npm，查看版本号  
![format_png 2][]

\#\#\#\#3：yarn，查看版本号  
![format_png 3][]

不会安装yarn的童鞋，可以查看官方文档：  
使用安装命令：npm i -g yarn  
![format_png 4][]

以上三大步骤就不细说了，准备工作完成后

\#\#\#\#4：安装脚手架

cnpm  install -g  create-react-app

![format_png 5][]

\#\#\#\#5：在d盘创建一个空目录，存放项目  
![format_png 6][]

\#\#\#\#6：进入文件夹，创建项目  
![图片.png][.png]

create-react-app reactdemo

等待生成我们的项目之中（网络慢的话可能要等几分钟哦）

![format_png 7][]  
可以看到，d盘里面初始化的这个项目了  
![format_png 8][]

\#\#\#\#7：cd 到刚刚生成的项目文件里面,运行项目

cd reactdemo
    使用yarn start或者 npm   start

弹出浏览器，显示界面，react环境安装完成了  
![format_png 9][]

![format_png 10][]

从零开始学习React-开发环境的搭建完成，忽然觉得，是不是和vue的操作步骤是一样一样的呐。

![>原文作者：祈澈姑娘 技术博客：\[https://www.jianshu.com/u/05f416aefbe1\](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9saW5rcy5qaWFuc2h1LmNvbS9nbw?x-oss-process=image/format,png)90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚，欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。][_https_www.jianshu.com_u_05f416aefbe1_https_imgconvert.csdnimg.cn_aHR0cHM6Ly9saW5rcy5qaWFuc2h1LmNvbS9nbw_x-oss-process_image_format_png_90_500G]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTVlZTUyYjdkZTEwNGY2N2QucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWNiYjlkZDU1MzE0N2FkZDcucG5n?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTdjZDBhMjY1MzA1MDhmYmIucG5n?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTI2OTBmMTg2ZWEyMzdmODUucG5n?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTY3ODdhMjVmOGQ2ZDFjYTYucG5n?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTM5ZmI2N2FjMDFlNDljZjkucG5n?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWQ5NzIzMzc2ZTVjNzM1NDYucG5n?x-oss-process=image/format,png
[.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTVlMDU0ZTM0NjkzZmMzOTYucG5n?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTkzZDE3ZjYwYjRjNTM4NmQucG5n?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTZkNTFjYTVlNzMyZDIwNzcucG5n?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LThlOGYxNWYyMmYzZjVjMzAucG5n?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWY1YmNjODUyMGNkMGJmMDcucG5n?x-oss-process=image/format,png
[_https_www.jianshu.com_u_05f416aefbe1_https_imgconvert.csdnimg.cn_aHR0cHM6Ly9saW5rcy5qaWFuc2h1LmNvbS9nbw_x-oss-process_image_format_png_90_500G]: https://img-blog.csdnimg.cn/20200603103516961.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70