React入门
@React入门与实战
@@React入门与实战
@@@第一章 React简介
@@@@React由来
###React由来
<p>
<img src="img/one.png" >
<div>相信对于React大家或多或少都知道一些关于它的消息吧，确实React在这最近的<em>2-3</em>年时间里面迅速的流传开来。不管是作为web端开发的同学，还是作为App端开发的同学，都有必要要去了解、学习它。因为它已经成为一种既可以跨平台、而且又可以快速开发、性能特别棒的宠儿了。下面列出几条React的由来：</div><br />
<li>React是一个用于构建用户界面的<em>JAVASCRIPT</em>库</li>
<li>React主要用于构建UI,很多人认为React是MVC中的V（视图）</li>
<li>React起源于Facebook的内部项目，用于<em>构建Instagram的网站</em>，并于2013年5月开源</li>
<li>React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它</li><br />
<div>相信看完上面列出来的特点，有些同学会有疑问了，比如什么是声明式设计、什么是单向响应的数据流，且先别着急，让我们先把好奇心先放放，跟着课程的进度，相信你能够一一了解到。</div><br />
**React学习需具备的知识**
<br />
<div>在开始学习React之前，您需要具备以下基础知识:</div>
<li><em>HTML5</em></li>
<li><em>CSS</em></li>
<li><em>JavaScript</em></li>
<br />
**练习**
<div>
在这里给大家留道练习题，目前市场上面，还有哪些流行的前端框架，它们与React项目有哪些区别呢？
</div>
<br />
</p>
@@@@React下载
###React下载
<p>
<div>由于React主要是提供一套JS框架，所以在使用它之前我们首先需要得到一份React的js库，目前主流的四种方法：</div>
<li>通过<em>npm</em>进行下载，这种下载方式需要你本地首先配置好npm环境，然后通过npm指令从远程仓库里面下载一份JS库</li>
<li>通过他人已经下载好的js得到</li>
<li>通过<em>CDN服务器</em>直接进行引用，这种方式我们不需要事先下载React js库，而是提供一个远程的CDN服务器的链接，当代码进行链接编译的时候，将会自动从远程下载JS库。优点是我们不需要随着JS库的升级更新本地JS库，缺点就是必须保证远程CDN服务器的稳定可用</li>
<li>4.由于React是开源的，所以我们可以通过源码自己编译得到</li>
<div>由于篇幅限制，所以这一小节我们就不详细介绍npm配置下载了，有兴趣的同学可以自行研究，相信也不会太难。以后的课程里面，我们将采取第三条方法，通过cdn引用的方法，这种方法也是正规项目里面最常采用的方法了。</div><br />
**React JS CDN**
<li><code><script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script></code></li>
<li><code><script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script></code></li>
<li><code><script src="http://static.runoob.com/assets/react/browser.min.js"></script></code></li>
<div>下面大致讲一讲上面三个JS库的各自作用，三个库都带有.min后缀，相信具有web开发经验的同学应该知道js库是经过压缩的。<em>react.min.js是React核心js库</em>，<em>react-dom.min.js则是React与dom操作相关的js库<em>，<em>browser.min.js的作用是将JSX语法转换为JavaScript语法</em>，当然这一步是很耗时间的。</div><br />
<img src="img/img14.png" width="600" >
<br />
**练习**
<div>
通过本节学习相信你已经对React有一定的了解了，最起码能够知道它大概应该是怎样使用的。本节最后给大家留一个练习题吧，这个练习题我觉得还是很有必要试一下，因为对你以后学习其他新技术还是很有帮助的，比如<em>nodejs</em>。大家可以自己在本地电脑上面搭建一下npm环境，同时用这种方法下载一下React JS库。
</div>
</p>
@@@@特点与Hello World
###特点与Hello World
<p>
<img src="img/seven.jpg">
**React的特点**
<div>作为一款知名度这么高的前端JS框架，何以能够有如此魅力，下面我们详细列出React的几条主要特点：</div><br />
<li>声明式设计-React采用申明范式，可以轻松描述应用。</li>
<li>高效-React通过对<em>DOM的模拟</em>，最大限度地减少与DOM的交互。</li>
<li>灵活-React可以与已知的库或框架很好地配合。</li>
<li><em>JSX-JSX是javascript语法的扩展</em>，React开发不一定使用JSX,但我们推荐使用它。</li>
<li>组件-通过React构建组件，使得代码更加容易得到复用，能够很好地应用在大项目的开发中。</li>
<li>单向响应的数据流-React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。</li><br />
**Hello World**
<div>在这一节里面，让我们庸俗一把，通过一个Hello World的demo来快速了解一下React的代码规范与结构。</div>
<pre>
<div >
Hello World!
</div>
</pre>
你会注意到，React为这个<div>元素添加了两个data前缀的属性。在浏览器环境下，React使用data-reactid区分DOM节点。这也是每当组件的state及props发生变化时，React都可以精准的跟新制定DOM节点的原因。
<br />
<div>
data-react-checksum仅仅存在于服务端。顾名思义，它是已创建<em>DOM和校验和</em>。这准许React在客户端服用与服务端结构上相同点的DOM结构。该属性只会添加到跟元素上。
</div>
<br />
**React.renderToStaticMarkup**
<br />
<div>
React.renderToStaticMarkup是第二个服务端渲染函数，除了不会包含React的data属性外，它和React.renderToString没有区别。
</div>
<pre>
varMyComponent=React.createClass({
render：function（）{
return<div>Hello World!</div>;
}
});
varworld= React.renderToStaticMarkup(<MyCompoent/>);
//单行输出
<div>HelloWorld!</div>
</pre>
<br />
**用React.renderToString还是React.renderToStaticMarkup**
<br />
<div>
每个渲染函数都有自己的用途，所以你必须明确自己的需求，再去决定使用哪个渲染函数。当且仅当你不打算在客户端渲染这个React Component时，才应该选择使用React.renderToStaticMarkup函数。
</div>
<br />
下面有一些示例:
<li><em>生成HTML电子邮件;</em></li>
<li><em>通过HTML到PDF的转化来生成PDF;</em></li>
<li><em>组件测试;</em></li>
<br />
大多数情况下，我们都会选择使用<em>React.renderToString</em>。这将准许React使用<em>data-react-checksum</em>在客户端跟迅速的初始化同一个React Component因为React可以重用服务端提供的
DOM，所以它可以跳过生成DOM节点以及把他们挂载到文档中这两个昂贵的进程，对于复杂些的站点，这样做就会显著的减少加载时间，用户可以更快的与站点进行交互。
确保React Component能够在服务端和客户端准确的渲染出一致的结构是很重要的。如果data-react-checksum不匹配，React会舍弃服务端提供的DOM，然后生成新的DOM节点，并且将它们更新到文档中。此时，Ract也不胡iyongyou服务端渲染带来的各种性能上的优势。
</div>
</p>
