React框架学习之react环境搭建教程

楼主刚开始学习react框架（完全的前端小白）在搭建环境这一关都花了不少时间。（还是得多亏同学的帮助，带我走出了困境，看到了希望）所以在此总结一下。

一、 通过npm使用React

1、node.js的安装。

如果你的系统不支持Node.js及NPM，则下载Node.js安装包及源码

如果你和我一样是windows 64位系统，那和我一样按如下选择：

你可以根据不同平台系统选择你需要的Node.js安装包。

Windows 安装包(.msi)

安装步骤1：双击下载后的安装包，如下图所示：

步骤2：点击以上的Run(运行)，将出现如下界面，点击next进入下一个界面：

步骤3：勾选接受协议选项，点击”Next“进入下一步：

步骤4：Node.js默认安装目录为”C:、Program File\nodejs\“，你可以修改目录，并点击next(下一步)：

步骤5：点击树形图标来选择你需要的安装模式，然后点击下一步（next）

步骤6;点击install（安装）开始安装Node.js。你也可以点击Back(返回)来修改先前配置。然后点击next:直到安装结束：

步骤7：检测是否已经成功安装node.js ：点击cmd，输入node -v 如果可以查看当前Node.js版本，则说明node.js安装成功。

目前的node.js都自带npm的。所以无需安装npm

2、React中使用CommonJS模块系统，如browserify或webpack，本教程使用webpack。

国内使用npm速度较慢，你可以使用淘宝定制的cnpm命令行工具代替默认的npm：

在这里，你可以进入自己定义的某个文件路径下，执行命令，否则默认是在C盘下。

如：我选择的是

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

D:\\install\nodeinstall\ npm config set registry https://registry.npm.taobao.org

ps:补充： 这样就可以使用cnpm 命令来安装模块了：

cnpm install [模块名]

更多信息查阅：https://npm.taobao.org/.

3、使用create-react-app快速构建React开发环境

create-react-app 是来自于Facebook,通过该命令我们无需配置就能快速构建React开发环境。

create-react-app 自动创建的项目是基于webpack +ES6

进入项目目录创建项目：

安装目录 cnpm install -g create -react -app

安装目录 create-react-app my-app

cd my-app/

npm start

即可在浏览器中打开https://localhost:3000/ ，结果如下图所示：

配置成功！下面可以进入项目编写你的代码吧！