React学习Hello World！

天才就是无止境刻苦勤奋的能力－－卡莱尔

Hello World!
最简单的React例子，像下面这样：

ReactDOM.render(
    <h1>Hello,World!</h1>, //这里也可以是一个组件，后面会讲到。比如<Hello />
    document.getElementById('root')
)

这段代码渲染了一个 ‘Hello World！‘标题。

拓展知识：
React是一个javaScript库。谈到这里，有人肯定想问什么是类库？使用框架前，这个问题还是很有必要弄清楚类库（Jquery）和框架（AngularJs）的区别？
简单而言，

• 类库，解决的是代码或者是模块级别的复用或者对复杂度的封装问题，例如将一个解决复杂问题的功能模块封装成一个函数，提供一个简单的接口。库它是一种工具，它提供了好多封装好的方法。

• 而框架，更多的是对模式级别的复用和对程序组织的规范。这里的模式比如MVC，为了实现M和V的解藕，把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化。是面向一个领域来提供一套解决方案，提高开发效率。如果我们选择了使用某框架，就应该遵循该框架制定的规则。

前端MVC框架的思想
传统的MVC模式将一个应用划分为–模型层（model）、视图层（View）、控制层（Controller），他们在应用系统中担任不同的角色，完成不同的任务。

1. Model：即数据模型，模型可以直接访问数据。
2. View：视图，在视图中一般没有程序上的逻辑，为了实现视图上的最新功能，视图需要访问它监视的数据模型。
3. Controller：控制器，调控视图和模型的联系，它控制应用程序的流程，处理事件并做出响应，事件不仅仅包括用户的行为还有数据模型上的改变。通过捕获用户事件，通知模型层做出相应的更新处理，同时将模型层的更新和改变通知给视图，使得视图做出相应的改变。因此控制器保证了视图和模型的一致性。

这里还有一个问题：组件和元素什么区别呢？

const element = <div>Hello,World!</div>

这个就是一个元素。元素是组件的一部分。

<Hello /> 这个就是所谓的组件

Hello组件具体的内容是什么呢？可以自定义

import React,{ Component } from 'react';
const element = <div>Hello,World!</div>;

class Hello extends Component {
    render() {
        return (
            <div>
                { element }
            </div>
        )
    }
}
export default Hello;

这个就是所谓的Hello组件。

function Hello() {
    return (
        <div>Hello,World!</div>
    )
}

函数也是所谓的组件，定义组件的方式有两种，一种是class，另一种就是函数。