
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. 总结
我画了一张流程图,如下:
参考资料
本篇完结。
本站文章均为原创内容,如需转载请注明出处,谢谢。
© Rails365 | 隐私条款 | 服务条款 | 粤ICP备15004902号 | 在线学员:28
Top