首页React

react 入门方法指南

hfpp2012发布于1673 次阅读

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. 总结

我画了一张流程图,如下:

参考资料

本篇完结。

本站文章均为原创内容,如需转载请注明出处,谢谢。

4 条回复
  • DanceSmile #1

    createReadStream到response 就不需要response.end() 么?

  • hfpp2012 #2
    DanceSmile #10 回复

    可以不用,有些方法可能会自带 end 的特性,那样,可以这样简单理解

  • Ankkaya #3

    lz我按照你的代码写的,运行一直报错 Unknown encoding: uft8,请问怎么回事

  • zhiyoo #4
    Ankkaya #10 回复

    uft8 -> utf8

喜欢
友情提示
   官方 QQ 1 群 697272886(500/2000)
   官方 QQ 2 群 856141852

© Rails365 | 隐私条款 | 服务条款 | 友情链接:轻课堂 | 粤ICP备15004902号 | 在线学员:15

Top