文档介绍：React 入门实例教程现在最热门的前端框架,毫无疑问是 React 。上周,基于 React 的React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在 2013 年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App 。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI,就能同时运行在服务器、浏览器和手机(参见《也许, DOM 不是答案》)。既然 React 这么热门,看上去充满希望,当然应该好好学一下。从技术角度, 可以满足好奇心,提高技术水平;从职业角度,有利于求职和晋升,有利于参与潜力大的项目。但是,好的 React 教程却不容易找到,这一方面因为这项技术太新,刚刚开始走红,大家都没有经验,还在摸索之中;另一方面因为 React 本身还在不断变动, API 一直在调整,至今没发布版。我学****React 时,就很苦恼。有的教程讨论一些细节问题,对入门没帮助;有的教程写得不错,但比较短,无助于看清全貌。我断断续续学了几个月,看过二十几篇教程,在这个过程中,将对自己有帮助的 Demo 都收集下来,做成了一个库React Demos 。下面,我就根据这个库,写一篇全面又易懂的 React 入门教程。你只需要跟着每一个 Demo 做一遍,就能初步掌握 React 。当然,前提是你必须拥有基本 JavaScript 和DOM 知识,但是你读完就会发现,React 所要求的预备知识真的很少。零、安装 React 的安装包,可以到官网下载。不过,React Demos 已经自带 React 源码, 不用另外安装,只需把这个库拷贝到你的硬盘就行了。$git clone git@:ruanyf/react- 如果你没安装 git ,那就直接下载 zip 压缩包。下面要讲解的 10个例子在各个 Demo 子目录,每个目录都有一个文件,在浏览器打开这个文件(大多数情况下双击即可),就能立刻看到效果。需要说明的是,React 可以在浏览器运行,也可以在服务器运行,但是本教程只涉及浏览器。一方面是为了尽量保持简单,另一方面 React 的语法是一致的, 服务器的用法与浏览器差别不大。 Demo11 是服务器首屏渲染的例子,有兴趣的朋友可以自己去看源码。一、 HTML 模板使用 React 的网页源码,结构大致如下。<!DOCTYPE html> <html> <head> <script src="../build/"></script> <script src="../build/"></script> </head> <body> <div id="example"></div> <script type="text/jsx"> //**Our code goes here! ** </script> </body> </html> 上面代码有两个地方需要注意。首先,最后一个 script 标签的 type 属性为 text/jsx 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/jsx" 。其次, React 提供两个库: ,它们必须首先加载。其中, 的作用是将 JSX 语法转为 JavaScript 语法。这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。$jsx src/ build/ 上面命令可以将 src 子目录的 js文件进行语法转换,转码后的文件全部放在 build 子目录。二、 () 是React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。 ( <h1>Hello, world!</h1>, ('exampl