初入React-环境搭建

在当下前端热潮中，一大批前端开发者，迷失了学习和追求的方向，面对日夜更迭的前端技术，我想大多数人跟我一样会觉得自己懂得的太少，会的太少，实践的太少，正因如此我写下了这一段前言 ，为了提醒自己和大家在这一片浩瀚大海中正确的寻找追求的方向，也告切自己为此修建更加牢固的船舶，从而远航。好了废话不多说，我们先从在三大框架中的React.js 入手

         我想目前市上的三大MVVM框架大家都有所了解，不了解的在这里就不详细说明

三大框架

在此列出三个框架的中文学习网址 :

Angular.js : https://angular.cn/

Vue.js : https://vuefe.cn/v2/guide/

React.js : http://react-china.org/

---

搭建 WebPack + React + Es6开发环境

webpack的模块化，react的组件化，以及es6的新特性我相信都很吸引人，在这么多吸引人的框架下，作为Development的我们如何将他们联合在一起，写出让人身心愉悦的项目代码，这是本文的中心。本文主要教新手搭建环境创建项目，可能有描述不清楚的地方请大家谅解毕竟从没写过这么长的文章，不过一定可以运行起来，本人当时也是入了很多坑才明白！

简介：

webpack ：近期最火的一款模块加载器兼职做打包工具，它能把各种资源，比如 js、jsx、css、less、sass、图片等作为模块来使用，并且可以压缩这些资源，话说webpack一路走来过五关斩六将，牺牲者惨目忍睹如：gulp，grunt.......  其实各家有各家的优点

react.js：现在最热门的前端框架，可以说没有之一，作为Facebook开发的一款JS库，后台可为强悍，使用函数式编程，jsx语法，先进的Virtual Dome，使其迅速占领了市场

ECMAScript 6 ：ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

环境搭建：

    1：首先我们需要下载安装node.js,下载地址（http://nodejs.cn/）

最好安装4.0以上

安装好node之后 win+r 打开运行，输入cmd，进入cmd控制台， 这一步我们需要来确认是否安装好了node，并且查看node的版本，因为安装node的时候，会自动帮我们安装npm ，所以我们也需要检查一下npm 的版本，至于npm是什么，还望大家百度谷歌随意选

node -v 查看node版本

npm -v 查看npm版本

2：创建项目

  2-1：在电脑随意那个盘例如说D盘 Dome文件夹下我们在此处输入cmd，这样我们就成功的在这个文件夹下打开了cmd

输入cmd

2-2：进入cmd后 我们输入mkdir  加上你自己的项目名称（这里以`AllenTest`为列），在根目录下我们就创建了属于自己的项目文件夹。然后cd  你的项目文件夹名称进入该项目

记得mkdir后面加空格

2-3：接下来比较重要的一步是生成package.json 文件在cmd中我们输入npm init，按照提示一直回车就行，如果实在觉得麻烦直接npm init -y

npm init 或者 npm init -y

2-4：这样在我们的项目文件夹中就会增加一个package.json文件，我们先不动这个文件，先在项目根目录新建一个Views的文件夹

然后在根目录新建两个文件 .babelrc 和 webpack.dev.config.js

对react组件进行一定的转化

webpack的配置文件

2-5：接下来我们对这两个文件进行书写，第一个我们来编写 .babelrc 

这样书写的含义就在于将部分代码进行转换因为目前浏览器不支持es6语法

2-6：编写webpack.dev.config.js文件，第一步我们在这个文件中定义一些我们接下来需要用到的一些参数

定义变量方便调用

2-7：在webpack.dev.config.js文件中添加以下结构

这是webpack的语法，建议搭建时可以学习一下webpack的语法便于后面的编码

2-8：在module.exports 中添加一下结构，这里的含义是实现热更新，监听代码修改，从而实现代码修改自动刷新页面的效果

这是很重要的配置 entry定义了入口，output定义输出的地址

2-9：继续往这个文件中添加以下结构，定义模块加载器

webpack编码要求

2-10：结尾部分不详细讲解，如果感兴趣可以联系我或者查资料

3：在完成前面这些步骤后，我们来做最重要的一些步骤，配置项目依赖，其实我在搭建第一个项目环境的时候经常碰到一种问题就是安装的依赖太多导致有些混乱不知道那些全局安装，那些本地安装所以在此我们就不一一安装，使用最便捷的方式，偷懒的方式哈哈，但不建议新手使用

package.json

在package.json文件中找到 license然后在下面编写如上图一样的依赖 ，编写完成之后 在项目根目录打开cmd 输入 npm install(安装项目依赖)，在这个时候稍微可以休息下，因为安装依赖，会要点时间，如果网络不好，建议安装cnpm 淘宝镜像 ，来安装依赖

安装依赖

安装好后  在项目根目录会增添一个node-modules的文件夹这个文件夹里面都是我们安装依赖的一些资源

项目依赖安装的目录

然后我们继续编写package.json中Scripts这部分编写一下代码

重要的部分

4：在完成上述所有操作后，大致已经完成项目环境的搭建了 接下来我们就在项目中搞事情了...................在Views文件夹下我们新建两个文件，我想大家现在应该很熟悉了那就是，index.html 和 index.js ， 这两个文件是我们的项目入口

忽略红色涂鸦部分

5:现在我们就可以在这两个文件中搞事情了，首先我们编写html  ，红色标记的地方别写错了,bundle.js 是我们生成的虚拟js 在实际的生产环境中我们不会这样做，我们会对应打包js，下次我会讲解

index.html

6:编写 js ，具体react.js 的语法以后会讲解 

index.js

7：现在我们在项目根目录打开cmd 输入npm run dev 等执行完成后 会自动打开页面，我们的hello world就会出现了

到此教程结束谢谢！！

附上我的GitHub地址 （ https://github.com/wenzirang） 喜欢的话欢迎start  并且环境搭建的源代码也有哦  谢谢