前端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 全栈开发模式,相信你看了以后一定会有收获. 您可能感兴趣的相关文 ...
随机推荐
- Apache 的 http-default.conf 详解
##Apache 默认设置文件 Timeout 300 #设置服务器在断定请求失败前等待的秒数.默认值 300 KeepAlive Off #设置是否启用 HTTP 持久链接,On ...
- jquery 对于新插入的节点 的操作绑定(点击事件,each等)
因为最近项目遇到这个问题,下面给大家带来一篇Jquery对新插入的节点 获取并对这个节点绑定事件失效的解决方法.我觉得挺不错的,大家也可以参考一下: 对于绑定事件来讲: 方法一:使用liv ...
- JavaWeb DOM1
一.BOM的概述 browser object modal :浏览器对象模型. 浏览器对象:window对象. Window 对象会在 <body> 或 <frameset> ...
- IDEA创建SpringBoot,并实现、运行简单实例
1.打开IDEA,点击 +Create New Project. 开始创建一个新项目. 2.在左侧菜单找到并点击 Spring Initializr,点击next.注意,这里idea默认使用https ...
- linux运维、架构之路-jumpserver
一.jumpserver介绍 是一款由python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能.基于ssh协议来管理,客户端无需安装agent. 特点: 完全开源,GPL ...
- 判断img的src为空/点击时候两张图片来回替换
if($('.icon-right img').src==null){ $('.span-gray').addClass('c8'); } <img> ///////////// < ...
- [ethereum源码分析](2) ethereum基础知识
前言 上一章我们介绍了如何搭建ethereum的debug环境.为了更深入的了解ethereum,我们需要了解一些ethereum的相关的知识,本章我们将介绍这些知识. ethereum相关知识 在学 ...
- Gradle 学习笔记
配置 Gradle 的环境变量 export GRADLE_HOME=/opt/software/java/gradle-3.1 export PATH=\(PATH:\)GRADLE_HOME/bi ...
- release,debug库互调用,32位,64位程序与库互调用
以下是基于visual studio 2015和cmake的实验 1,debug或release的应用程序都可以调用release的库2,win32和x64的应用和库无法互调用,在VS中链接时会有一堆 ...
- React-Native 之 GD (十三)数据持久化(realm) 及 公共Cell
1.数据持久化 数据持久化是移动端的一个重要部分,刚发现 Realm 原来已经支持 React-Native 了 步骤一: 引入 realm $ npm install realm --save 步骤 ...