【React速成 01】JS库 前端框架 声明式UI 组件化 跨平台 create-react-app脚手架 目录调整 JS表达式 列表渲染 数组map方法 条件渲染 动态类名控制 幽灵节点 驼峰命名

说在前面

本速成笔记基于B站up主柴柴的 React入门到实战

概述

React是专注于构建用户界面的JavaScript库
和Vue以及Angular并称前端三大框架

特点

1. 声明式UI（JSX）
   抛弃命令式的繁琐实现，写UI就像写普通HTML

2. 组件化
   通过搭积木的方式拼成完整页面
   通过组件的抽象可以增加复用能力并提高可维护性

3. 跨平台
   React既可以开发Web应用也可以使用同样的语法开发原生应用（react-native）如安卓和IOS应用，甚至可以用于开发VR应用，更像是一个元框架

环境初始化

使用React脚手架创建一个React项目
1 使用脚手架创建项目

• 打开命令行窗口
• 执行命令

$ npx create-react-app react-basic

npx create-react-app是固定命令，create-react-app是脚手架名称
该脚手架库是基于react库的模版项目，包含所有需要的配置（语法检查，jsx编译，devServer等）
项目的整体技术架构是react + webpack + es6 + eslint
使用脚手架开发项目特点是模块化，组件化，工程化

react-basic是语义化的项目名称
npx命令会临时安装create-react-app包，在初始化完成后自动删除，我们不需要全局安装create-react-app

• 启动项目

$ yarn start
or
$ npm start

2 目录调整
src目录是code进行项目开发的目录
package.json中有两个核心库: react, react-dom
package.json主要作用是

1. 描述整个项目的名称、版本等
2. 管理本地安装的npm包，定义项目需要的各种模块并记录其信息如名称、版本、许可证等元数据
3. 方便依据现成的配置文件快速构建项目

现在我们需要删除src目录下的所有文件除了App.js根组件，index.js以及index.css
index.js文件作为项目入口文件

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 引入根组件App
import App from './App'
// 通过调用ReactDOM的render方法渲染App根组件到id是root的dom节点上
ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
	document.getElementById('root')
)

JSX基础

1 概述
JSX是JavaScript XML
表示在JS代码中书写HTML结构（页面UI结构）

JSX是JS的语法扩展，浏览器默认不识别
需要脚手架内置的 @babel/plugin-transform-react-jsx 包解析JSX语法

2 在JSX中使用JS表达式
语法： { JS 表达式 }

const name = "Zane"

<h1>Hello, {name}</h1> // 
Hello, Zane

可以使用的表达式

1. 字符串，数值，布尔值，null，undefined, object([]/{})
2. 1 + 2, ‘abc’.split(‘’), [‘a’, ‘b’].join(‘-’)
3. fn()

if语句， switch-case语句， 变量声明语句等不是表达式，不能出现在{}中

3 JSX列表渲染
页面的构建离不开列表结构
vue中使用的是vue-for，react使用的是数组的map方法

const songs = [
	{ id: 1, name: 'Melody' },
	{ id: 2, name: 'Sorry' },
	{ id: 3, name: 'Love song' }
]

function App() {
	return (
		<div className="App">
			<ul>
				{
					songs.map(item => <li>{item.name}</li>)
				}
			</ul>
		</div>
	)
}

export default App

注意需要为遍历项添加 key 属性

1. key 在HTML结构中是无法看见的，是React内部用来进行性能优化时使用
2. key 在当前列表中需要唯一的字符串或数值（String/Number）
3. 如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值
4. 如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

4 JSX条件渲染
根据是否满足条件生成HTML结构，比如Loading效果
可以使用 三元运算符 或 逻辑与运算符

const flag = true
function App() {
	return (
		<div className="App">
			{/* 条件渲染字符串*/}
			{flag ? "react" : "vue"}
			{/*条件渲染标签/组件*/}
			{flag ? <span>this is span</span> : null}
		</div>
	)
}
export default App

5 JSX样式处理
在JSX中实现css样式处理

• 行内样式

function App() {
	return (
		<div className="App">
			<div style={{ color: 'red' }}>this is a div</div>
		</div>
	)
}

export default App

• 行内样式更优写法

const styleObj = {
	color: red
}

fucntion App() {
	return (
		<div className="App">
			<div style={ styleObj }>this is a div</div>
		</div>
	)
}

export default App

• 类名（推荐）

// app.css
.title {
	font-size: 30px;
	color: blue;
}

• 动态类名控制

import './app.css'
const showTitle = true
function App() {
	return (
		<div className="App">
			<div className={ showTitle ? 'title' : ''}>this is a div</div>
		</div>
	)
}
export default App

6 JSX注意点

1. JSX必须有一个根节点，如果没有根节点，可以使用<>（幽灵节点）替代
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以（XML）
3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className for -> htmlFor
4. JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现

格式化配置

基于vscode配置格式化工具，提高开发效率

1. 安装Vscode prettier插件
2. 修改配置文件 setting.json