每个软件都是基于一个技术栈来实现的，因此如果想要创建你自己的应用，你就必须充分理解自己的技术栈。React的生态看上去很复杂的原因便是人们通常没有按照正确的顺序来去学习。

你需要按照下面的顺序一步一步地学习，不要跳着学或者同时学习多个内容，否则你会感到非常混乱。

基本内容：

1、React

2、npm

3、JavaScript 打包工具

4、ES6

5、路由

6、Flux

7、Redux

不是要把这些内容全部学完你才能开始使用React，你完全可以先学一步并着手做一点东西，当你发现这一步的知识不足以解决你现在遇到的问题时你再开始下一步的学习。

学习React

开始学习React并不需要大量的准备工作。在官网的文档里你可以发现一个可以直接复制的HTML模板，将它粘贴到你的本地html文件中就可以开始学习啦。在这一步你不要去管什么工具，你只需要理解React的基础知识就好，当你熟悉了基础知识之后再去学习各种工具的用法。

学习npm

npm是Node.js的包管理工具，也是目前前端开发者和设计师们共享代码的最热门的工具。它集成了一个模块系统CommonJS，可以让开发者安装一些命令行工具。

学习JavaScript打包工具

出于一些技术的原因，浏览器并不原生支持CommonJS模块。你需要一个JavaScript打包工具来将这些模块打包成一个.js文件，在网页中引入这个打包后的文件就可以在浏览器中运行了, 典型的打包工具有Webpack和最近新鲜出炉的vite,有一个误区需要避免：CommonJS利用require()方法来加载模块，因此很多人会下意识地认为他们需要一个require.js来完成这项工作。事实上由于一些技术上的问题我并不推荐你使用require.js，更何况不引入这个库你也可以使用require()方法。

学习ES6

除了JSX（你在React基础部分会学到）以外，你会在React的示例中看到一些陌生的符号。它们便是ES6（ECMAScript第6版，JavaScript最新的语法标准）的新语法，在你学习基础JavaScript的时候不曾遇到过。由于它太新了（2015年颁布），因此还没有得到很好地浏览器支持，但是你的打包工具可以在打包的同时将ES6转成ES5的语法以获得更好的浏览器支持。

当然，使用React不代表一定要使用ES6，你大可以跳过ES6，将重点放在React本身。但是ES6的一些概念解决了很多以往JavaScript的语法问题，建议不打算学习ES6的朋友有精力的时候也了解一下。

强调一点：有些人会推荐你用ES6中新的类来定义React组件，而我建议你不要这么做。事实上多数人（包括Facebook的开发者）在创建React组件时使用的是React.createClass()方法。

学习路由

单页应用是当今的主流。单页的应用只加载一次网页，当用户点击链接或按钮的时候，JavaScript代码会更新页面的内容和地址栏内容，但是网页并没有刷新。地址栏的管理器就被称为路由。React的生态中最受欢迎的且最好用的路由是react-router，创建单页应用的朋友一定要尝试一下。

学习Flux

你可能听说过Flux，而且很多关于Flux的误解你可能也听说过。

很多人在创建应用的使用需要定义一个数据模型，然后他们认为他们需要Flux来实现它。 这不是Flux的正确使用方法 。Flux应该在很多组件加载之后加载。

React组件通常会构成一个层级结构。多数情况下，你项目的数据模型也需要构成一个层级结构。这时Flux并不适合你的项目。然而有时候你的数据模型并没有构成层级关系。当你的React组件开始接收无关联的props值，或者你的一些组件开始变得非常复杂的时候，你可能才需要使用Flux。

你会清楚你什么时候需要Flux的。如果你不确定你是否需要使用它，那就不要用。

如果你确定需要使用Flux的话，那么我建议你使用目前最受欢迎且文档齐全的Flux库——Redux。当然Flux的框架不止这一个，但是我建议大家去用最热门的那一个。

以上便是React技术栈中的基础部分，大部分开发者了解到这一步就可以了。