---

引言

Web前端

本文讨论的前端仅代表Web前端

---

前端三座大山

前端基础无非就是HTML、CSS、JavaScript，但凡是程序员，说对此不了解几乎是不可能的，这样想想，看来我们都具备成为前端程序员的潜质（偷笑）。

---

后端中的前端

Web开发中，难道后端程序员就不会接触前端内容了吗，当然不是！Web后端中有个叫做模板引擎的技术 —— 即在服务端将数据渲染到HTML页面的技术，该技术是Web后端程序员的基本技能之一。

例如：Java中的JSP、Thymleaf、FreeMarker；Python中的Mako、JinJia2等。该技术要求后端程序员首先就要掌握HTML、CSS、JavaScript，然后结合其它特有的标签和语法来工作。

---

障碍

对于后端程序员，想要突破到前端的最大障碍就是布局Layout，毕竟不是专职做前端的，而且很多公司，即使前后端尚未分离（使用模板引擎），也要由专职前端先切好Html页面，再由后端改造成模板引擎需要的形式，步骤很繁琐，事倍功半，也因此导致后端程序员很少能对布局Layout或者说CSS进行系统的学习。

依赖于模棱两可的知识体系，最终导致大部分后端程序员不愿意去写页面，不是因为不懂前端基础，而是因为大部分时间都可能浪费在布局Layout上。

---

为什么学习前端？

当然，这里我们所谓“学习”是指“系统的去学习”。原因有三：

• 避免有求于人，比如说自己突然有了个好的Idea，正要去实现它，想到要浪费大量时间去搞布局，还不如去啃中间件源码；或者想要构建自己的博客，苦于布局，最终还是入坑到现成的静态博客构建工具。
• 大前端来了，前端更像后端，Node.js来了，ES6来了，前端有了自己的打包工具Webpack，有了自己的包管理工具npm\yarn，有了成熟的JavaScript框架react、vue、angular，有了脚手架，有了class、import、export和Lamda（箭头表达式）。前端的生态更像后端了，所以学习起来可以更加系统，不再那么违和，更容易上手。
• 提高价值，Web开发——中间件——大数据——机器学习，这好像更像是后端的进击路线，但是学习前端与它们相比，门槛和所需时间都不值一提，与其每次都为它所累，不如随便拿点时间把它干掉，一劳永逸。

---

为什么要学习React？

其特点就不再赘述，至少生态圈和用户数量表现给我们的是，Angular将死，React与Vue同台竞技——《React还是Vue：你该如何选择？》

至于笔者为什么要学习React？

• 身为后端，我受够了模板（有人也因此更喜欢Vue），而Vue恰好是这样做的，相比React中只需要熟悉JavaScript ES6+Html的JSX写法，Vue需要你重新学习更多的HTML扩展，类似于下面的v-on:click：

  <button v-on:click="reverseMessage">Reverse Message</button>

• React-Native，为了以后能辅助开发原生APP，自然像React这种同时适用于Web端和原生APP的框架，成为了最佳选择

---

正文

笔者是一个文档控，但凡有详尽的官方文档，都会对它忠贞不渝，不得不说在学会使用《Google翻译》之前，真的是学了不少专业单词啊，，，给出两个依赖官方文档的原因：

• 权威性，官方文档不像技术博客，不掺杂主观见解；
• 实时性，尤其像React这种不断更新的技术，官方教程以外的个人教程，很快就过时了，因为其中有些技术可能已经被遗弃或替代，所以不建议观看个人教程，例如：阮一峰阮老师的《React 入门实例教程》（其实刚开始我也看过，，前车之鉴）

为了更加方便读者学习，在以下路线中，同样会给出贴近官方文档的中文文档或博客，其实它们也大多数是学习官方文档后，翻译或总结得到！！

1. CSS布局

最初Html页面的布局由Float、Position来实现，再后来出现了display:table表格布局，但是表格布局存在性能问题，直到现在我们拥有了两种更加方便高效的布局方式，我们可以根据兼容性和页面复杂程度来选择：
Flex布局：

• 官方：https://developer.mozilla.org/en-US/docs/Glossary/Flex
• 中文：http://www.runoob.com/w3cnote/flex-grammar.html

Grid布局：

• 官方：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• 中文：https://www.jianshu.com/p/d183265a8dad

2. JavaScript ES6

React中JSX语法无非就是HTML+JavaScript杂在一起写，而ES6是JavaScript的新标准，从很早开始React中的JavaScript就已经开始向ES6靠拢，直到现在（v16.6.3）已经完全有ES6来写。

• 官方：https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
• 中文：http://www.runoob.com/js/js-tutorial.html
• 公开课：https://www.imooc.com/learn/955

3. Npm/Yarn

包管理工具。就像Java中Maven、Gradle，Python里的Pip、Conda，可以直接从仓库中下载公共的代码，避免重复造轮子，是大前端时代的必备工具。

Yarn笔者没用过，不做赘述，Npm是Node环境下的包管理工具，安装了Node环境就安装了Npm，使用时要注意版本问题，不定时更新就好

• 官方：https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
• 镜像：https://npm.taobao.org/

4. 脚手架

所谓脚手架，顾名思义就是一个架子，可以直接拿来用。在没有脚手架前，大前端项目就需要我们自己去建立文件结构，集成某些必要工具，创建必要配置文件，这些都是重复性的但又必不可少的步骤，就像我们在IDE中新建Android项目，新建SpringBoot项目，这里可以理解成新建React项目。

Web端（PC或手机）脚手架—— Create-React-App：

• Github：https://github.com/facebook/create-react-app
• 官方文档：https://facebook.github.io/create-react-app/docs/getting-started

React-Native（原生APP）脚手架—— Expo

• 官方：https://expo.io/learn

5. React教程

• 官方教程：https://reactjs.org/tutorial/tutorial.html

• 官方主要概念：https://reactjs.org/docs/hello-world.html

• 官方高级指导：https://reactjs.org/docs/context.html

• 中文教程：https://react.docschina.org/tutorial/tutorial.html

• 中文主要概念：https://react.docschina.org/docs/hello-world.html

• 中文高级指导：https://react.docschina.org/docs/jsx-in-depth.html

• 公开课：https://www.imooc.com/learn/1045

6. Redux

随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。考虑一些来自前端开发领域的新需求，如更新调优、服务端渲染、Websocket长连接、路由跳转前请求数据等等。前端开发者正在经受前所未有的复杂性，难道就这么放弃了吗？当然不是，我们可以使用Redux来解决。

• 官方：https://redux.js.org/
• 中文：https://www.redux.org.cn/
• 阮一峰教程（很适合入门）：
  • 基本用法：
    http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
  • 中间件与异步操作 ： http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html
  • React-Redux 的用法：
    http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

7. React-Redux

为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux。

• 官方：https://react-redux.js.org/docs/introduction/quick-start
• 中文：
  • http://cn.redux.js.org/docs/basics/UsageWithReact.html
  • https://www.redux.org.cn/docs/react-redux/

8. React-Router

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。如果不知道什么是路由？可以谷歌

• 中文：
  • https://www.redux.org.cn/docs/advanced/UsageWithReactRouter.html
  • http://react-guide.github.io/react-router-cn/docs/Introduction.html
• 官方：https://reacttraining.com/react-router/web/api/Route
• GitHub：https://github.com/ReactTraining/react-router

9. Promise

Promise对象表示异步操作的最终完成（或失败）及其结果值。

在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现，但是写法显得冗杂，所以引入了Promise —— 古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。

• 官方：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• 中文：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000

10. Fetch API

Fetch API提供了一个用于获取资源的接口（包括整个网络）。 对于使用过XMLHttpRequest的人来说，这似乎很熟悉，但新API提供了更强大，更灵活的功能集。不同于$.Ajax()、Axios，Fetch是HTML5的API，是标准，是未来的趋势。

• 官方：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
• 中文：https://reactnative.cn/docs/network/

11. React-Native

React Native是一个使用Javascript构建移动端原生应用程序（iOS，Android）的库。 它与React.js相同，只是不使用Web组件，而是使用原生组件。 如果你学过React.js，很快就能上手React Native，反之亦然。到这里我们已经基本掌握了React生态，所以可以很容易入坑React-Native了

• 官方：https://facebook.github.io/react-native/docs/getting-started
• 中文：https://reactnative.cn/docs/getting-started/

12. Webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。脚手架已经为我们集成并配置了Webpack，但为了某些高级特性，我们仍然有必要深入了解下Webpack。

• 什么是Webpack？
  WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
• 为什要使用WebPack？
  今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
  • a: 模块化，让我们可以把复杂的程序细化为小的文件;
  • b: 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能转化为JavaScript文件使浏览器可以识别；
  • c: scss，less等CSS预处理器…

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别，而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

• 官方：https://webpack.js.org/concepts/
• 中文：https://webpack.docschina.org/concepts/
• 公开课：https://www.imooc.com/learn/802