今天讲一下 React 中的组件。组件就是页面上的一部分，大大小小的各种组件拼在一起就变成了一个完整的页面，就像我们玩的拼图，需要一块一块的拼接在一起才能变成一副完整的拼图。
以上图为例，每个框框就可以当做一个组件，组件的拆分可以根据自己开发的页面决定。一个完整的页面非常复杂，很难编写。但是，当我把页面分成一个个小组件进行开发之后，再进行开发和维护这些组件就会比较简单了。
这就是我们前端通常说的前端组件化的概念。有了组件化这么一个概念之后，打开我们之前创建好的项目代码。
项目目录，我展开了开发当中最主要的两个文件夹，在 src 文件夹下现在又一个 App.js 的文件和一个 index.js 文件、在 public 文件夹下有一个图标文件 favicon.ico 和一个 index.html 文件。
打开 index.js 文件，它是整个程序的运行入口。
./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
上面的第三行代码通过 import 导入 App 文件，这个 App 其实就是一个组件。
接下来看一下，该如何定义一个组件。import App from './App'; 中的 App 来自于 ./src/App.js 这个文件。下面就是一个最基础的 React 组件。
./src/App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<h1>Hello React</h1>
);
}
}
export default App;
看一下上面的代码是如何定义一个组件的。
第一行有一个 { Component } ，这是一个 ES6 的语法。上面的所有代码可以改写成下面这样，你们应该就理解 { Component } 这个语法是表达什么的了。
import React from 'react';
class App extends React.Component {
render() {
return (
<h1>Hello React</h1>
);
}
}
export default App;
忽略空行，第二行代码，通过 ES6 中的 class 语法定义了一个叫做 App 的类，并继承了 React.Component 的方法。这样就相当于定义了一个 React 的组件了。
接着往下看，这个 App 组件里有一个 rander() 方法。这个方法返回了一些 html 标签。
这些返回的内容是挂载到 indesx.html 页面上的内容。
最后通过 import React from 'react'; 导出这个 App 组件。
在 ./src/index.js 文件中使用 import App from './App'; 引入了 ./src/App.js 这个组件。这样就可以通过 index.js 这个入口文件把组件显示在页面上。
npm start 启动项目，再次看一下组件显示的内容。还是跟上次一样，显示出了 Hello React 。
重新去我们的 ./src/App.js 文件下修改一下里面的代码。把第六行的 <h1>Hello React</h1> 修改成 <h1>Hello World</h1>。保存，回到浏览器，刷新。
页面内容就变成了 Hello World 。为什么会这样呢？原因就在于，在 ./src/index.js 中引入了 App 组件，而这个组件渲染的内容就是 Hello World ，这样你的页面就会跟着变了。
到现在，你们应该对组件有了细微的了解。
一开始 ./src/App.js 文件的代码是这样的。
import React, { Component } from 'react';
// import { Component } from 'react'; 这个 { Component } 可以单独取出来
// 上面那行就等价于
// import React from 'react'
// const Component = React.Component
class App extends Component {
render() {
return (
<h1>Hello World</h1>
);
}
}
export default App;
了解一下是这样写的就好。
再看一下 ./src/index.js ，我们在这个文件中引入了 App.js 这个组件。看一下最后一行 ReactDOM.render() 做了些什么工作。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM 是一个第三方的模块，它有一个方法叫做 render() ，这个方法可以帮我们把一个组件挂载到我们的一个 DOM 节点上。
最后一句我们把 App 这个组件挂载到 id 等于 root 这样的一个 DOM 节点上。
切换到浏览器上，打开控制台看一下。
很明显的看到，Hello World 这个内容的标签就挂载到了 <div id="root"></div> 标签上。
为什么要把 App 这个组件挂载到 id 为 root 这个节点上呢？在 ./public 这个目录中有一个 index.html 的文件。这是我们工程文件的 html 模板。在这个模板里有一个 <div id="root"></div> 的标签，它就是我们整个网页的内容部分。把所有的内容都放到了那个节点上。
./public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
里面的内容是由谁生成的呢？很明显是我们使用的 React 生成的。生成的内容就是 App 组件里的内容。
在 ./src/App.js 文件和 ./src/index.js 文件中都引入了 React 模块，但是并没有发现在哪里使用到了这个模块。
我们试着把 ./src/index.js 中的导入 React 模块的那句注释掉。
// import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
保存一下，到网页上刷新页面。
会提示 Failed to compile ，编译失败。
当我们用 ReactDOM.render() 的时候，里面有 <App /> 这样的一个自定义标签参数。其实，这是 React 的一种语法。叫做 JSX 语法，过阵子会给大家详细的讲解。只要你使用了这种语法，就要引用 React 模块。不引用 React 就没办法编译这种 JSX 语法的。这样 ./src/index.js 里面的四行代码大概知道了是用来干嘛的了。
再打开 ./src/App.js，里面的引用的 React 也是为了编译这种语法。
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<h1>Hello World</h1>
);
}
}
export default App;
在 render() 方法中，return 的内容就包含了 JSX 语法。
今天就那么多，溜了溜了，喜欢的就给我点个喜欢吧。
