一个React前端框架的实际案例

以下是一个React前端框架的实际案例，用于构建一个简单的待办事项列表应用程序：

1. 创建项目： 使用Create React App工具创建新的React项目。

npx create-react-app todo-list
cd todo-list

1. 清理项目： 删除不必要的文件和代码，保留src目录并清空其内容。

2. 创建组件： 在src目录下创建以下组件文件。

• TodoList.js： 渲染待办事项列表的主组件。

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

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

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

  const handleDeleteTodo = (index) => {
    const updatedTodos = todos.filter((todo, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <TodoItem key={index} todo={todo} onDelete={() => handleDeleteTodo(index)} />
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

• TodoItem.js： 渲染单个待办事项的组件。

import React from 'react';

const TodoItem = ({ todo, onDelete }) => {
  return (
    <li>
      {todo}
      <button onClick={onDelete}>Delete</button>
    </li>
  );
};

export default TodoItem;

1. 渲染应用程序： 在src目录下创建index.js文件，并渲染TodoList组件。

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>,
  document.getElementById('root')
);

1. 运行应用程序： 在命令行中运行以下命令以启动开发服务器。

npm start

现在，您可以在浏览器中访问http://localhost:3000，看到一个待办事项列表应用程序。您可以在输入框中输入待办事项，点击“Add Todo”按钮以添加新的待办事项，并点击每个待办事项旁边的“Delete”按钮以删除它们。

这是一个简单的React前端框架实例，用于构建待办事项列表应用程序。您可以根据自己的需求扩展和定制这个框架，添加更多功能和样式。