就是把页面的组成和功能拆分为一个个细分的组件，这就是前端的组件化的概念
其实这个引入的App（App.js）就是一个React组件。
1. React组件定义
这里使用了ES6的语法，继承了Component这个类就可以了。
这个组件有一个render方法，返回的内容就是组件显示的内容！
一开始代码是这样写的：
上面这个是ES6解构赋值的语法！简写一个{Component}就可以了
1.1 index.js
之后在index.js中我们引入了这个组件，最终就显示了这个组件了：
App是一个组件并引入了它。
ReactDom是一个第三方模块，内部有一个render方法，可以让我们把某一个组件挂载在某一个DOM节点上面！--App组件挂在在id为root的DOM节点上面。
但是我们如果去掉了React的引用：就会编译报错，因为我们使用了JSX语法，这个语法必须引入React才可以使用！
2. 最基础的JSX语法
JSX是JavaScript XML的简写，是一种在React中编写组件的语法扩展。它允许我们在JavaScript中编写类似于HTML的代码，并且可以在代码中嵌入JavaScript表达式。JSX最终会被转换成纯JavaScript代码并执行，而不是HTML代码。这种语法扩展使得在React中编写UI组件变得更加直观和易于理解，同时也提高了代码的可维护性和可读性。
在render函数中的标签其实是一种JSX语法，需要React才能对其编译识别！
其实我们发现在JS里面写了HTML标签，这种就称之为JSX语法，以前我们在JS中要写一段渲染的语法都需要通过操作DOM来进行。
另外JSX语法中除了HTML默认标签之外，还可以使用自己定义的组件，注意自定义组件需要使用大写：
上面这种就不对！