react-4 简单的组件的使用

之前我们基于 create-react-app 创建出下面目录结构的项目：

 

 

我们也简单了解了react 是如何使用 ReactDOM.render() 方法渲染我们的页面；

一开始创建的项目在渲染的时候使用了组件的方式，但是我们在上一篇中演示了不用组件的方式来渲染

页面；下面我们来使用组件的方式重新演示一下；

 

我们在 src 目录中新增一个Pages 目录，新增4个页面（瞎写四个用来测试的页面），

（1）index 首页      （2） able 功能页       （3）introduce 简介页   show 展示页面

  然后我们在Index目录中新建 index.js 和 index.css ；其实这个index 就是我们的组件；

如图：

然后我们就可以在这个index 组件中写相关的页面内容：下面采用 es6 的写法 

index.js     第一行代码引入react

                 第二行开始继承Component 创建我们的组件 Index ，这个写法就是这样固定的，记住就行，

                 我们需要关注的就是 return ()  括号里面的内容，这个就是我们要显示的页面，我们简单增加了一句话；

import React ,{Component} from 'react';

export default class Index extends React.Component {
    render(){
        return(
            <section>
                <p>测试组件的首页</p>
            </section>
        )
    }
}

 上面的组件没有任何的样式，我们先不关注样式，这样就是一个最简单的组件了，然后我们把这个组件挂载到页面中；

  也就是修改 src目录下的 index.js 文件就可以了；

  如下：  我们注释掉之前写的代码，把组件Index挂载到页面中，如下写法，还是使用ReactDom.render() 方法；

上面就是简单的使用一个组件的方法；