一文掌握React基础用法：从零开始构建现代Web应用

1. React简介

React 是由Facebook开发的一款用于构建用户界面的JavaScript库，专注于组件化开发，帮助开发者高效构建动态、高性能的Web应用。
核心特点：

组件化：将UI拆分为独立、可复用的组件。
虚拟DOM：优化渲染性能，减少直接操作真实DOM的开销。
声明式编程：通过描述"UI应该是什么样子"简化代码逻辑。

2. 开发环境搭建

2.1 使用Create React App（CRA）

Create React App是官方推荐的脚手架工具，快速生成React项目模板：

bash

复制

perl 复制代码

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

项目启动后，访问 http://localhost:3000 查看效果。

2.2 项目目录结构

复制

csharp 复制代码

my-app/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── App.js       # 根组件
│   ├── index.js     # 入口文件
├── package.json

3. JSX语法

JSX（JavaScript XML）是React的核心语法，允许在JavaScript中编写类似HTML的结构。

jsx

复制

ini 复制代码

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

注意事项：

使用 className 代替 class。
标签必须闭合，如 <img />。
内联样式使用对象：style={{ color: 'red' }}。

4. 组件开发

4.1 函数组件

jsx

复制

javascript 复制代码

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

4.2 类组件

jsx

复制

scala 复制代码

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

现代React推荐使用函数组件+Hooks。

5. 状态管理：useState

使用 useState Hook管理组件内部状态：

jsx

复制

javascript 复制代码

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

6. 事件处理

React事件使用驼峰命名法（如 onClick），传递函数而非字符串：

jsx

复制

javascript 复制代码

function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click Me</button>;
}

7. Props：组件通信

通过Props（属性）向子组件传递数据：

jsx

复制

javascript 复制代码

// 父组件
function App() {
  return <Welcome name="Alice" />;
}

// 子组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

8. 生命周期与副作用：useEffect

useEffect 用于处理副作用（如数据请求、DOM操作）：

jsx

复制

javascript 复制代码

import { useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]); // 依赖项：userId变化时重新执行

  return <div>{user ? user.name : 'Loading...'}</div>;
}

9. 列表渲染与条件渲染

9.1 列表渲染

使用 map 遍历数组生成元素：

jsx

复制

javascript 复制代码

function TodoList() {
  const todos = ['Learn React', 'Write Code', 'Deploy App'];

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

注意：必须为每个列表项添加唯一的 key。

9.2 条件渲染

jsx

复制

javascript 复制代码

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
    </div>
  );
}

10. React Router：实现页面导航

安装React Router：

bash

复制

复制代码

npm install react-router-dom

基础路由配置：

jsx

复制

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>
  );
}

11. 状态管理进阶：Context API

跨组件共享状态：

jsx

复制

javascript 复制代码

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

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

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Current Theme: {theme}</div>;
}

12. 示例项目：待办事项应用

jsx

复制

javascript 复制代码

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { id: Date.now(), text: input }]);
      setInput('');
    }
  };

  return (
    <div>
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

13. 总结与学习资源

官方文档 ：React官方文档
推荐教程：
- 免费教程：Codecademy的React课程
- 书籍：《React设计模式与最佳实践》
社区支持：Stack Overflow、GitHub Issues

掌握React的核心概念后，可以进一步学习：

状态管理库：Redux、MobX
服务端渲染：Next.js
静态站点生成：Gatsby

通过本文，您已经掌握了React的基础用法。动手实践是学习的关键，尝试构建自己的项目以加深理解！