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