初识React-优快云博客

本文链接：https://blog.youkuaiyun.com/nantang01041/article/details/122222341

本文介绍了如何使用create-react-app创建React项目，包括jsx语法、组件划分（函数组件和类组件）、模板语法、状态管理及事件处理。重点讲解了HTML模板嵌入JavaScript和React组件的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装：
npm i create-react-app -g
安装脚手架

创建一个项目
create -react-app myreact

cd myreact进入文件
npm start启动

javaScript混合xml（html）语法格式
目的是更好的在javascript中写html模板

1.只有一个根节点
2.{}写JavaScript
3.数组可以直接写html标签
4.对象样式自动展开
5.{/*注释*/}
6.类名用className

无状态组件/视图组件
function App(){
    return(<></>)
}
export default App;

有状态组件/容器组件
import React,{Component} from'react'
export default class App extends Component{
    render(){
        return(<></>)
    }
}

文本渲染{}
dangerouslySetinnerHTML-{{__html:xxx}}

三元运算发符号
条件？<>:<>

&&符号
{{条件&&<>}}

this.state.list.map(item=><h3 key={item}>{item}</h3>)

和普通js事件一致，需要驼峰式写法
onClick={this.sayHi}
onClick={()=>{this.sayHi(参数)}}
onClick={this.sayHi.bind{this,参数}}

this.setState({k:v})
this.setState({k:v},()=>console.log("执行完毕的回调函数"))