react技术栈

React技术栈

解决方案：在现代前端开发中，React技术栈提供了一种高效、灵活的方式来构建用户界面。它通过组件化的方式，使得代码复用性更高，维护更简单。解决如何使用React技术栈来构建一个简单的待办事项应用，并提供多种实现思路。

基础搭建

我们需要创建一个React项目。可以使用Create React App工具快速搭建环境。打开命令行工具，输入以下命令：

bash
npx create-react-app todo-app
cd todo-app
npm start


这会启动一个本地服务器，并在浏览器中打开默认的React页面。

实现思路一：函数式组件与Hooks

我们可以使用React的函数式组件和Hooks来实现待办事项功能。这里主要使用useState Hook来管理状态。

jsx
import React, { useState } from 'react';</p>

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

<p>const addTodo = () => {
    if (input.trim() !== '') {
      setTodos([...todos, input]);
      setInput('');
    }
  };</p>

<p>return (
    <div>
      
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}</p>

<p>export default TodoApp;

实现思路二：类组件

除了函数式组件，我们还可以使用React的类组件来实现同样的功能。

jsx
import React, { Component } from 'react';</p>

<p>class TodoApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      input: ''
    };
  }</p>

<p>addTodo = () => {
    if (this.state.input.trim() !== '') {
      this.setState(prevState => ({
        todos: [...prevState.todos, this.state.input],
        input: ''
      }));
    }
  };</p>

<p>render() {
    return (
      <div>
        
        <button onClick={this.addTodo}>Add</button>
        <ul>
          {this.state.todos.map((todo, index) => (
            <li key={index}>{todo}</li>
          ))}
        </ul>
      </div>
    );
  }
}</p>

<p>export default TodoApp;

这两种方法都可以实现待办事项的功能，开发者可以根据自己的习惯和项目需求选择合适的方法。