React 入门实例教程.pdf

目 录 介绍 零、安装 一、HTML 模板 二、React.render() 三、JSX 语法 四、组件 五、ps.children 六、PropTypes 七、React.findDOMNode() 八、this.state 九、表单 十、组件的生命周期 十一、Ajax 十二、参考链接 本文档使用 看云 构建 - 2 - 介绍 介绍 原文出处 ：http///blog/2015/03/react.html 作者 ： 阮一峰 现在最热门的前端框架 ，毫无疑问是 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 不是答案》 ）。 本文档使用 看云 构建 - 3 - 介绍 既然 React 这么热门 ，看上去充满希望 ，当然应该好好学一下。从技术角度 ，可以满足好奇心 ，提高技术 水平 ；从职业角度 ，有利于求职和晋升 ，有利于参与潜力大的项目。但是 ，好的 React 教程却不容易找 到 ，这一方面因为这项技术太新 ，刚刚开始走红 ，大家都没有经验 ，还在摸索之中 ；另一方面因为 React 本身还在不断变动 ，API 一直在调整 ，至今没发布1.0版。 我学习 React 时 ，就很苦恼。有的教程讨论一些细节问题 ，对入门没帮助 ；有的教程写得不错 ，但比较 短 ，无助于看清全貌。我断断续续学了几个月 ，看过二十几篇教程 ，在这个过程中 ，将对自己有帮助的 Demo 都收集下来 ，做成了一个库React Demos 。 本文档使用 看云 构建 - 4 - 介绍 下面 ，我就根据这个库 ，写一篇全面又易懂的 React 入门教程。你只需要跟着每一个 Demo 做一遍 ，就 能初步掌握 React 。当然 ，前提是你必须拥有基本 JavaScript 和 DOM 知识 ，但是你读完就会发现 ， React 所要求的预备知识真的很少。 本文档使用 看云 构建 - 5 - 零、安装 零、安装 零、安装 React 的安装包 ，可以到官网下载。不过 ，React Demos 已经自带 React 源码 ，不用另外安装 ，只需把 这个库拷贝到你的硬盘就行了。 $ git clone git@:ruanyf/react-demos.git 如果你没安装 git ， 那就直接下载 zip 压缩包。 下面要讲解的11个例子在各个 Demo 子目录 ，每个目录都有一个 index.html 文件 ，在浏览器打开这个文 件 （大多数情况下双击即可 ），就能立刻看到效果。 需要说明的是 ，React 可以在浏览器运行 ，也可以在服务器运行 ，但是本教程只涉及浏览器。一方面是为 了尽量保持简单 ，另一方面 React 的语法是一致的 ，服务器的用法与浏览器差别不大。Demo12 是服务 器首屏渲染的例子 ，有