React框架学习之react环境搭建

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

  一、  通过npm使用React

   1、node.js的安装。

  如果你的系统不支持Node.js及NPM，则Node.js安装包及源码下载地址为：https://nodejs.org/en/download/

如果你和我一样是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< 4000
/p>
 ps:补充：  这样就可以使用cnpm 命令来安装模块了：

              cnpm install [模块名]

        更多信息查阅：http://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

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

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