React 组件化开发:从项目创建到组件通信

一、React 项目创建

1. 使用 Vite 创建 React 项目

csharp 复制代码
npm init vite

2. 选择配置

  • 输入项目名称
  • 选择框架:React
  • 选择语言:JavaScript

3. 进入项目目录并安装依赖

bash 复制代码
cd 项目名
npm i

4. 启动开发服务器

arduino 复制代码
npm run dev

二、React 组件基础

组件结构

javascript 复制代码
import React from 'react';

function MyComponent(props) {
  return (
    <div className="component">
      <p>这是一个React组件</p>
    </div>
  );
}

export default MyComponent;

组件特点:

  1. 组合性:组合 HTML、CSS 和 JavaScript
  2. 复用性:可在多个地方重复使用
  3. 独立性:拥有自己的状态和逻辑
  4. 可测试性:便于单元测试

三、响应式数据管理:useState

基本用法

javascript 复制代码
import React, { useState } from 'react';

function Counter() {
  // 声明状态变量和更新函数
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
      <button onClick={() => setCount(count - 1)}>
        减少
      </button>
    </div>
  );
}

export default Counter;

useState 特点:

  1. 状态隔离:每个组件实例有独立状态

  2. 异步更新:状态更新是异步的

  3. 函数式更新:支持基于前一个状态更新

    ini 复制代码
    setCount(prevCount => prevCount + 1);

四、组件间通信

1. 父组件向子组件传递数据(Props)

javascript 复制代码
// 父组件
function Parent() {
  const [message, setMessage] = useState('来自父组件的问候');

  return (
    <div>
      <Child message={message} />
    </div>
  );
}

// 子组件
function Child(props) {
  return <p>{props.message}</p>;
}

七、完整示例:TodoList 应用

ini 复制代码
import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div className="todo-app">
      <h1>Todo List</h1>
      
      <TodoInput 
        value={inputValue}
        onChange={setInputValue}
        onAdd={addTodo}
      />
      
      <TodoList 
        todos={todos} 
        onRemove={removeTodo} 
      />
    </div>
  );
}

function TodoInput({ value, onChange, onAdd }) {
  return (
    <div className="todo-input">
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder="添加新任务..."
      />
      <button onClick={onAdd}>添加</button>
    </div>
  );
}

function TodoList({ todos, onRemove }) {
  return (
    <ul className="todo-list">
      {todos.map((todo, index) => (
        <TodoItem 
          key={index} 
          text={todo} 
          onRemove={() => onRemove(index)} 
        />
      ))}
    </ul>
  );
}

function TodoItem({ text, onRemove }) {
  return (
    <li className="todo-item">
      <span>{text}</span>
      <button onClick={onRemove}>删除</button>
    </li>
  );
}

export default TodoApp;

结语

React 组件化思想是现代前端开发框架的核心思想。模块化将任务分离,一个文件一个模块(组件),最后将组件组合在一起,完成页面开发。

相关推荐
伍哥的传说6 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
前端小盆友12 小时前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js
Cacciatore->14 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~14 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
贵沫末14 小时前
React——基础
前端·react.js·前端框架
爱学习的茄子14 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
10年前端老司机15 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
sophie旭15 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
轻语呢喃15 小时前
React智能前端:从零开始写的图片分析页面实战
前端·react.js·aigc