2021-8-14 react笔记-2 创建组件 基本用法

1、目录解析

public中的index.html为入口文件

src目录中文件很乱，先整理文件夹。

新建components 放组件

新建assets放资源   ->/images      ->/css

把乱的文件放进去  修改App.js 根组件和index.js入口文件中的引入路径

2、新建组件

在components文件夹中新建[Name].js文件 //组件名首字母大写

随后在组建中引入react,component

import React,{Component} from 'react';

定义类组件

class Home extends Component{
    constructor([props]){
        super([props])  //props用于父子组件传值 无需传值则不用写
    }
    render(){
        return <div>
            hello world
        </div>
    }
}

另一种引入方法

import React from 'react';
class Home extends React.Component{
    constructor([props]){
        super([props])  //props用于父子组件传值 无需传值则不用写
    }
    render(){
        return <div>
            hello world
        </div>
    }
}

构造函数  construct如果直接写会报错 因为组件是继承了component组件 因此要使用super()继承

super指父组件中的this  必须写在其他this之前

导出到根组件App 并在根组件中引入

export default Home; //导出类组件

import  Home from `./components/Home`  //引入组件
function App() {
  return (
    <div className="App">
      <Home/>        //插入组件  注意首字母大写
    </div>
  );
}