[JavaScript知识库]2021-8-14 react学习笔记-2 创建组件 基本用法 JSX语法 数据绑定

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(){

    }
    render(){
        return <div>
            hello world
        </div>
    }
}

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

export default Home; //导出类组件

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