React——脚手架创建、基本操作、Typescript

React官方文档： https://react.docschina.org/

1. 全局安装

cnpm i -g create-react-app

2. 创建项目

/*js*/
create-react-app appName
/*ts*/
create-react-app appName --template typescript

3. 启动项目

npm run start

4.【组件es6 Class】

import React from "react";

class Page1 extends React.Component{
    render() {
        return <div>page1</div>
    }
}

export default Page2

4.1【组件导入】

import React from "react";
import Page2 from "../page2/page2";

class Page1 extends React.Component{

  render() {
    return <div>
      <Page2 />
    </div>
  }
}

export default Page1

4.2【子组件传值父组件】

/* 父组件 */
import React from "react";
import Page2 from "../page2/page2";

class Page1 extends React.Component{

  render() {
    return <div>
      <Page2 setData={this.setData} />
    </div>
  }

  setData(data){
    console.log(data)
  }
}

export default Page1

/*子组件*/
import React from "react";
class Page2 extends React.Component{
    render() {
        const {setData} = this.props
        return <div onClick={()=>setData("page2 data")}>
            children
        </div>
    }
}

export default Page2

4.3【父组件传值子组件】

/*父组件*/
import React from "react";
import Page2 from "../page2/page2";

class Page1 extends React.Component{

  page2Ref = React.createRef()

  render() {
    return <div>
      <Page2 ref={this.page2Ref} />
      <button onClick={this.handleGetPage2Name}>Get Page2 Name</button>
    </div>
  }

  handleGetPage2Name = () =>{
    this.page2Ref.current.setData("page1 data")
  }
}

export default Page1

/*子组件*/
import React from "react";
class Page2 extends React.Component{
    render() {
        return <div>
            children
        </div>
    }

    setData = (data)=>{
        console.log(data)
    }
}

export default Page2

4.4【生命周期】

constructor(): 在 React 组件挂载之前，会调用它的构造函数。
getDerivedStateFromProps():在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
render(): render() 方法是 class组件中唯一必须实现的方法。
componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。

5. 函数式组件

function Index(){
  return <h1>Hello React</h1>
}
export default Index