React知识点梳理

注：纯手打，如有错误欢迎评论区交流！
转载请注明出处：https://blog.csdn.net/testleaf/article/details/148403372
编写此文是为了更好地学习前端知识，如果损害了有关人的利益，请联系删除！
本文章将不定时更新，敬请期待！！！
欢迎点赞、收藏、转发、关注，多谢！！！

一、React开发环境搭建

1、必备工具安装

Node.js：
作用：提供npm/yarn包管理工具和运行JavaScript的环境
下载：Node.js官网
验证安装：

node -v  # 检查Node版本
npm -v   # 检查npm版本

代码编辑器：
推荐：VS Code（安装插件：ES7+ React/Redux、Prettier、ESLint）

2、创建React项目​

方式1：使用Create React App（CRA，官方推荐）​

npx create-react-app my-app  # 创建项目
cd my-app                   # 进入项目目录
npm start                   # 启动开发服务器

特点​​：
零配置，内置Babel、Webpack、ESLint等工具
适合新手和快速原型开发
方式2：使用Vite（更快的现代构建工具）​

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

优势​​：启动和热更新速度极快，适合大型项目。
方式3：手动配置Webpack（进阶）​
适合需要深度定制化的项目，需自行配置Babel、Loader等（不推荐新手）。

3、项目目录结构（CRA生成）

my-app/
├── node_modules/    # 依赖库
├── public/          # 静态资源（HTML模板、图片等）
│   └── index.html   # 主HTML文件
├── src/             # 源码目录
│   ├── App.js       # 根组件
│   ├── index.js     # 入口文件
│   └── styles/      # CSS文件
├── package.json     # 项目配置和依赖
└── README.md

4、关键依赖说明​

• ​​react​​ & ​​react-dom​​：React核心库和DOM渲染库
• ​​react-scripts​​（CRA）：封装了Webpack/Babel配置
• ​​其他常用库​​：
  • 路由：react-router-dom
  • 状态管理：redux / zustand
  • UI组件库：Material-UI / Ant Design

5、开发与构建命令​

命令	作用
npm start	启动开发服务器（默认3000端口）
npm run build	生成生产环境优化代码（在build/目录）
npm test	运行Jest测试
npm run eject	暴露CRA配置（不可逆操作）

6、常见问题解决

端口冲突​​：
修改启动端口

PORT=3001 npm start

依赖安装慢​​：
查看当前 npm 镜像源​

npm config get registry

检查所有 npm 配置（包括镜像源、全局安装路径等）

npm config list

切换npm镜像源

npm config set registry https://registry.npmmirror.com

恢复为官方源​​

npm config set registry https://registry.npmjs.org

临时使用镜像源（单次安装）

npm install 包名 --registry=https://registry.npmmirror.com

常见镜像源地址​

镜像源名称	地址
npm官方源	https://registry.npmjs.org/
淘宝镜像	https://registry.npmmirror.com/
腾讯云镜像	https://mirrors.cloud.tencent.com/npm/

React版本升级​​：

npm install react@latest react-dom@latest

7、创建React项目【TypeScript版】

方法 1：使用 create-react-app（CRA，官方推荐）​
创建项目：

npx create-react-app my-app --template typescript

或（旧版 CRA）：

npx create-react-app my-app --typescript

项目结构：

my-app/
├── src/
│   ├── App.tsx       # TypeScript 组件
│   ├── index.tsx     # TypeScript 入口文件
│   └── react-app-env.d.ts  # React 类型声明
├── tsconfig.json     # TypeScript 配置
└── package.json

启动项目：

cd my-app
npm start

访问 http://localhost:3000 查看运行效果。
方法 2：使用 Vite（推荐，速度更快）
创建项目​：

npm create vite@latest my-react-ts-app --template react-ts

或使用 yarn：

yarn create vite my-react-ts-app --template react-ts

项目结构：

my-react-ts-app/
├── src/
│   ├── App.tsx
│   ├── main.tsx      # 入口文件
│   └── vite-env.d.ts # Vite 类型声明
├── tsconfig.json
├── vite.config.ts    # Vite 配置
└── package.json

安装依赖并启动：

cd my-react-ts-app
npm install
npm run dev

访问 http://localhost:5173（Vite 默认端口）。
方法 3：手动配置（Webpack + TypeScript）​​
适用于需要深度定制的项目（不推荐新手）。
初始化项目​：

mkdir my-react-ts-project
cd my-react-ts-project
npm init -y

安装依赖​：

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

配置 tsconfig.json：

{"compilerOptions": {"target": "ES6","module": "ESNext","jsx": "react-jsx","strict": true,"esModuleInterop": true,"skipLibCheck": true},"include": ["src/**/*"]
}

配置 webpack.config.js：

const path = require("path");module.exports = {entry: "./src/index.tsx",output: {filename: "bundle.js",path: path.resolve(__dirname, "dist"),},resolve: {extensions: [".tsx", ".ts", ".js"],},module: {rules: [{test: /\.(ts|tsx)$/,exclude: /node_modules/,use: "babel-loader",},],},devServer: {static: path.join(__dirname, "dist"),port: 3000,},
};

创建 src/index.tsx：

import React from "react";
import ReactDOM from "react-dom/client";const App = () => <h1>Hello, React + TypeScript!</h1>;ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

启动开发服务器​：

npx webpack serve --mode development

二、JSX基础

JSX（JavaScript XML）是 React 的核心语法，它允许在 JavaScript 中编写类似 HTML 的代码，用于定义 React 组件的结构。

1、JSX 是什么？​

JSX = JavaScript + XML​​，是一种语法扩展。
它会被 Babel 转译为 React.createElement() 调用，最终生成 JavaScript 对象（虚拟 DOM）。
​​示例​​：

const element = <h1>Hello, JSX!</h1>;

编译后：

const element = React.createElement("h1", null, "Hello, JSX!");