手把手教你如何使用webpack+react

　　　　上一篇随笔讲述了新手入门入门前端 里面提到的第四阶段跟上当前前端的发展需要入门一个框架和自动化工具，当时推荐的是webpack+react 今天正好有空，也把自己入门webpack + react 的艰辛过程写下来， 现在想起来真是一脸泪。过程不表了， 现在将我看到的一些教程总结一下，挑选出对新手比较友好的学习过程。

　　　  第一步：

　　　　　　webpack 和 react  是要配合node.js 一起使用的。 去node.js官网下载当前node， 官网会根据你的环境匹配你适合的版本，直接下载安装就好了。node的使用配合控制台使用， 如果你是linux 或者 ios 系统的话很方便， 这里介绍一下本人在windows系统下使用情况。

　　　　　　　1.1 git-bash  windows的控制台不是很好用，  我一直是用GIT的控制台， 不过很不方便， 总的来说，国外的程序员大多使用linux(免费）所以前端世界对windos开发一直支持的不太友好。 介绍在GIT下几个常用的命令（linux通用） ：

　　　　　　　　　　　　cd     ： 跳转到目录， 例如 cd ../  就是跳转到上一个目录，

　　　　　　　　　　　　mkdir： 在当前目录生成目录，

　　　　　　　　　　　　ls      :  查询当前目录下的文件

　　　　　　　　　　　　rm    :  删除文件

　　　　　　　　　　　　TAB键  : 自动补齐路径， 例如， 你上一个目录里面有一个test目录， 你想切换到该目录就可以 这么写 CD ../T然后摁下TAB键就自动补齐了。

　　　　　　1.2 VPN 因为一些不知道的原因， 我在使用过程中下载依赖包的时候经常出现报错的情况，后来询问高人才搞明白， 很多时候下载依赖包出错是因为一些网站不能访问， 需要搭梯子。 现在，我下载依赖包的时候一般都开着VPN 。如果不愿意折腾，可以直接买收费的VPN， 我使用的是GREEN网络加速器， 这个加速器一般， 属于可以凑合用的情况， 如果谁有更好的解决方案可以私信我一下。

　　　第二步：

　　　　　　完成了上面的内容， 基本的环境就已经搭建好了，学习使用react 之前，应该使用webpack，这里推荐一个简单易学的教程：

　　　　　　　　　　　　　　Webpack 中文指南

　　　　　  这个教程非常简单， 都是介绍webpack 里面非常基本的概念， 看完这个教程你应该了解 webpack的 loader、配置文件应该怎么写， webpack 是如何管理项目的、插件是怎么应用的、 一个基本的项目框架是什么样子的、 web-dev-server热加载是怎么回事。

　　　　　　接着看下面这个教程， 跟着教材一步一步来：

　　　　　　　　　　　　　　Webpack傻瓜式指南

　　  第三步：

　　　　　第二步介绍的内容虽然很浅显，但是基本概念都讲清楚了， 这个时候就可以配合react 一起使用了。这个方面的教程推荐阮一峰老师的入门教程，个人还没有看见过比他写的还好的入门教程：

　　　　　　　　　　　　    React 入门实例教程　　　　　这个教程是单独的React ， 我们学习他的思想， 但是构建工程的时候引入webpack一起使用。下面逐步介绍 如何实现第一个demo ：

　　　　　　3.1.  根目录下右击空白处选择GIT BASH （已经安装了GIT 本地客户端）,弹出GIT 控制台。创建Demo目录， CD 到该目录下

　　　　　　　　　　　　

　　　　　　3.2. npm init 创建项目，输入相关信息， 系统自动生成package.json

　　　　　　3.3. 创建如下目录结构：（其中build系统自动建立）

　　　　　　　　　　

　　　　　　3.4. 添加相关依赖包：

　　　　　　　　　　npm install css-loader  jsx-loader react react-dom  --save-dev

　　　　　　　　　　(如果安装有错误， 可以一个一个安装， 解决BUG)

　　　　　　3.5. 写配置文件webpack.config.js:

　　　　　　　　　 

　　　　　　3.6 写入口文件index.js:

　　　　　　　　

　　　　　　 3.8 写demo01.html:

　　　　　　　　

　　　　　　3.7 配置完成后，控制台执行webpack:

　　　　　　　　

　　　　　　3.8 在浏览器上 看到 hello word .

　　　　　　阮一峰的10个demo都需要写一遍。本人的demo 实现， (只实现部分) 可以作为参考：

　　　　　　　　　　　　React + Webpack （看完记得给个star）

　　　　　　把阮一峰教材里面的10个demo 都写一遍之后， 你就对react 有基本的了解，  接下来的细节应该自己去探索了。 下面给两个比较好的教材(能力好的直接看英文官网就好了)：

　　　　　　　　　　　　React中文社区

　　　　　　　　　　　　webpack介绍

　　　　　　

　　　　　　至此，对于基本的webpack使用你已经掌握了， 接下来多做项目， 多实践就好了。 本版本更新时间是 7月16日， 由于前端的快速发展，可能出现不兼容， 或者 一些概念的落后， 多多包涵。

　　　　　　以上，祺。