React学习笔记

面对互联网新型技术井喷式的增长，只有不断学习才能不被这个时代遗弃，在这里记录一下学习各个开发框架的心得体会。

为什么是React

现在主流的前端框架有angular、 vue、React。当然很多人都主推vue，因为它的脚手架灵活，语法更容易被接受，但是很多大厂都在用React。React是构建用户界面的JavaScript库，国外的Instagram就是用它实现的，2013年React开源。

很多人都说React的JSX让人受不了，这几个框架我都没有接触过。但是目前我所维护的项目代码前端都是基于React实现的，为了后期可以自行修改程序，不得不学。

前期环境准备

node安装

这个东西就和你玩Java一样需要先装个JDK是一样的，根据自己的电脑环境去下载合适的版本，比较稳定的版本应该是v12，本人的操作系统环境是Windows7 64位，[node下载地址 →](https://nodejs.org/en/download/

在cmd里输入下面命令验证是否安装成功

1

node -v

在cmd里通过以下命令设置全局文件存储目录，因为我的E盘空间很大，所以这两个文件夹node_global和 node_cache没有放在node.js的安装路径下

1
2

npm config set prefix "E:\npmpackage\node_global" 
npm config set cache "E:\npmpackage\node_cache"

cnpm安装

使用淘宝的镜像获取前端node依赖要比npm快很多

在cmd里通过以下命令安装cnpm，并制定下载镜像的源

1

npm install -g cnpm --registry=https://registry.npm.taobao.org

VScode编辑器安装

前端的开发使用这个编辑器较多，这个编辑器很好用可以替代Notepad++或者 UltraEdit这样的工具vscode下载 →

开始第一个React项目

通过安装脚手架创建项目

这里可以使用create-react-app来创建一个项目 官方文档 →

在本地创建一个文件夹作为你这个项目的工作空间，通过vscode 中的终端命令行进行编辑，敲入以下命令实现项目的创建

1
2

cnpm install -g create-react-app #安装脚手架
create-react-app create-react-app 01helloworld #创建第一个项目

经过漫长的等待可以看到创建的项目树生成

最后我们启动项目，开始玩转react,在终端中输入以下命令

yarn start

在浏览器里就可以看到我们的页面了，react支持实时编译，即在项目不中断的情况下实时修改看到效果。

• ← Previous Post
• Next Post →