前端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 學習筆記

            http://www.javashuo.com/article/p-motemmxv-hk.html

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

 

未完待續。。。