React-(3)一个简单的Hello组件

React中组件的使用

1.创建组件

在src下新建一个名为components的文件夹用于存放组件,components下创建Hello文件夹，并在文件夹中创建Hello.js和Hello.css,此时这个Hello文件夹我们就可以作为组件使用了。

2 创建并暴露App组件

在App.js中通过类的方式创建App组件，并继承Component，记得引入相关的react依赖和Hello组件。

import React,{Component} from 'react';
import './App.css';
import Hello from'./components/Hello/Hello'

//创建并暴露App组件
export default class App extends Component{

  render(){

    return(
      <div>
      <Hello/>
      </div>
    )
  }
}

3.编写组件文件

编写Hello.js文件，并引入相关的css文件

import React,{Component} from 'react';
import './Hello.css';

//创建并暴露Hello组件
export default class Hello extends Component{
  render(){
    return <div className='Hello'>
             <h2 className='Hello_header'> this is he component</h2>
          </div>
  }
}

编写Hello.css文件

@import '~antd/dist/antd.css';
.Hello {
    text-align: center;
    color: hsl(193, 95%, 68%);
    /* height: 200px; */
    min-height: 10vh;
    background-color: rgb(29, 4, 4);
  }
  .Hello_header{

    color: aqua;
  }

4.查看结果

做完以上3步后，启动工程，查看运行结果。

可以看到我们自定义的Helo组件已经显示出来了.后期我们就可以根据需求在组件里编写我们的应用代码了。