React基础[一]:React入门

1、什么是React

React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook(现Meta) 开发和维护，并在2013年开源。React 的设计初衷是帮助开发者构建复杂的用户界面，同时保持代码的可维护性和可扩展性。

2、React的特点

2.1 组件化

React 通过将 UI 分解为独立的、可重用的组件，使得代码更易于管理和维护。每个组件只关注于自身的逻辑和视图。

2.2 声明式编程

React 采用声明式的编程风格，开发者只需描述 UI 应该是什么样子的，而不需要手动操作 DOM。React 会根据数据的变化自动更新 UI。

2.3 虚拟DOM

React 使用虚拟 DOM（Virtual DOM）来优化 UI 的更新过程。当数据发生变化时，React 会创建一个新的虚拟 DOM，然后将其与之前的虚拟 DOM 进行比较，找出最小的变化，并将这些变化应用到实际的 DOM 中，从而提高性能。

2.4 单向数据流

React 采用单向数据流（也称为单向数据绑定），这意味着数据在组件之间通过 props 进行传递，使得数据的流动更加清晰和可预测。

2.5 生态系统

React 有一个庞大且活跃的社区，提供了大量的第三方库和工具，如 React Router（用于路由管理）、Mobx/zustand/jotai/Redux（用于状态管理）等，帮助开发者构建复杂的应用。

3、前置知识

你必须学会以下知识才能使用 React:

• JavaScript(es6+)
• HTML
• CSS
• TypeScript(基本使用) Typescript教程
• Npm包管理器

4、开发环境搭建

4.1 安装环境准备

• node.js 下载地址：https://nodejs.org/en 建议安装18以上版本，或者使用nvm管理node版本
• vsocde编辑器(如果安装过了请略过|或者喜欢其他编辑器) https://code.visualstudio.com/
• vscode插件安装 可选 (Simple React Snippets)

• 选择一个目录，然后运行以下命令：pnpm create vite
• 执行完成之后会让你输入项目名称 例如 react-demo
• 接下来会让你选择一个框架 这时候选择 react
• 然后选择 TypeScript + SWC 如果你不会ts就选择js

4.2 目录介绍

• node_modules 依赖文件
• public 公共目录
• src
  • assets 静态资源
  • App.css 根组件样式
  • App.tsx 根组件
  • index.css 全局css文件
  • main.tsx 全局tsx文件
  • vite-env.d.ts 声明文件
• .eslintrc.cjs eslint配置文件
• .gitignore git忽略文件
• index.html 入口文件index.html
• package.json 项目依赖模块文件
• tsconfig.json ts配置文件
• tsconfig.node.json vite-ts配置文件
• vite.config.ts vite配置文件

lock.json 锁版本号，做缓存：

vite-env.d.ts 说明； /// <reference types="vite/client" />
这个是三斜线指令 这个是引入一些声明的， 到底是什么意思，
比如说：举例 在main.tsx 引入一张图片，
做了各种文件的 文件声明， 各种图片 。。。。
ts本身是不认识的。 需要这个文件 让ts认识。 vite帮我们写好了 减少我们的开发心智负担。

介绍 src 目录下的main.tsx-----里面的代码:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

document.getElementById('root')!这个的内容都会放到我们的 index.html里面。
<div id=root></div>存储了整个app的组件 ----看app.tsx组件里面的内容。
document.getElementById('root')! 感叹号是什么意思？ 去掉！看一下。
这样写比较方便
如果不这样写呢，就比较麻烦 ， 就得加上if else判断
<StrictMode>这个是严格模式。

4.3 命令介绍(package.json)

json:

"dev": "vite",//启动开发模式项目
"build": "tsc && vite build", //打包构建生产包
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",//代码检查
"preview": "vite preview" //预览模式

eslint命令详解

eslint .：对当前目录（以及子目录）中的文件运行 ESLint。
--ext ts,tsx：指定要检查的文件扩展名为 .ts 和 .tsx，即 TypeScript 和 TypeScript React 文件。
--report-unused-disable-directives：报告未使用的 eslint-disable 指令。这可以帮助你清理不再需要的 ESLint 禁用指令。
--max-warnings 0：将警告数量限制为 0。如果有任何警告，ESLint 将返回非零退出代码，这通常用于在 CI/CD 环境中确保代码库没有任何警告。

4.4 其它问题

4.4.1 public公共目录和assets静态资源有什么区别

答：public目录的资源编译之后会存放到根目录，而静态资源assets是会随着项目一起打包的，public则不会被编译。
举例说明一下 在public下 创建一个data.json文件 , 启动一下， 访问data.json文件
为什么可以直接访问呢？, 编译完成后会放到我们文件的根目录 也就是打包后的根目录 assets就不会。

4.4.2 为什么main.tsx的document.getElementById(‘root’)!要加一个!

答：因为document.getElementById(‘root’)返回可能为空，这时候就会报错。!是非空断言，告诉编辑器这个表达式不会为空。