1 前言
两大前端框架vue and React，支持jsx语言，将html和js语法写在一起
2 创建项目
2-1直接引入react.js文件使用
2-2创建空项目
创建：终端运行npx create_react_app 项目名
启动：npm start
- <span>部分内容渲染
- <p>锻炼
- <fragment>可以使得jsx文件中包含多个p标签，为一个组件复用
- let :声明不赋值
- const :声明且赋值
- useState函数：for状态变量，函数组件中管理动态变化的数据(比如表单输入值、列表数据、弹窗显示状态等)
- buttton标签：onClick
3 代码
代码1
import { Fragment } from "react/jsx-runtime";
function App() {
//const divContent = '今天是2025年09月13日'
//const divTitle = 'oneday learn for react'
//01条件渲染案例
//02数组如何进行输出渲染, 数组循环输出， map相比于for存在返回值，
const list = [
{id:1,name:'芋泥麻糍'},
{id:2,name:'咸口肉松卷'},
{id:3,name:'肉松小贝'},
{id:4,name:'续命咖啡'}]
const listContent = list.map(item =>
(
<Fragment>
<li key={item.id}>{item.name}</li>
<li>-------------------------</li>
</Fragment>
)
)
return(
<ul>{listContent}</ul>
)
}
export default App;
代码2
import { useState } from "react"
function App() {
const contest, setContest = useState('拿铁')
function handleClick(){
console.log('have click the button')
setContest ('美式')
}
return(
<div>
<div>{contest}</div>
<button onClick={handleClick}>按钮</button>
</div>
)
}
export default App;