在react中，所有以大写字母开头的都是组件，而不是标签。
ReactDOM.render(根jsx，根的挂载点)
ReactDOM只能出现一次，但是非常厉害，可以和HTML结合
jsx，现在一律在js文件夹中开发，并不是传统放html开发
HTML、CSS、JS都被构建到bundle.js文件夹中。
安装以下插件，输入rcc即可快速生成一个组件的语法：
2.2组件可以多层嵌套
main.js文件中引入App.js组件，App组件里面的render函数还可以引入其他组件。
components/Child.js
import React from "react";
export default class Child extends React.Component {
constructor() {
super();
}
render() {
return <div>
<h1>我是Child子组件！</h1>
</div>
}
}
App父组件中引入：
import React from "react";
import Child from "./components/Child";
// 默认暴露一个构造函数（类组件）
export default class App extends React.Component {
constructor() {
super();
}
render() {
return <div>
<h1>我是App组件！</h1>
<Child></Child>
<Child></Child>
<Child></Child>
</div>
}
}
简单的说：在react中做一个组件：
第一步：创建一个类并暴露
第二步：引入这个类，然后用这个类的类名当做组件的标签（实例化）
2.3函数式组件
一个函数，如果是大写字母开头，并且return一个React Element就是一个组件。
比如App.js组件中，创建一个Child1的函数，这个函数直接返回JSX语法的React Element，此时这个函数就是组件，这个函数直接成为自定义标签，就可以用了。
import React from "react";
import Child from "./components/Child";
// 默认暴露一个构造函数（类组件）
//定义一个自定义的函数组件
const Child1 = ()=> <div>
<h1>我是Child1函数式组件！</h1>
</div>
export default class App extends React.Component {
constructor() {
super();
}
render() {
return <div>
<h1>我是App组件！</h1>
<Child></Child>
<Child1></Child1>
</div>
}
}
注意：
1）render是一个函数，所以函数里面当然可以定义另一个函数。我们用const来定义一个箭头函数，这个箭头函数的名字，必须首字母大写。react中所有标签名字是首字母大写的，将被判定为我们自己的组件。
2）这个函数里面return了一个jsx对象，注意，不要加引号。初学者会有很多不适。
3）这个组件也是通过“标签”的形式来上树的！
4）函数式组件比类组件差很多功能很多，后面会说。
5）至于什么时候用什么组件、圆括号中能不能传入参数，后面会说。
函数式组件有个缺点，没有state，没有生命周期。
三、JSX语法
所有对React不适应，都是JSX语法造成的，JSX语法淡化了JS和HTML之间的“边界”。
3.1标签必须合理嵌套
错误的：
import React from "react";
import ReactDOM from "react-dom";
// 引入组件
import App from "./App.js"
ReactDOM.render(
<App></App>
<App></App>
<App></App>
,
document.getElementById('app')
);
有多个组件，必须有一个标签包裹所有组件：
import React from "react";
import ReactDOM from "react-dom";
// 引入组件
import App from "./App.js"
ReactDOM.render(
<div>
<App></App>
<App></App>
<App></App>
</div>
,
document.getElementById('app')
);
比如table不能直接嵌套tr，必须要有tbody
import React from "react";
export default class App extends React.Component {
constructor() {
super();
}
render() {
return <div>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
}
}
比如这样也是错误的：
3.2 return不能换行
return后面直接跟着div，不能换行
如果想换行，必须加圆括号包裹。
import React from "react";
export default class App extends React.Component {
constructor() {
super();
}
render() {
return (
<div>
<h1>我是App