react 入门方法指南

1. 介绍

react 是目前最流行的前端框架之一了。以前的项目也用过 react，但只是初步用用，还没深入的研究它，最近需要把它重拾起来，并进行研究。

故把它的入门方法总结出来，给初学者一个方向，还有也指出它进阶的方向和方法。

2. 简单的概念

首先在用之前，你可能早就听过 react 的大名，也可能听过它的技术名词等，比如什么虚拟 DOM，什么 JXT 等。

我们先不管这些。

先把它用起来再说。

它是一套前端的 JS 框架，这样的框架有好多，比如 backbone，angular 等。

你可能也知道后端是有 mvc 框架的。

然而前端也有这个概念。

比如 backbone 就是一个 mv 框架，它没有 c。

而 react 就是 v 框架，即 view(视图)。

这都先不管，只是提一下，可能前端更侧重于 view 层，也可能 react 不想增加复杂性。

3. 实战起来

首先要学习 react。

我建立先从一篇文章读起。

推荐React 入门实例教程这篇文章。

这篇文章里面介绍了十几个 demo，都有相应的代码，放在github上。

根据每个 demo，去理解 react。

通过代码从浅到深去理解 react，才是比较实际的方法，不然你看太多概念型的文章也对你实际帮助不大，先用起来，再慢慢理解，慢慢悟，技术才会更加深。

比如第一个 demo。

<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<div id="example"></div>
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

首先需要引用三个 js 文件。

至于他们的作用，我引用阮一峰的话：

react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

敲完之后，你会了解到 JSX 语法的知识。

比如说以<开头的是用 html 规则来解析，以{开头的语句是用 javascript 规则来读。

还有组件的概念以及如何使用props这个属性等等

值得注意的是，需要重点了解的是 JSX 的语法，要去习惯它，并且还要领悟 react 能做的事情

我们来接着下一步。

4. 官方的 demo

看完上面的 demo 是远远不够的，因为那只是 react 其中的一部分知识，不能代表 react 的所有一切。

这个时候就得看看官方的文档了。它比较全。

官方文档有一个发布评论的实战 demo，它包括前端与后端的交互，学完之后，相似对整个 react 的认识会更深一些。

除此之外，官方文档，还有很多 api 的知识，还有很多概念性的知识，比如 props 的传递，受限组件，不受限组件的概念，学完之后可以对 react 的了解可以到一个全面的对步，还能避免踩到好多坑。

这个官方文档是要随时查阅的。也未必需要记住，但是要懂得查，知道有哪些知识点，知道出了问题如何快速地找出问题的答案即可。

5. 视频和文章

对 react 有全面的了解之后，我们在开始实战自己的项目之前，可以去了解一下它相关的视频和文章。

比如上视频网站上搜索相关的 react 视频，通过观看视频，学习别人是如何使用 react 的。

还有，可以上网搜索相关的文章来了解 react 的特性，比如虚拟 DOM，为什么会出现 react 这门技术，等等。

6. 其他

学习完视频和文章之后，就可以开始实战，先用起来吧。

你可以找一些快速搭建 react 的 demo，或者用 yeoman 工具生成一个 react 项目，或者干脆去 clone 别人的项目。

反正就是用起来。

中间肯定会遇到各种问题的。

之后，你可以去 github 上搜索 react 相关的插件来学习。

用这些插件，第一，它可能是比较优秀的代码，第二，避免重复造轮子。

这样能加速你的生产效率。

最后，可能就是部署。react 可以和很多工具结合，比如 webpack 等。

把他们结合在一起，组成一个完整的项目。

7. 总结

我画了一张流程图，如下：

参考资料

• React 入门实例教程
• 教程 | React
• Complementary-Tools
• Examples
• 如何学习 React

本篇完结。