React教程（一）：React基础

传送门：
React教程（二）：React组件基础

一.React介绍

React是什么

  一个专注于构建用户界面的javascript库，和vue和angular并称前端三大框架，不夸张的说，react引领了很多新思想，世界范围内最流行的的js前端框架。
React英文文档：https://react.dev/learn
React中文文档：https://zh-hans.reactjs.org/learn

React有什么特点

1. 声明式UI（JSX)
   写UI就和写普通打的HTML一样，抛弃命令式的繁琐实现。
   举个例子：

   实现一个列表的UI：
   原生写法：

   for (let i = 0; i < list.length; i++) {
         
         
     const li = document.createElement("li");
     li.textContent = "我是一个li(原生写法)";
     document.getElementById("ul").appendChild(li);
   }
   

   vue写法：

   <ul >
   	<li v-for = 'item in list"> 我是vue的写法</li>
   </ul>
   

   react写法：

   <ul>
   	{
         
          list.map(item => <li>我是react写法 </li>) }
   </ul>
   

   2. 组件化
       组件是react中最重要的内容，组件可以通过搭积木的方式拼成一个完整的页面，通过组件的抽象可以增加复用能力和提高可维护性。

   3. 一次学习，跨平台编写
       react既可以开发web应用也可以使用同样的语法开发原生应用（react-native),比如安卓和ios应用，甚至可以使用react开发VR应用，想象力空间十足，react更像一个元框架为各种领域赋能。

二.环境初始化

1.使用脚手架创建项目

• 打开命令窗口

• 执行命令

  npx create-react-app react-study-2023
  

  说明：

  1. npx create-react-app 是固定命令，create-react-app是脚手架的名称

  2. react-study-2023表示项目名称，可以自定义，保持语义化

  3. npx命令会帮助我们临时安装creat-react-app包，然后初始化项目完成之后会自动删掉，所以不需要全局安装create-react-app。
     图示：
     
  • 启动项目

  tips：需要先安装node环境，不知道node的可以移步看我的node系列教程：
  https://blog.csdn.net/qq_43682422/article/details/123734146?spm=1001.2014.3001.5502

  npm start
  # or
  yarn start
  

  当然安装完成之后，智能的react会提示你这么做：
  
  先cd到创建好的项目目录中，然后使用npm start 启动项目。

  启动之后，你就会看到这样一个界面：
  

  这是react脚手架创建时官方的默认UI，你可以把它删除，编写自己的页面。

2.项目目录调整说明

• 目录说明

1. src 目录是我们写代码进行项目开发的目录
2. package.json中俩个核心库：react，react-dom

• 目录调整

1. 删除src目录下自带的所有文件（react脚手架创建时自带的），只保留app.js根组件，和index.js。
2. 创建index.js文件作为项目的入口文件，在这个文件中书写react代码即可

• 入口文件说明

// React:框架的核心包
import React from "react";
// ReactDOM: 专门做渲染相关的包
import ReactDOM from "react-dom/client";
// 该应用的全局样式
import "./index.css";
// 引入根组件
import App from "./App";

// 获取根节点
const root = ReactDOM.createRoot(document.getElementById("root"));

// 通过调用render函数渲染app根组件到id为root的dom（根节点）上。
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

额外说明：react18需要把严格模式节点 <React.StrictMode>去掉，会影响useEffect的执行时机，会让每一个useEffect执行2次（后面会解释）。
即写成：

root.render(
    <App />
);

三. JSX 基础

1.JSX介绍

概念：JSX是javascript XML（HTML)的缩写，表示在JS代码中书写HTML结构。
作用：在React中创建HTML结构（页面UI结构）
优势：
1）采用类似HTML的语法，降低学习成本，即会用HTML就会JSX
2）充分利用JS自身的可编程能力创建HTML结构
注意：JSX并不是标准的JS语法，是JS的语法扩展，浏览器默认是不识别的，脚手架中的@babel/plugin-transform-react-jsx包,用来解析该语法。
举个例子：
使用命令式语法创建UI：

const h3 = React.createElement("h1", {
    
     className: "aaa" }, "我是标题");

const list2 = React.cTreateElement(
  "ul",
  null,
  React.createElement("li", null, 111),
  React.createElement("li", null, 222),
  React.createElement("li", null, 333)
);

使用jsx语法声明式创建UI：

const h1 = <h1 className="aaa">我是标题</h1>;

const list = (
  <ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
  </ul>
);

对比之下，命令式创建较为繁琐，且嵌套关系较深的话写起来比较复杂。

注意：
jsx语法不能同时存在多个根节点，如果有必要可以用幽灵节点作为根节点（在真实页面上并不会去渲染幽灵节点）
案例1：错误用法

案例2：幽灵节点

  return (
    // <></> 是空标签（幽灵节点），在真实页面上并不会去渲染这个节点
    <>
      <div>{
    
    getUI(type)}</div> <div>222</div>
    </>
  );

2.JSX中使用js表达式

语法
{ JS 表达式}

const name = 'icy
<h1>我叫{
    
    name},空你起哇</h1>

可以使用的表达式
1.字符串、数值、布尔值、null、undefined、object（[ ] / { })
2. 1 + 2、’abc’.split(‘’), [‘a’,‘b’].join(‘-’)
3. fn()

特别注意
if语句/switch-case语句/变量声明语句，这些叫做语句，不是表达式，不能出现在{ }中！！！

以下的操作达咩：

3.JSX列表渲染

页面的构建离不开重复的列表结构，比如歌曲列表，商品列表，我们知道vue中使用的是v-for, react这边使用数组的map方法。

 const list = [
    {
    
     id: "1", name: "icy" },
    {
    
     id: "2", name: "icy2号" },
    {
    
     id: "3", name: "icy3号" },
  ];
  return (
    <div className="App">
      {
    
    list.map((item) => {
    
    
        return (
          <div>
            {
    
    item.id}:{
    
    item.name}
          </div>
        );
      })}
    </div>
  );

4. JSX条件渲染

作用：根据是否满足条件生成HTML结构，比如Loading效果。
实现：可以使用三元表达式或者逻辑与&&运算符
例子：
逻辑与&&

 const flag = true;
 return flag && <div className="App">flag为true时才可见</div>;

三元表达式：

  const flag = true;
  return flag ? (
    <div className="App">flag为true时才可见</div>
  ) : (
    <div className="App">flag为flase时才可见</div>
  );

注意：
jsx模板精简原则，如果分支只有一个或者两个，使用逻辑与&&或者三目运算符没有问题，但如果分支有多个，则建议写成函数的形式去处理多种分支。不建议三目运算符多重嵌套，不符合eslint语法规则。
例子：
案例1：使用函数处理多种分支

  let type = "1";
  const getUI = (type) => {
    
    
    if (type === "1") return <div>111</div>;
    else if (type === "2") return <div>222</div>;
    else if (type === "3") return <div>333</div>;
    // 加上这一行避免eslint的warning，确保所有分支都有返回值
    else return null;
  };
  // 外层div是jsx语法的根节点，每一个jsx有且只有一个根节点
  return <div>{
    
    getUI(type)}</div>;

案例2: 比较取巧的做法

return <div>
      {
    
    type === "1" && <div>111</div>}
      {
    
    type === "2" && <div>222</div>}
      {
    
    type === "3" && <div>333</div>}
	</div>

案例3：不建议多重嵌套三元运算符（极其不建议）

return <div>
      {
    
    type === "1" ? (
        <div>111</div>
      ) : type === "2" ? (
        <div>222</div>
      ) : (
        <div>3333</div>
      )}
      </div>

5. JSX样式处理

• 行内样式 style
  注意是双括号，第一层括号是jsx解析语法的{}，第二层括号表示一个装有设置style属性的对象。

function App() {
    
    
  return (
    <div>
      <div style={
    
    {
    
     color: "red" }}>11111</div>
    </div>
  );
}

• 行内样式，更优的写法（把样式单独抽出来）。

function App() {
    
    
  const divStyle = {
    
    
    color: "red",
    lineHeight: "24px",
  };
  return (
    <div>
      <div style={
    
    divStyle}>11111</div>
    </div>
  );
}

• 类名样式
  在元素上家一个className即可，注意是className，不是class！！！

• 动态类名控制
  1）可以使用三元表达式

const changeColor = true
--------
<div className={
    
    changeColor?'red-color':''}>icy is godlike</div>

2. 也可以使用classnames插件
   大家可以了解一下classnames插件的用法，这里就简单的列举一种通用的使用方法，有很多种写法哈。
   安装：

npm i classnames

// 导入
import classNames from 'classnames'

---------
// 通用写法使用
   <div
      className={
    
    classNames({
    
    
        "red-color": changeColor,
      })}
    >
      icy is godlike{
    
    " "}
    </div>

6. JSX 注意事项

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

四.格式化配置

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

1.推荐安装的插件

可以看看我的这篇文章，vscode常用插件记录：https://blog.csdn.net/qq_43682422/article/details/129711512?spm=1001.2014.3001.5501

2.vscode prettier插件配置

修改配置文件 setting.json
vscode左下角打开设置

我把我的配置粘贴一份。
如果想了解每个配置具体干什么用，可自行百度搜索学习。

{
    
    
 "workbench.colorTheme": "Default Dark+",
 "appworks.materialSources": [],
 "[typescriptreact]": {
    
    
   "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
 },
 "[json]": {
    
    
   "editor.defaultFormatter": "vscode.json-language-features"
 },
 "[less]": {
    
    
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "scm.inputFontSize": 15,
 "debug.console.fontSize": 15,
 "markdown.preview.fontSize": 15,
 "terminal.integrated.fontSize": 14,
 "editor.fontSize": 13,
 "[javascript]": {
    
    
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[typescript]": {
    
    
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "editor.formatOnSave": true,
 "path-intellisense.autoTriggerNextSuggestion": true,
 "emmet.triggerExpansionOnTab": true,
 "[jsonc]": {
    
    
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[html]": {
    
    
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[scss]": {
    
    
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "eslint.execArgv": null,
 "eslint.validate": [
   "javascript",
   "javascriptreact",
   "typescript",
   "typescriptreact"
 ],
 "editor.codeActionsOnSave": {
    
    
   "source.fixAll.eslint": true
 },
 "[css]": {
    
    
   "editor.defaultFormatter": "stylelint.vscode-stylelint"
 },
 "editor.semanticTokenColorCustomizations": {
    
    
   
 }
}