【react】快速上手基础教程

目录

一、React 简介

1.什么是 React

 2.React 核心特性

二、环境搭建

1. 创建 React 项目

2.关键配置

三、核心概念

1. JSX 语法

表达式嵌入

样式处理

2. 组件 (Component)

3. 状态 (State) 与属性 (Props)

4. 事件处理

合成事件（SyntheticEvent)

5. 条件渲染

三元表达式

短路运算

6. 列表渲染

四、Hooks（函数组件的核心）

1. useState

基础用法

复杂对象管理

2. useEffect

3. 其他常用 Hooks

五、组件通信

1. 父传子：通过 Props

2. 子传父：通过回调函数

六、路由管理（使用 React Router）

1. 安装

2. 基础配置

七、状态管理（使用 Context API）

1. 创建 Context

八、进阶学习方向

九、官方资源

---

本文案例代码是TypeScript+React

一、React 简介

1.什么是 React

     React 是一个用于构建用户界面的 JavaScript 库（专注于视图层），由 Facebook 开发。

         声明式UI、组件化开发、虚拟DOM原理。

         React vs Vue vs Angular：生态与设计哲学对比。

 2.React 核心特性

   单向数据流、JSX、函数式编程思想。 跨平台能力（React Native、React VR）。

        组件化：将 UI 拆分为独立可复用的组件。

        虚拟 DOM：高效更新界面，优化性能。

        声明式编程：通过描述 UI 的最终状态，而非具体操作步骤。

二、环境搭建

1. 创建 React 项目

Create React App（官方脚手架）

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

  Vite（更轻量快速）：

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

使用官方脚手架工具 create-react-app 快速初始化项目：

npx create-react-app my-app
cd my-app
npm start

项目结构解析 

my-app/src/components/  # 组件目录App.tsx      # 根组件index.tsx    # 入口文件public/        # 静态资源package.json

2.关键配置

路径别名（tsconfig.json）：

{"compilerOptions": {"baseUrl": "./src","paths": {"@/*": ["./*"]}}
}

三、核心概念

1. JSX 语法

JSX 是 JavaScript 的语法扩展，JSX本质：React.createElement的语法糖

表达式嵌入

const name = 'Alice';
const element = <h1>Hello, React!</h1>;

样式处理

<div style={{ color: 'red', fontSize: 20 }}>Styled Text</div>

2. 组件 (Component)

函数组件（推荐）：

interface Props {title: string;
}
const Header: React.FC<Props> = ({ title }) => <h1>{title}</h1>;

类组件：

class Counter extends React.Component<{}, { count: number }> {state = { count: 0 };render() { return <div>{this.state.count}</div>; }
}

3. 状态 (State) 与属性 (Props)

Props：父组件传递给子组件的数据（只读）。

// 父组件
<Child title="Hello" />
// 子组件
interface ChildProps { title: string; }
const Child: React.FC<ChildProps> = ({ title }) => <div>{title}</div>;

State：组件内部管理的动态数据（通过 useState 或 setState 更新）。

const [count, setCount] = useState(0);

4. 事件处理

<button onClick={() => alert('Clicked!')}>Click Me</button>

合成事件（SyntheticEvent)

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {e.preventDefault();console.log('Clicked');
};
<button onClick={handleClick}>Click</button>

5. 条件渲染

三元表达式

{ isLoggedIn ? <UserPanel /> : <LoginButton /> }

短路运算

{ isLoading && <Spinner /> }

6. 列表渲染

key的重要性（避免重复渲染问题）

使用 map() 和 key 属性：

const items = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
return (<ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
);

四、Hooks（函数组件的核心）

1. useState

基础用法

const [count, setCount] = useState<number>(0);
setCount(prev => prev + 1);

复杂对象管理

interface User { name: string; age: number; }
const [user, setUser] = useState<User>({ name: 'Alice', age: 30 });

2. useEffect

副作用处理（数据请求，事件监听）；

useEffect(() => {const timer = setInterval(() => console.log('Tick'), 1000);return () => clearInterval(timer); // 清理函数
}, []); // 空依赖数组表示仅执行一次

依赖数据控制更新：

useEffect(() => {// 组件挂载或更新时执行fetchData(userId);return () => {// 组件卸载时清理（如取消订阅）};
}, [userId]); // 依赖数组控制执行时机

3. 其他常用 Hooks

useContext（跨组件通信）：访问react上下文

const ThemeContext = createContext('light');
const theme = useContext(ThemeContext);

useRef：获取DOM引用或保存可变值。

const inputRef = useRef<HTMLInputElement>(null);
inputRef.current?.focus();

useMemo/useCallback：性能优化

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

useReducer：复杂状态管理。

五、组件通信

1. 父传子：通过 Props

传递复杂对象

interface ParentProps { user: { id: number; name: string }; }
const Parent = () => <Child user={{ id: 1, name: 'Alice' }} />;

2. 子传父：通过回调函数

定义回调

const Child = ({ onSubmit }: { onSubmit: (data: string) => void }) => {return <button onClick={() => onSubmit('Data')}>Submit</button>;
};

六、路由管理（使用 React Router）

1. 安装

npm install react-router-dom

2. 基础配置

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const App = () => (<BrowserRouter><Routes><Route path="/" element={<Home />} /><Route path="/user/:id" element={<UserProfile />} /></Routes></BrowserRouter>
);

七、状态管理（使用 Context API）

1. 创建 Context

// ThemeContext.tsx
import { createContext, useContext } from 'react';
interface ThemeContextType { theme: string; toggleTheme: () => void; }
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);// Provider 组件
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {const [theme, setTheme] = useState('light');const toggleTheme = () => setTheme(prev => (prev === 'light' ? 'dark' : 'light'));return (<ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>);
};// 自定义 Hook
export const useTheme = () => {const context = useContext(ThemeContext);if (!context) throw new Error('useTheme must be used within ThemeProvider');return context;
};

八、进阶学习方向

1. 性能优化：React.memo、useMemo、useCallback、代码分割（lazy + Suspense）。

2. 状态管理库进阶：Redux, Toolkit、Recoil、Zustand

3. 服务端渲染（SSR)：Next.js框架集成

4. UI 库：Material-UI, Ant Design

5. 测试：Jest + React Testing Library、Cypress E2E 测试

九、官方资源

1. 文档

• React 官方文档（最新特性与最佳实践）。
• React 中文文档

     2.社区

• React GitHub、Reactiflux Discord。

     3.工具链

• Create React App

码字不易，欢迎各位大佬点赞