React + Ant Design 快速上手
2018-03-23 17:32
591 查看
背景及目标
日常开发过程中,经常需要做一些 Web 管理平台供同事或自己使用。作为一个后台开发前台知识不扎实,很难简单快速做出易用的 Web 应用。但是 React 和 Ant Design 的出现使得这种情况有所改善。这篇文章提供了一个路线图,供没有太多前台经验的开发快速上手,做出有一些交互的 Web 管理端。重点集中在以下几点:提供两个学习路径,分别针对「快速上手」和「系统学习」两个场景提供足够优秀的学习资源,覆盖重点内容
提供一种避开其他不必要的复杂性的方法,比如尽量避开前端构建工具
为什么要用 React + Ant Design?
React 的优点:组件化,写一个 UI 组件可以到处用(当然写通用的组件也不容易)单向数据流,组件化的基本条件,使用组件跟函数调用一样简单
Ant Design 的优点:提供了一堆高质量的 UI 组件,应有尽有
使用 React 要求的背景知识
使用 React 主要要求这些背景知识:JavaScript前端构建过程包管理器(Package Manager)
转译器(Transpiler)
构建、打包工具(Bundler)
下面的内容会提供两种学习的途径,一种是「快速上手」,适合简单粗暴地学一点就上手用;另外一种是「系统学习」,适合系统性地了解。
JavaScript
JavaScript 语言有几版:规范 | 时间 | 支持程度 |
---|---|---|
ECMAScript 3 (ES3) | December 1999 | 广泛支持 |
ECMAScript 5 (ES5) | December 2009 | ES5 Compatibility Table |
ECMAScript 6 (ES6) / ECMAScript 2015 (ES2015) | June 2015 | ES6 Compatibility Table |
ECMAScript 7 (ES7) / ECMAScript 2016 (ES2016) | June 2016 | ES.Next Compatibility Table |
系统学习:看 Speaking JavaScript Chapter 1~3
ES6 及以后:快速上手:这些概念,过一遍代码例子,写代码时模仿下别人Arrow Function
Spread Operator, Rest Parameters, Destructuring Assignment
Classes: 注意 JS 的 class 本质上还是基于原型链的 Object 结构演化而来,所以跟 Python / C++ 的 class 很不一样(比如没有类的静态变量)
Modules: 参考我写的
JavaScript Module System.pdf
系统学习:ES6 In Depth Articles
You Don’t Know JavaScript
Modules
包管理器
前端构建过程主要用到的工具都是 Node.js 编写的。因此你需要知道怎样管理 Node.js 包。快速上手:Windows 环境下安装部署 npm 及 Yarn安装 Node.js 及 npm (下载链接)安装 Yarn(下载链接)
命令行运行
npm config set registry https://registry.npm.taobao.org[/code],设置淘宝提供的镜像加速访问 检查HTTP_PROXYHTTPS_PROXY环境变量设了没
掌握这些命令:往当前项目安装一个包:yarn add <package_name>
安装当前项目指定的依赖:yarn installpackage.json和yarn.lock都要提交到 SVN
系统学习:查看 npm 及 Yarn 的文档,理解 Yarn 解决了什么问题转译器
JS 社区标准的转译器叫 Babel,它将高版本的 JS 代码(比如 ES6),转译成低版本的 JS 代码(比如 ES5),以在仍不支持 ES6 的运行环境上(比如老版本的浏览器)运行 JS 代码。快速上手:不用管它,React 的构建工具帮你搞定了
系统学习:看看它的文档构建、打包工具
现在最流行的是 webpack。它很复杂。快速上手:知道import 'file.css'是它的 css-loader 在起作用,并且import进来的 CSS / JS 文件最终会被 webpack 打包成一个大的 CSS / JS 文件
其他的不用管它,React 的构建工具帮你搞定了
系统学习:看看它的文档开发工具
用 JetBrains 家的 WebStorm。学习 React 本身
学习 React 最重要的点在于,理解:JSX
组件化及单向数据流
Virtual Dom
快速上手:学 Fullstack React 前 4 章
通读 官方文档 中的 Quick Start 部分
了解脚手架 create-react-app 的基础用法npm startnpm run build
系统学习:在快速上手的基础上,通读 官方文档 中的 Advanced Guides 部分
学点源码,推荐 SoundRedux
了解 Flux / Redux / MobX 等
深入了解:主流框架间的比较:Comparison with Other Frameworks - Vue.js
和 Vue.js 框架的作者聊聊前端框架开发背后的故事
一些关键的难理解的点:与 Vue.js / Angular 不同,React 没有双向绑定(即 DOM 元素与其数据绑定),而是使用单向数据流。数据往下流通过 props,数据向上浮通过事件
JSX 里面可以嵌套 JS 代码。不要把 JSX 理解成一种模板语言,它就是一种可以转译成 JS 的、用来简化书写的代码学习 Ant Design
用 Ant Design 就跟你之前用 Bootstrap 没什么区别:参考 这里 看看怎样把它加到项目来(很可能我已经帮你加好了)
把它的组件全部 过一遍,大概知道有什么组件可以用
懂它的布局系统(24 列系统)
想想你的场景适合什么组件,去相应的地方拷代码用常见问题和好的实践
JS 写着很不爽啊
JS 太垃圾不方便,但是有个非常好用的 Lodash 库,提供了很多方便的函数,写起来可以很像 Python。如果你也不知道怎么用 Lodash,那么你在 Google 代码例子时,加上 lodash 关键词,比如 “lodash iterate object”。在代码里使用 Lodash:yarn add lodashimport _ from 'lodash'如何找合适的第三方库?
参考 Ant Design 文档中的 社区精选组件,看看有无适合你的库
Google 相关的关键词,看看相应的库 GitHub 星星数等
Awesome React 里找找去哪查文档?
JS, React, Lodash 都不熟,经常要看文档怎么办?DevDocs 上这几个文档都有,Enable 之后将内容下载到离线使用,查阅起来就很方便。
相关文章推荐
- Ant Design of React—第一节
- React 快速上手脚手架 create-react-app
- Ant Design Pro快速入门
- Eclipse快速上手指南之使用Ant
- 开发你的第一个React + Ant Design网页(一、配置+编写主页)
- react Ant Design 日历插件input导致移动设备弹出键盘问题
- dva+react+ant.design
- Ant-design 快速入门
- Ant Design of React—第二节
- React-BootStrap框架快速体验上手
- Eclipse快速上手指南之使用ANT
- Eclipse快速上手指南之使用ANT
- Eclipse快速上手指南之使用ANT
- Ant Design of React—第四节
- Ant Design of React—第五节
- Eclipse快速上手指南之使用ANT(转)
- react入门篇 ant-design
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
- Eclipse快速上手指南之使用Ant
- react-native 结合ant-Design- mobile