09 React——创建组件、使用组件

创建好一个react应用程序后，我们就需要创建组件并且使用组件，其实react开发本身就是创建组件、使用组件的过程。下面来看一下示例：

上图中的html页面上总共有三个组件：根组件、Home组件和列表组件，下面就具体聊聊该怎么创建这些组件以及如何使用它们。

创建组件：

1 我们修改一下默认创建的react应用程序的代码结构，在src目录下创建相应的文件夹及文件，方便代码文件的组织管理，最终的代码文件结构图如下所示：

2 我们在compotents目录下创建了Home、News两个组件，也就是两个js文件，里面的具体代码如下所示：

Home.js

import React,{Component} from 'react';

class Home extends Component{

constructor(){
    super();
}
render(){
    return (
        <div>
            <h1>Home组件</h1>
        </div>
    )
}
}

export default Home;

News.js

import React,{Component} from "react";

class News extends Component{

    render(){
        return(
            <div>
                <ol>
                    <li>新闻组件选项01</li>
                    <li>新闻组件选项02</li>
                    <li>新闻组件选项03</li>
                    <li>新闻组件选项04</li>
                </ol>
            </div>
        )
    }
}

export default News;

由上述代码可以看出创建组件的代码大致相同，首先引入模块，然后定义组件，最后定义将组件导出。如果需要样式文件的话我们再引入相应的样式文件即可。

注意：在定义组建的时候，一定要在所有的代码外层包含一个<div>

由此，两个简单的组件已经创建完成，接下来我们就来使用它们。

3 在此处我们将App组件看作是根组件，所以上述创建的两个组件都要在此组件中来用。

3.1 首先，我们将这两个组件在App.js中加载进来，如图：

import Home from "./Home";
import News from "./News";

3.2 在我们想用的地方就像使用HTML标记那样使用它们就可以，如图：

注意：使用组件时可以用单标签的样式，也可以用双标签样式，至此，组件的创建和使用已经完成。