这是学习任何一门技术的坚实基础，不仅仅是React

原文链接：Before dive into React
作者：Henrique Alves — @healves82
翻译：johannlai

学习React之前你应该知道的事

我曾经帮助过几个朋友开始使用React，但是仅仅是在基本功能的层面。他们之前都没有任何前端开发的经验。
如果你已经是一个前端工程师，那么，你应该浏览下面这个网站 《作为一名前端工程师2017年应该学习什么？》

正确地提问

如何正确地提问，什么时候提问，还有不应该问什么问题，对于新手学习都是非常重要的。
举个栗子，假设你现在不知道如何管理状态（state），然后你会去Google React state management，你可以很容易地搜索到一些关于store和redux的文章，然后使到你头晕脑胀，不知所云。

然后，和他们（新手）交谈过程中中，我会告诉他:

“停止去搜索，然后去阅读关于一切关于react的内容”

互联网上面充斥着各种杂乱和过时的信息。这些都很容易在错误的地方被终结。例如有些教程会告诉你如何使用Webpack。当然在这里并没有毛病，但是，对于正在搜索state的你，现在并不需要这条搜索结果。

“这里没有捷径，请夯实基础”

有一些问题根本和React无关。他们是经典的JavaScript问题。如果走的捷径，没而没有夯实基础，在开始的时候，你可能并不会发现有什么不妥。但是在个人发展到中期甚至长期的时候，他们将是你的绊脚石，你知道这样写可以实现，但是你不知道为什么会这样。

“不不不，学习React并不需要Redux，React Router， CSS Modules，Webpack， 或者其他东西”

说到这里，我已经要求他们停止目前手头上的正在做的事情，回归基础。

开始去熟悉

如果你没有前端开发经验，那么你应该从基础学起，当你熟悉了前端的基础以后，你才能找到你需要学习的方向。

“多关注关键的概念，而不是细节”

Mozilla开发者网站（MDN，是一个很好的开始学习基础的网站，我平时主要使用它来检索一些关于HTML，CSS，或者JavaScript的文档。

网站和浏览器

• HTTP 请求
• 浏览器渲染 ——the pixel pipeline graph

CSS

• CSS命名规范 例如BEM，Suit
• 使用flexbox布局
• 好的练手例子

JavaScript

• 什么是JavaScript
• JavaScript基础
• Airbnb JavaScript Style Guide () {
• ES6/ES2015

Bundlers

• 什么是JavaScript bundlers work
• Webpack, Browserfy and Rollup

工具

• Babel
• npm , yarn
• Chrome DevTools
• 熟悉基础终端的操作 ls, cp, mv, mkdir, etc
• 检查iTerm 和Hyper终端
• 使用 JS Bin, WebpackBin or CodePen 构建快速原型
• Atom, Code, Sublime Text

Git and GitHub

• 理解git工作流
• 在Github上面创建仓库(repo)
• 什么是pull requests
• 用git clone从Github上面克隆一个项目到你的终端（terminal）
• Pull, commit and push 你做的更改

组件设计

• 设计系统
• atomic-web-design
• 内容和显示模式
• Thinking in React

"不要被这个列表吓倒"

“阅读，实践，失败，重来。继续做直到你弄懂为止”

这是学习任何一门技术的坚实基础，不仅仅是React