目录
一、简介
1、搭建环境
2、回到项目（VScode）
3、项目核心渲染路径
4、网站资料（启动项目的方法）
二、JSX
三、实现渲染列表
四、实现条件渲染
五、实现复杂条件渲染
一、简介
1、搭建环境
npx creat-react-app react-basic其中，react-basic为项目名（自定义）
2、回到项目（VScode）
src中只留下App.js和index.js（要求其不报错，还能正常显示页面）
3、项目核心渲染路径
App -> index.js -> public/index.html（root）
4、网站资料（启动项目的方法）
https://zh-hans.react.dev/learn/start-a-new-react-project
二、JSX
JSX是JavaScript和XML(HTML)的缩写，表示JS代码中编写HTML模板结构，是react中编写UI模板的方式。JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能 在浏览器中运行。
解析器网址：
https://babeljs.io/
Babel · Babel
在JSX中可以通过 大括号语法{} 识别 JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等。
1. 使用引号传递字符串
2. 使用JavaScript变量
3. 函数调用和方法调用
4. 使用JavaScript对象
注意：if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中
三、实现渲染列表
1、先输入进去，实现3个一样的Vue
2.将Vue换成每一个的名字--->嵌套一个：{item.name}
3.在遍历渲染list时要求每一个都有独一无二的key,固定的，通常会用id来表示
const list = [{ id: 1001, name: 'Vue' },{ id: 1002, name: 'React' },{ id: 1003, name: 'Angular' }]function App() {return (<div className="App">this is App{/*渲染列表*/}<ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>)
}export default App;四、实现条件渲染
1.控制一个元素的显示和隐藏，用逻辑与
2.控制两个元素的话，用三元运算符
const isLogin = truefunction App() {return (<div className="App">this is App{/*逻辑与&&*/}{isLogin && <span>this is span</span>}{/*三元运算*/}{isLogin ? <span>jack</span> : <span>loading</span>}</div>)
}export default App;3.如果三个、四个五个呢？如下：
五、实现复杂条件渲染
解决方案： 自定义函数 + if判断语句
//定义文章类型
const articleTyple = 3 // 0 1 3 //定义核心函数（根据文章类型返回不同的JSX模板）function getArticleTem() {if (articleTyple === 0) {return <div>我是无图文章</div>}if (articleTyple === 1) {return <div>我是单图模式</div>}if (articleTyple === 3) {return <div>我是三图模式</div>}
}function App() {return (<div className="App">{/* 调用函数渲染不同的模板 */}{getArticleTem()}</div>)
}export default App;
