前端学习指南 - 广度 + 深度的探索

2017-02-24 2,269 阅读2分钟

原文链接： github.com

学习曲线遵循

`JavaScript (ES5/6)` => `React` => `React Native`
         |           |                      |
        `FP`          ==> `Flux/Redux`  ==> |
                                            |
                                            |
`HTML` => `HTML5`   ===>  `Mental Model`  <===
                     |           |
                     |           |
                     |        `Design` ===> `Art` ===> ...
                     |
`CSS` => `CSS3` => `LESS`

本文重在 “术”，要想继续学习，在前端领域有更深的思考，请移步 “道” —— 本文的进阶篇，有一些技术背后的原理阐述、架构思考、编程方法论等。

概览

How it feels to learn JavaScript in 2016

中文版 => 在 2016 年学 JavaScript 是一种什么样的体验？

开发工具

WebStorm
Atom
Chrome

一些常用工具的使用方法可参考 toolkit

版本控制 Git

git - 简明指南

参考：

编码规范 JavaScript

Airbnb JavaScript Style Guide

参考：

JavaScript

React

React 参考：

React Components

React Native

React Native 官网

React Native 参考：

React Native Components

Ant Design Mobile

Flux

参考：

Redux

参考：

技术栈

React 技术栈系列教程

测试

基于 React + Redux 的组件测试

前端单元测试探索

测试框架 Mocha 实例教程

使用 Mocha + Chai + Sinon 测试 React + Redux 的 web 应用

React 测试入门教程

Web

HTML

CSS

学习CSS布局

Flex 布局教程：语法篇

CSS 编码规范

LESS

LESS 一种动态样式语言

Color

TypeScript

TypeScript 官网

参考：

Design

Material Design