React学习过程（持续更新......）

React学习过程（持续更新…）

创建react的hello项目

使用node创建create-react-app脚手架项目

//首先你得先安装node，这里不做详细教程，我使用的node为20.18.0
npm isntall create-react-app -g //全局安装create-react-app
create-react-app 你的项目名称
cd 项目文件夹下
npm start
//创建完后的项目路径如下，没有Components。public里面没用的都删掉，留个ico和html，index.html里面也删除<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />和<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />,这样就比较干净了

父子传值

//父组件
import React,{Component} from 'react'
import Header from "./Components/Header";
import Footer from "./Components/Footer";
import List from "./Components/List";
export default class App extends Component{state={tList:[{cd:'1',name:'jwq'},{cd:'2',name:'zhn'},{cd:'3',name:'zwq'}]}headerFn=(data)=>{console.log(data,'headerFn')}render() {const {tList}=this.statereturn(<div><Header headerFn={this.headerFn} /><List tList={tList}  /><Footer nums={tList.length} /></div>)}
}
//<List tList={tList}  />这样就把父组件的值传给子组件，子组件通过this.props.tList获取值
//子组件如何传值呢？子组件Header通过this.props.headerFn({cd:'4',name:‘zxy’})传给父组件，方法传值
//祖孙如何传值呢？也是比较简单的，假设List组件还有个子组件Item，那么父组件通过方法，传给List组件，
List组件通过方法告诉Item组件，在进行传值this.props.你的方法