react学习之安装和使用

React是Facebook的开源项目，它基于jsx语法，实际上底层还是js和html，react推荐以组件化模块化的开发模式，其通过对DOM的模拟，最大限度的减少对DOM的操作提高效率。

一、react环境的准备

1、先安装nodejs，网址：http://nodejs.cn/，下载稳定版本后点击安装,安装完成后在window的cmd中进入到安装的盘符查看是否安装成功，如果是C盘直接输入：

node -v 查看版本号,出现版本号安装成功

2、安装cnpm，网址：https://npm.taobao.org/，打开网址后是一个淘宝的镜像，它一直在更新中，然后往下翻会看到使用说明，如下图：

进入cmd安装cnpm：

 

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

安装完后查看是否安装成功：

cnpm -v

当出现下图所示代表安装成功：

 

3、安装完cpnm后可以再安装一下yarn，可以直接使用cnpm命令来安装：

cnpm install -g yarn
或
npm install -g yarn

安装完输入 yarn -v 查看是否安装成功。
yarn的中文文档：https://yarn.bootcss.com/

二、创建一个react项目

react的官方文档地址：https://www.reactjscn.com/docs/create-a-new-react-app.html
在文档里的Create React App下面有个要求：

You’ll need to have Node >= 6 and npm >= 5.2 on your machine.

所以你的node版本和npm的版本要符合要求。
接下来开始创建一个react项目：
1、安装脚手架工具，只需要安装一次

cnpm install -g create-react-app
或
npm install -g create-react-app

2、创建项目
先从cmd进入你要创建项目的文件夹，然后输入：

create-react-app reactdemo #reactdemo是你的项目名

等待安装完成。

如图上所示，安装成功。
3、启动运行项目
安装完成后进入项目文件夹可以看到项目的结构：

接着我们在cmd中cd到项目文件夹下，然后输入命令：

 

npm start 或 yarn start  #运行项目

 

出现上图所示，如果不自动跳转到npm命令窗口就安下回车

如上图所示代表项目建好，根据上面的地址去浏览器打开页面，react的默认端口是：3000。
4、另外一种创建项目的方法是文档里面的方法

 

npx create-react-app reactdemo

这种方法就是将上述方法的合成一步

cnpm install -g create-react-app
create-react-app reactdemo
#将这两个步骤合为一步