【react】基础教程

目录

[一、React 简介](#一、React 简介)

二、环境搭建

[1. 创建 React 项目](#1. 创建 React 项目)

[2. 项目结构](#2. 项目结构)

三、核心概念

[1. JSX 语法](#1. JSX 语法)

[2. 组件 (Component)](#2. 组件 (Component))

[3. 状态 (State) 与属性 (Props)](#3. 状态 (State) 与属性 (Props))

[4. 事件处理](#4. 事件处理)

[5. 条件渲染](#5. 条件渲染)

[6. 列表渲染](#6. 列表渲染)

四、Hooks(函数组件的核心)

[1. useState](#1. useState)

[2. useEffect](#2. useEffect)

[3. 其他常用 Hooks](#3. 其他常用 Hooks)

五、组件通信

[1. 父传子:通过 Props](#1. 父传子:通过 Props)

[2. 子传父:通过回调函数](#2. 子传父:通过回调函数)

[六、路由管理(使用 React Router)](#六、路由管理(使用 React Router))

[1. 安装](#1. 安装)

[2. 基础配置](#2. 基础配置)

[七、状态管理(使用 Context API)](#七、状态管理(使用 Context API))

[1. 创建 Context](#1. 创建 Context)

八、进阶学习方向

九、官方资源


一、React 简介

React 是一个用于构建用户界面的 JavaScript 库(专注于视图层),由 Facebook 开发。其核心特性包括:

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

虚拟 DOM:高效更新界面,优化性能。

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

二、环境搭建

1. 创建 React 项目

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

复制代码
npx create-react-app my-app
cd my-app
npm start
2. 项目结构
复制代码
my-app/
  ├── public/          # 静态资源
  ├── src/             # 源代码
  │    ├── App.js      # 根组件
  │    └── index.js    # 入口文件
  └── package.json     # 依赖配置

三、核心概念

1. JSX 语法

JSX 是 JavaScript 的语法扩展,允许在 JavaScript 中编写类似 HTML 的结构:

复制代码
const element = <h1>Hello, React!</h1>;
2. 组件 (Component)

函数组件(推荐):

javascript 复制代码
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件

javascript 复制代码
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
3. 状态 (State) 与属性 (Props)

Props:父组件传递给子组件的数据(只读)。

State :组件内部管理的动态数据(通过 useStatesetState 更新)。

javascript 复制代码
function Counter() {
  const [count, setCount] = useState(0); // 使用 useState Hook

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}
4. 事件处理
javascript 复制代码
<button onClick={() => alert('Clicked!')}>Click Me</button>
5. 条件渲染
javascript 复制代码
function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Login.</h1>;
}
6. 列表渲染

使用 map()key 属性:

javascript 复制代码
function TodoList() {
  const todos = ['Learn React', 'Build a Project', 'Deploy'];
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

四、Hooks(函数组件的核心)

1. useState

管理组件状态:

javascript 复制代码
const [state, setState] = useState(initialValue);
2. useEffect

处理副作用(如数据请求、DOM 操作):

javascript 复制代码
useEffect(() => {
  // 组件挂载或更新时执行
  fetchData();
  return () => {
    // 组件卸载时清理(如取消订阅)
  };
}, [dependencies]); // 依赖数组控制执行时机
3. 其他常用 Hooks

useContext:访问 React 上下文。

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

useReducer:复杂状态管理。

五、组件通信

1. 父传子:通过 Props
javascript 复制代码
function Parent() {
  return <Child message="Hello from Parent" />;
}

function Child({ message }) {
  return <p>{message}</p>;
}
2. 子传父:通过回调函数
javascript 复制代码
function Parent() {
  const handleChildClick = (data) => {
    console.log('Child sent:', data);
  };
  return <Child onClick={handleChildClick} />;
}

function Child({ onClick }) {
  return <button onClick={() => onClick('Data from Child')}>Click</button>;
}

六、路由管理(使用 React Router)

1. 安装
javascript 复制代码
npm install react-router-dom
2. 基础配置
javascript 复制代码
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

七、状态管理(使用 Context API)

1. 创建 Context
javascript 复制代码
const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme }}>Themed Button</button>;
}

八、进阶学习方向

  1. 性能优化React.memo, useMemo, useCallback

  2. 状态管理库:Redux, MobX

  3. 服务端渲染:Next.js

  4. UI 库:Material-UI, Ant Design

九、官方资源

通过实践小项目(如 Todo List、博客系统)巩固知识,逐步深入复杂应用开发!

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

相关推荐
颜渊呐3 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机15 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星16 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构18 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚19 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin20 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang45321 分钟前
React项目(移动app)
前端
用户618482402195122 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队34 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
安替-AnTi1 小时前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林