从零开始学习React-开发环境的搭建(一)

从零开始学习React-开发环境的搭建(一)_第1张图片

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

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

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

本着学习的精神,开始了搭建react开发环境之前需要准备的工作:

1:安装node.js,查看版本号

2:安装cnpm替代npm,查看版本号

从零开始学习React-开发环境的搭建(一)_第2张图片

3:yarn,查看版本号

不会安装yarn的童鞋,可以查看官方文档:
使用安装命令:npm i -g yarn


从零开始学习React-开发环境的搭建(一)_第3张图片

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

4:安装脚手架

cnpm  install -g  create-react-app
从零开始学习React-开发环境的搭建(一)_第4张图片

5:在d盘创建一个空目录,存放项目

从零开始学习React-开发环境的搭建(一)_第5张图片

6:进入文件夹,创建项目

图片.png
create-react-app reactdemo

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

从零开始学习React-开发环境的搭建(一)_第6张图片

可以看到,d盘里面初始化的这个项目了


从零开始学习React-开发环境的搭建(一)_第7张图片

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

cd reactdemo
使用yarn start或者 npm   start

弹出浏览器,显示界面,react环境安装完成了


从零开始学习React-开发环境的搭建(一)_第8张图片
从零开始学习React-开发环境的搭建(一)_第9张图片

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

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚,欢迎关注【编程微刊】公众号,回复【领取资源】,500G编程学习资源干货免费送。

你可能感兴趣的:(从零开始学习React-开发环境的搭建(一))