这是我参与「第五届青训营 」笔记创作活动的第9天

react启航

react特点

• 声明式
• 组件化
• 跨端

渲染

reactDOM.render(
`<div></div>`,docuemnt.getElementById('root'))

组件

类组件

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

函数组件

function demo(){
    return (<><div></div></>)
}

props传递数据

function(props){
return(<>{props.value}</>)
}
class Dmo extends React.Component{
	render(){
	return {<>
	<div>{this.props.value}</div>
	</>}
	}
}

组件交互

<div onclick={()=>{console.log('helloworld')}}></div>

state

class demo extends React.Component{
constructror(props){
super(props)
this.state={
value:null
}
}
}

脚手架

create-react-app

vite

基本使用

初始化

import react from 'react'
import reactDom from 'react-dom'
ReactDom.render(React.createElement('div'),document.querySelector('#root'))