webpack-es6-react （为系统学习React布一个良好的开局）

本项目已做废，替代项目为 React-Study，欢迎交流学习。

项目地址：webpack-es6-react

这是一个基础的，综合了webpack，es6，react的学习模板。

本模板也方便你对 react 生态圈中其余相关知识的学习，好比你想学习 react-router,redux 或是 css-modules均可以以此模板为基础进行延伸学习。

webpack-es6-react

本模板应用了如下技术

• React

• Babel 6

• Webpack 咱们的构建工具

• Webpack Dev Server

• React Transform 可让 React 组件局部自动实时更新（而不是刷新页面）

Demo

使用方法

git clone https://github.com/minooo/webpack-es6-react.git
cd webpack-es6-react 
npm install
npm start
打开 http://localhost:5000/

注意：package.json 的 scripts 中内置了三个命令
start 用于开发模式，方便调试，撸码
build 开发完毕后，就能够打包文件了，固然这个模板足够简单，不能应用于实际生产中，这里只是一个示范。
lint 检测你的js代码是否规范。

package.json 中的部分 包/库 说明

• babel-core babel6 的基础模块

• babel-eslint ESLint 是前端JS代码检测利器。而 babel-eslint 则容许你检测全部的 Babel 代码。

• babel-loader 这个包容许你使用 Babel 和 webpack 转译（Transpiling） JavaScript 文件。

• babel-plugin-react-transform 这个插件经过任意转换的方式去封装 React 组件。换句话说，你能够为所欲为的摆弄你的组件了。

• babel-plugin-transform-runtime 在 Babel 转换过程当中，详细的展现引用的相关辅助工具和内置命令，并自动的聚合填充你的代码而不会污染全局。

• babel-preset-es2015 此预设包含了全部的 es2015 插件。

• babel-preset-react 此预设包含了全部的 React 插件。

• babel-preset-stage-0 此预设包含了 stage 0 中的全部插件。

• eslint JavaScript 语法检测利器：分析出你代码潜在的错误和非标准用法。

• eslint-plugin-react ESLint 中关于 React 语法检测的插件。

• react-transform-hmr 一个 React 转换装置，该装置经过引用 Hot Module Replacement API 使热重载 React 的类成为可能。

• react-transform-catch-errors 呈现你 React 组件的错误信息。

• webpack-dev-server 为 wepack app 提供一个服务器，若是你的代码有任何变化，浏览器将自动刷新显示，极大的方便前期开发。

• babel-runtime Babel 自带的运行环境。

根目录下部分文件说明

• .babelrc : 什么是 .babelrc 文件呢？熟悉 linux 的同窗必定知道，rc 结尾的文件一般表明运行时自动加载的文件，配置等。一样在这里也是有一样做用的。里面的 env 字段，能够对 BABEL_ENV 或 NODE_ENV 指定不一样的环境变量，进行不一样编译。

• eslintignore 通知 eslint 忽略那些不该该被检测的文件。

• eslintrc eslint 配置文件，使 JavaScript 代码规范化，标准化书写。

为何要作这个模板

react 如今已经不能简单的说是一个库了，而是一个生态系统。围绕其出现的新技术层出不穷，而 babel 的出现让咱们提早用上了下一代 javascript——es6， 做为前端的咱们势必要紧随时代潮流。