b站React学习计划启动

React基础搭建与目录简化

采用creat-react-app手脚架来搭建react应用

终端输入命令

1
npx create-react-app react-basic

一些说明:

  1. npx create-react-app 是固定命令,create-react-app是React脚手架的名称
  2. react-basic表示项目名称
  3. npx命令会临时安装create-react-app包,初始化项目完成后会自动删掉

在安装完成后终端输入npm start启动项目

我们可以在页面中看到一个转动的react图标和几行字

打开项目目录,coding文件主要在src文件夹中,首先将src文件中多余的内容删除,保留三个核心的入口文件:App.js,index.css和index.js

然后删除App.js和index.js中和一些删除文件的关联,保留内容如下

1
2
3
4
5
6
7
8
9
10
/* App.js */
function App() {
return (
<div className="App">
app
</div>
);
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* index.js */
// 引入框架核心包
import React from 'react'
// 引入渲染相关的包
import ReactDOM from 'react-dom'
// 引入全局样式文件
import './index.css'
// 引入根组件App
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<App />
)

之后JSX的学习均在App.js中进行

JSX基础

JSX (JavaScipt XML) 就是react中的HTML,通过js的自身可编程能力来创建HTML结构

将命令式写法简化为声明式写法 (就是咱写简单的声明写法,编译器会将其转化为命令式写法后运行)

JSX表达式

语法: { JSX表达式 }

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const name = '常规变量'
const getDate = ()=>{
return '2022.6.16'
}
const flag = false
const str = 'beautiful'


function App() {
return (
<div className="App">
{ name }
{ getDate() }
{ flag? '真' : '假' }
{ str.split('').join('-') }
</div>
);
}

export default App;

注意switch-case/if条件判断/变量声明语句属于语句,而非表达式

JSX列表渲染

采用map进行

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const list = [
{ id: 1, item: "条目1" },
{ id: 2, item: "条目2" },
{ id: 3, item: "条目3" },
];

function App() {
return (
<div className="App">
<ul>
{list.map((list) => (
<li key={list.id}>{list.item}</li>
))}
</ul>
</div>
);
}

export default App;

遍历列表需要类型为number/string的不可重复的key来提高diff性能, key只在内部使用,不会在真实dom中出现

JSX条件渲染

就用刚才那个列表继续做例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const list = [
{ id: 1, item: "条目1" },
{ id: 2, item: "条目2" },
{ id: 3, item: "条目3" },
];

// 满足条件才显示列表
const flag = true;

function App() {
return (
<div className="App">
<ul>
{flag ? list.map((list) => <li key={list.id}>{list.item}</li>) : null}
</ul>
</div>
);
}

export default App;

也可以用逻辑判断语句更简单地完成这个任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const list = [
{ id: 1, item: "条目1" },
{ id: 2, item: "条目2" },
{ id: 3, item: "条目3" },
];

const flag = false;

function App() {
return (
<div className="App">
<ul>
{flag && list.map((list) => <li key={list.id}>{list.item}</li>)}
</ul>
</div>
);
}

export default App;

JSX样式

JSX样式分为行内样式和类名样式,如下示例所示,style1是行内样式,style2是类名样式

优先级同css优先级:行内样式 > 类名样式

1
2
3
.style2 {
color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import "./App.css";

// 行内样式,直接在元素上绑定一个style属性
const style1 = { color: "red", fontSize: "50px" };

function App() {
return (
<div className="App">
<span style={style1}>span1</span>
<span className="style2">span2</span>
</div>
);
}

export default App;

动态控制类名: 用三目表达式即可

1
<span className={flag ? 'style1' : ''}>span2</span>

JSX注意事项

  1. JSX必须有一个根节点,如果没有根节点,可以使用<></>(幽灵节点)替代
  2. 所有标签必须形成闭合,成对闭合或自闭合均可
  3. JSX语法属性名采用驼峰命名法 class -> className for -> htmlFor
  4. JSX支持多行,如需换行,需用()包裹,防止bug