前端003/【React + Mobx + NornJ】开发模式

1。React + Mobx + NornJ 开发模式快速上手教程

　　

　　github网址：https://github.com/joe-sky/nornj-cli/blob/master/docs/guides/overview.md

 

2。项目开发环境

（一）。脚手架基于【ES6+Babel】环境，并使用【webpack】进行打包。

【1】ES6：JS语法堂 【ES2015】

      新版本JS提供了`class`、`解构赋值`、`模块系统`、`for of循环`、`异步操作API Promise`等等，可显著提升开发效率及代码规范性

【2】Babel：JS代码编译器

【3】webpack：前端模块打包工具，可配合Babel转换ES6代码，对前端各种主流框架均有支持。

常用学习网址：

A。ECMAScript 6 入门

           http://es6.ruanyifeng.com/

B。ES6 学习笔记

           https://segmentfault.com/a/1190000002904199

C。全面解析ECMAScript 6模块系统

　　　　http://www.csdn.net/article/2015-04-30/2824595-Modules-in-ES6

D。大白话讲解Promise 【Promise是ES6的重要特性之一，它是一个构造函数】

　　　　http://www.cnblogs.com/lvdabao/p/es6-promise-1.html

E。深入理解fetch 【向服务端发送请求 《=》 XMLHttpRequest(XHR) | JQuery实现的Ajax】

　　　　http://www.jianshu.com/p/35123b048e5e

F。Babel 中文文档 【js代码编译器，Babel通过语法转换器支持最新版本Javascript】

　　　　https://babeljs.cn/

G。Webpack 中文文档

　　　　https://doc.webpack-china.org/concepts/

H。入门Webpack，看这篇就够了

　　　　http://www.jianshu.com/p/42e11515c10f

I。Webpack3.X版 成神之路

　　　　http://jspang.com/2017/09/16/webpack3-2/

 

（二）。脚手架应用的技术与框架列表

【1】。React :是当前最流行的前端组件化框架之一

学习网址：

A。React 中文文档
　　https://doc.react-china.org/
B。React 官方文档
　　https://facebook.github.io/react/
C。React 中文论坛
　　http://react-china.org/
D。React 入门实例教程
　　http://www.ruanyifeng.com/blog/2015/03/react.html
E。React Router 使用教程
　　http://www.ruanyifeng.com/blog/2016/05/react_router.html
F。React 技术栈系列教程
　　http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html

【2】。Mobx：是一个可提供响应式编程的状态管理库 （React & Mobx是一个强力组合）

学习网址：

A。MobX 中文文档
    http://cn.mobx.js.org/
B。10分钟极速入门 MobX 与 React
    http://www.tuicool.com/articles/yYnmi26
C。我为什么从Redux迁移到了Mobx
    https://tech.youzan.com/mobx_vs_redux/
D。Mobx-state-tree github文档
    https://github.com/mobxjs/mobx-state-tree
E。Mobx-state-tree github文档(v0.9.5)
    https://github.com/mobxjs/mobx-state-tree/tree/0.9.5

【3】。NornJ：可同时支持渲染字符串和‘React’组件的前端模版引擎。

          可覆盖很多`JSX`做不到的使用场景，也可配合`JSX`使用.

A。github地址：
　　https://github.com/joe-sky/nornj
B。NornJ中文指南
　　https://joe-sky.gitbooks.io/nornj-guide

【4】。CSS Modules：是一种可以提供局部css样式的解决方案

CSS Modules 用法教程
http://www.ruanyifeng.com/blog/2016/06/css_modules.html

【5】。Ant design：是蚂蚁金服开发的基于`React`的开源ui组件库，

　　    提供了几十个可直接使用的高质量组件

Ant Design 官方文档
https://ant.design/docs/react/introduce-cn

【6】。Echarts：是百度开发的前端图表库

Echarts 官方文档
http://echarts.baidu.com/index.html

【7】。FlareJ：是一个基于`React`和`NornJ`的UI组件库，包含一些易于配合`NornJ`使用的常用组件。

github文档 ： https://github.com/joe-sky/flarej

【8】。Front Awesome：是流行的字体图标库

官方文档：http://fontawesome.io/icons/

 

其他学习网址：

内置扩展标签：https://joe-sky.github.io/nornj-guide/templateSyntax/built-inExtensionTag.html

（三）。常用工具

【1】。Moment.js：是非常流行的处理日期时间操作库

　　　 官方文档：http://momentjs.com/

【2】。storejs：可以用来处理本地存储localstorage操作

github文档：https://github.com/jaywcjlove/store.js

【3】。js-cookie：可以用来处理各种cookie操作

github文档：https://github.com/js-cookie/js-cookie

【4】。query-string：可以用来处理url参数操作

github文档：https://github.com/sindresorhus/query-string

 

未完待续。。。