React18 第一篇HelloReact

1.建议删除src目录下的内容，全部自己写，不要删除src

2.必须新建一个index.js

import React from 'react'   
//要写React.js 组件必须引入React 用JSX必须引入React
import React from ‘react'
indexjs基本引入要引入
import React from “react”
import ReactDOM from “react-dom/client";
在混入引入indexjs的其他文件中要引入基本的最好是引入{Component}这样就不用总是写 React.Component
import react,{Component} from "react"

编写第一个hello world

在indexjs中引入基本的react后
import root = ReactDOM.createRoot(document.getElementByID('root'));
输出
root.render(<h1>hello world</h1>);

****注意一个文件中只能有一个export

class组件编写hello world

名字大写创建class类(驼峰）
class Hello from Componet（）{ render（ return （<h1>hello world</h1>））}
导出class 类
export default Hello;
在indexjs引入class组件
import Hello from ”./路径/Hello.js“
使用
import root = ReactDOM.createRoot(document.getElementByID('root'));
root.render(<Hello/>);

函数组件编写Hello World

目前两种方式
1、普通函数
	function Top() {
	return (<h1>hello 我是顶部</h1>)
}
2、es6函数语法
let Middle = ()=>(<h1>我是中间部分</h1>)
导出
export default class App extends Component{
render(){
return(
 <Top></Top>
 <Middle></Middle>
)

组件嵌套

#####组件的嵌套利用函数组件嵌套
class Bottom extends Component{
    render() {
    return (<h1>我是底部
        <BotChild></BotChild>
    </h1>)
    }
}
class Botchild extends Compent{
render（）{ return 我是bottom的孩子 }
}
export default Bottom;
#####函数组件嵌套
let Middle = ()=>(
<h1>这是中间的轮播图swiper
<MidChild></MidChild>
</h1>)
function MidChild(){
    return <h1>我是Middle的孩子</h1>
}
export default Middle;