目录
一、简介
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的语法扩展,浏览器本身不能识别,需要通过解析工具做解析之后才能 在浏览器中运行。
解析器网址:
在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 = true
function 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;