React 16.x 学习笔记（第二课）、react组件创建的3种方法~

组件创建之一：?

函数式组件

function Hello(){
		return "hello world"
}

ReactDOM.render(<Hello/>,document.querySelector("#app"))

一般情况下，函数式组建是被当作木偶式组件来使用的。

组件创建之二：?

class类式组件

(function(){
		class Hello extends React.component{
				render(){
						return <div>hello world</div>
				}		
		}

		ReactDOM.render(<Hello/>,document.querySelector("#app"))
})()

因为这种方式是ES6的类的写法，所以原则上class后跟的名字首字母必须大写。如果小写的话，在react里是会报错的哦。这点需要注意！

组件创建之三：?

单页面组件
单页面组件的话，实际上是组件的模块化。通常情况下，我们会使用.jsx为扩展名创建一个组件（文件）。但官方在这点上别没有强制要求，所以使用.js为扩展名也是完全可以的。

在项目目录下创建components文件夹—>创建一个Hello.jsx文件----->创建main.js文件用以渲染这个组件
Hello.jsx文件：

import React  from "react";

export class Hello extends React.component{
		render(){
			return <h1>hello world</h1>
		}
}

main.js文件：

import React from "react";
import ReactDOM from "react-dom";
import {Hello} from "./Hello";

ReactDOM.render(<Hello/>,document.querySeletor("#app"));

当然，单页面组件的编译是要借助webpack和babel的帮助的，这里只对三种组件的创建做个介绍，就不再进行单页面组件的渲染过程啦！