大前端之React框架安装详解

跟随着大前端开发成长计划。从前端基础Html，CSS，JavaScript的学习，移动端H5开发的学习，到前端框架NodeJs、Vue的学习，现在已经到了最后一个阶段了。将自己理解的React框架的安装方式简单和大家浅谈一下。

初识

React 是一个用于构建用户界面的 JAVASCRIPT 库。主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。它起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

特点

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。

• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 3.灵活 −React可以与已知的库或框架很好地配合。

• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React 安装

我用的是V14.16.0版本，也可以在官网 https://reactjs.org/ 下载最新版

cmd打开命令提示符：

检测版本  输入：node -v

安装node时会自带一个npm的包管理工具。

检测npm版本 输入：npm -v

如若以上两个命令输入都返回版本号，则安装成功！

查看node.js环境变量：

在安装成功后，系统会自己设置node.js的环境变量，

我们可以键入path来查看环境变量： path

通过 npm 使用 React

一键命令

在要写练习的目录上打开cmd命令行，输入npm i cnpm -g --registry=https://registry.npm.taobao.org

国内使用 npm 速度很慢，所以我们可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:最后的参数就是淘宝的镜像仓储url

-g表示是全局安装
这个命令的意思是，使用npm，从远程仓储https://registry.npm.taobao.org上下载一个叫做cnpm的包，并且安装至本地nodejs的根目录下的node_global目录下
这里npm i，这个i就是install的简写，你也可以写全这个单词
这里注意，一定要有-g这个参数，这个参数是-global的缩写，表示全局安装。由于nrm和npm，webpack都属于工具性的包。是我们做任何项目都要使用的工具，所以必须全局安装。

按步骤命令

国内npm有点慢，可以设置成淘宝的镜像来代替原有的。

cmd命令提示符中键入：

npm config set registry https://registry.npm.taobao.org

安装create-react-app

我们可以通过安装create-react-app来创建React项目。

安装命令：npm install -g create-react-app

安装成功之后，就可以创建React项目

创建React项目

进入你想创建项目的路径（根据自己的需要指定位置，注意，是你自己的node项目路径，不是node软件安装路径！），然后键入命令：

create-react-app demo

这里的create-react-app是创建命令，demo是你要创建的项目的名称，项目名称可以随便起。

这样就算是创建成功

创建React项目

进入你想创建项目的路径（根据自己的需要指定位置，注意，是你自己的node项目路径，不是node软件安装路径！），然后键入命令：

create-react-app hwdemo

这里的create-react-app是创建命令，demo是你要创建的项目的名称，项目名称可以任意起。

这样就算是创建成功

耐心等待即可！

先cd hwdemo

然后 启动项目：npm start

大功告成