《react入门实例教程》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、React 入门实例教程现在最热门的前端框架，毫无疑问是 React 。上周，基于React的 ReactNative 发布，结果一天之内，就获得了5000颗星，受瞩目程度可见一斑。React起源于Facebook的内部项目，因为该公司对市场上所有 JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使

2、用，认为它可能是将来Web开发的主流工具。这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的WebApp解决方案。衍生的ReactNative项目，目标更是宏伟，希望用写WebApp的方式去写NativeApp。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次UI，就能同时运行在服务器、浏览器和手机（参见《也许，DOM不是答案》）。既然React这么热门，看上去充满希望，当然应该好好学一下。从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项

3、目。但是，好的React教程却不容易找到，这一方面因为这项技术太新，刚刚开始走红，大家都没有经验，还在摸索之中；另一方面因为React本身还在不断变动，API一直在调整，至今没发布1.0版。我学习React时，就很苦恼。有的教程讨论一些细节问题，对入门没帮助；有的教程写得不错，但比较短，无助于看清全貌。我断断续续学了几个月，看过二十几篇教程，在这个过程中，将对自己有帮助的Demo都收集下来，做成了一个库 ReactDemos 。下面，我就根据这个库，写一篇全面又易懂的React入门教程。你只需要跟着每一个Dem

4、o做一遍，就能初步掌握React。当然，前提是你必须拥有基本JavaScript和DOM知识，但是你读完就会发现，React所要求的预备知识真的很少。零、安装React的安装包，可以到官网下载。不过，ReactDemos 已经自带React源码，不用另外安装，只需把这个库拷贝到你的硬盘就行了。$gitclonegit@github.com:ruanyf/react-demos.git如果你没安装git，那就直接下载 zip压缩包。下面要讲解的10个例子在各个Demo子目录，每个目录都有一个index.html文

5、件，在浏览器打开这个文件（大多数情况下双击即可），就能立刻看到效果。需要说明的是，React可以在浏览器运行，也可以在服务器运行，但是本教程只涉及浏览器。一方面是为了尽量保持简单，另一方面React的语法是一致的，服务器的用法与浏览器差别不大。Demo11 是服务器首屏渲染的例子，有兴趣的朋友可以自己去看源码。一、HTML模板使用React的网页源码，结构大致如下。

6、rc="../build/JSXTransformer.js">