React入门指南：从零开始构建你的第一个应用

遂心_
72 阅读4分钟

本文专为React初学者设计，将带你全面了解React的核心概念并动手实践构建一个简单的任务管理器应用。

文章大纲

  1. React简介：React是什么，为什么它如此受欢迎
  2. 核心概念：组件、JSX、状态和属性
  3. 环境搭建：使用Create React App快速开始
  4. 实战项目：构建一个任务管理器应用
  5. 进阶之路：下一步学习建议

完整代码实现

import React, { useState } from 'react';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([
    { id: 1, text: '学习React基础知识', completed: true },
    { id: 2, text: '创建一个React应用', completed: false },
    { id: 3, text: '在掘金分享React经验', completed: false }
  ]);
  
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim() === '') return;
    
    const task = {
      id: Date.now(),
      text: newTask,
      completed: false
    };
    
    setTasks([...tasks, task]);
    setNewTask('');
  };

  const toggleTask = (id) => {
    setTasks(tasks.map(task => 
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  const completedTasks = tasks.filter(task => task.completed).length;
  const totalTasks = tasks.length;

  return (
    <div className="app">
      <header className="app-header">
        <h1>React任务管理器</h1>
        <p>已完成: {completedTasks} / 总数: {totalTasks}</p>
      </header>
      
      <div className="task-form">
        <input
          type="text"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          placeholder="添加新任务..."
          onKeyPress={(e) => e.key === 'Enter' && addTask()}
        />
        <button onClick={addTask}>添加</button>
      </div>
      
      <div className="task-list">
        {tasks.length === 0 ? (
          <div className="empty-state">🎉 没有任务，添加一个新任务吧！</div>
        ) : (
          tasks.map(task => (
            <div 
              key={task.id} 
              className={`task-item ${task.completed ? 'completed' : ''}`}
            >
              <input
                type="checkbox"
                checked={task.completed}
                onChange={() => toggleTask(task.id)}
              />
              <span>{task.text}</span>
              <button 
                className="delete-btn"
                onClick={() => deleteTask(task.id)}
              >
                ×
              </button>
            </div>
          ))
        )}
      </div>
      
      <footer className="app-footer">
        <p>React初学者指南 · 在掘金分享你的学习经验</p>
      </footer>
    </div>
  );
}

export default App;

/* App.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  min-height: 100vh;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.app-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #61dafb;
}

.app-header h1 {
  color: #282c34;
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.task-form {
  display: flex;
  margin-bottom: 20px;
}

.task-form input {
  flex: 1;
  padding: 12px 15px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.task-form input:focus {
  border-color: #61dafb;
  outline: none;
}

.task-form button {
  background-color: #61dafb;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12px 20px;
  margin-left: 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.task-form button:hover {
  background-color: #4fc3f7;
}

.task-list {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.task-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

.task-item:hover {
  background-color: #f5f5f5;
}

.task-item.completed {
  background-color: #f8f9fa;
}

.task-item.completed span {
  text-decoration: line-through;
  color: #999;
}

.task-item input[type="checkbox"] {
  margin-right: 15px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.task-item span {
  flex: 1;
  font-size: 18px;
}

.delete-btn {
  background: none;
  border: none;
  color: #ff6b6b;
  font-size: 24px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.delete-btn:hover {
  opacity: 1;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #888;
  font-size: 18px;
}

.app-footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  color: #888;
  font-size: 14px;
  border-top: 1px solid #eee;
}

@media (max-width: 480px) {
  .app {
    padding: 15px;
  }
  
  .app-header h1 {
    font-size: 2rem;
  }
  
  .task-form {
    flex-direction: column;
  }
  
  .task-form button {
    margin-left: 0;
    margin-top: 10px;
  }
}

React核心概念解析

1. 组件化开发

React应用由组件构成，每个组件负责UI的一部分。组件可以复用，使代码更易维护。

2. JSX语法

JSX是JavaScript的语法扩展，允许在JavaScript中编写类似HTML的代码，使UI代码更直观。

3. 状态(State)管理

使用useState钩子管理组件内部状态，状态变化时组件会自动重新渲染。

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

4. 属性(Props)

组件之间通过props传递数据，实现组件通信。

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

5. 虚拟DOM

React使用虚拟DOM来提高性能，只更新实际发生变化的部分。

学习建议

  1. 官方文档：React官方文档是学习的最佳起点

  2. 动手实践：通过构建小项目巩固所学知识

  3. 掘金社区：关注React标签，阅读优质文章

  4. 学习路线：

    • React基础(组件、JSX、状态管理)
    • React Hooks
    • 路由(React Router)
    • 状态管理(Redux/Zustand)
    • 服务端渲染(Next.js)

结语

React作为现代前端开发的三大框架之一，拥有强大的生态系统和活跃的社区。通过本文的学习，你已经掌握了React的核心概念并完成了第一个应用的开发。

avatar
文章
阅读
粉丝