前端003/【React + Mobx + NornJ】开发模式
1。React + Mobx + NornJ 开发模式快速上手教程
2。项目开发环境
(一)。脚手架基于【ES6+Babel】环境,并使用【webpack】进行打包。
【1】ES6:JS语法堂 【ES2015】
新版本JS提供了`class`、`解构赋值`、`模块系统`、`for of循环`、`异步操作API Promise`等等,可显著提升开发效率及代码规范性
【2】Babel:JS代码编译器
【3】webpack:前端模块打包工具,可配合Babel转换ES6代码,对前端各种主流框架均有支持。
常用学习网址:
(二)。脚手架应用的技术与框架列表
【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:是流行的字体图标库
其他学习网址:
内置扩展标签:https://joe-sky.github.io/nornj-guide/templateSyntax/built-inExtensionTag.html
(三)。常用工具
【1】。Moment.js:是非常流行的处理日期时间操作库
官方文档:http://momentjs.com/
【2】。storejs:可以用来处理本地存储localstorage操作
【3】。js-cookie:可以用来处理各种cookie操作
【4】。query-string:可以用来处理url参数操作
未完待续。。。
前端003/【React + Mobx + NornJ】开发模式的更多相关文章
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- 前端004/React常用UI组件
每天进步一点点〜 Ant Design of React //蚂蚁金服设计平台.需要应用何种类型组件可参考API React + mobx + nornj 开发模式文件说明: [1].A.t.html ...
- 前端框架React Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- 大前端快闪二:react开发模式 一键启动多个服务
最近全权负责了一个前后端分离的web项目,前端使用create-react-app, 后端使用golang做的api服务. npx create-react-app my-app cd my-app ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- 认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具
认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具 一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...
- React jQuery公用组件开发模式及实现
目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...
- 前端文摘:Web 开发模式演变历史和趋势
今天的<前端文摘>给大家分享一篇玉伯的文章.文章详细介绍了 Web 开发的四种常用模式以及未来可能成为流行趋势的 Node 全栈开发模式,相信你看了以后一定会有收获. 您可能感兴趣的相关文 ...
随机推荐
- listalias - 列出用户和系统别名
总揽 listalias [ -s | -u ] [ 正则表达式] 描述 Listalias 按用户及系统别名每个输出一行.每行具有下列格式: <别名> <地址> (<注 ...
- VB中RaiseEvent语句的功能及用法
Creat a new class named Class1, it's codes like this: Public Event MyEvent() Public Sub RaiseTheEven ...
- django + celery的队列,路由与弹性
#celery_app.py #!/usr/bin/env python # -*- coding: utf-8 -*- from __future__ import absolute_import ...
- Linux日常之显示文件总结
1. 将文件file1.file2的内容都显示出来,并显示行号 cat -n file1 file2 2. 将文件file1.file2中带有字符'h'的行显示出来 cat -n file1 file ...
- ubuntu16.04下docker安装和简单使用(转)
ubuntu16.04下docker安装和简单使用 转自:https://www.cnblogs.com/hupeng1234/p/9773770.html 前提条件 操作系统 docker-ce ...
- C#基础知识之dnSpy反编译
dnSpy工具可以在网上自行下载 软件界面如下: 现在进入话题,首先编写一个Hello World的控制台运行程序,如下图所示: 代码如下: using System; using System.Co ...
- 使用navcat进行筛选和排序
- css3-background clip 和background origin
1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...
- JavaWeb DOM1
一.BOM的概述 browser object modal :浏览器对象模型. 浏览器对象:window对象. Window 对象会在 <body> 或 <frameset> ...
- 【NOIP2016提高组A组7.16】大鱼海棠
题目 椿是掌管海棠花的少女,她所在的世界不为人们所知,他们的天空就是人类的海底.生活在那个世界里的他们不是人,也不是鱼,而是其他人,掌管着人间的规律. 按照他们的习俗,在16岁那年,椿变为一条海豚到人 ...