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

本篇完结。