react.js 本是一个构建用户界面的javascript库,它因单向数据绑定和虚拟DOM两大特点在前端界大放异彩,因为它解决了当下网页性能陷入的瓶颈(因为直接操作DOM导致页面性能损失很大,而虚拟DOM避免了直接操作DOM),再加上单向数据绑定使得业务逻辑更加清晰可控,另外,react.js 是大名鼎鼎的Facebook一手打造维护,基于此,react社区也异常活跃,从而良性的推动了react的发展和流行,而React现在已经发展为一个生态圈。

用阮一峰老师的话说就是:**React已不是一个库,也不是一个框架,而是一个庞大的体系。想要发挥它的威力,整个技术栈都要配合它改造。你要学习一整套解决方案,从后端到前端,都是全新的做法。**时至今日,围绕以React为核心的技术栈也日益成型,它主要包含:

• React,
• npm
• js打包工具(如:webpack)
• ES6
• Routing
• Redux

你不需要把这些都学完才去使用 React. 只需要在你遇到问题需要解决的时候, 才进入相关的学习。

学习React生态圈是一个综合应用React技术栈的过程,这也是最接近我们实际开发运用React的情境,为此,笔者特地根据以往React开发经验,精心制作了React-Study系列React技术栈学习模板,以实际项目开发情境为目标,从最简单的hello,world开始,通过逐步升级配置,来学习React生态圈并最终应用到公司项目中。

React-Study 系列模板主要包含四部分

• step-01(已完成) 这部分就是基础的hello,world模板,前面说了,这系列模板是以实际项目开发情境为目标而构建的,虽说是 hello,world的示例,但是它综合应用了 React+webpack+es2015+npm ,并且分为开发模式(开启了热替换和sourcemap)和产品模式(也就是打包,开启了代码压缩等优化)
• step-02(已完成) step-02 是在 step-01的基础上添加额外配置完成的,这一部分添加了 样式,字形,图片,等加载器配置。并初步展示了在项目实践中,React技术栈的一个合理的目录结构应该是怎样的。由于应用了CSSModules以及相关的辅助插件,CSS的语法更加便利简洁,这些在项目的组件样式中都有体现。同时,也展示了在ES6下,React组件相关写法,以及标准语法的规范的推荐。总之,React带你走进组件化的美好
• step-03(目前开发中) step-03 是在 step-02 的基础上添加额外配置完成,目前处于开发中,这部分主要添加 react-router。推荐教程 React Router 使用教程
• step-04(计划中) 同理,step-04 是在 step-03 的基础上添加额外配置完成,目前仍处于开发中,这部分主要添加 redux。推荐教程 redux-tutorial 使用教程

本项目启动前默认你已经安装node(建议安装6.0+版本)

git clone https://github.com/minooo/React-Study.git

cd step-01

npm install

npm start

如果你在学习本项目遇到问题,请加群交流: 419922267

MIT