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