React入门实例培训教材.docVIP

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