创建反应应用程序 - JavaScript

介绍

React是一个流行的JavaScript库，用于构建交互式用户界面（UI）。它使开发人员能够轻松地将web应用程序拆分成可重复使用的组件，并通过声明性编码实现高效的数据更改和更新。

在本教程中，我们将介绍如何使用React构建一个简单的反应应用程序，该应用程序允许用户添加和删除事项列表。

前置条件

在继续之前，您需要具备以下先决条件：

1. 具有JavaScript编程经验。
2. 安装React开发环境。
3. 安装Node.js和npm（Node包管理器）。您可以从此处下载：https://nodejs.org/en/

步骤

以下是创建反应应用程序的步骤：

1. 创建一个新的React应用程序。

打开终端并输入以下命令：

npx create-react-app todo-list

这将创建一个名为“todo-list”的新React应用程序。

2. 打开代码编辑器。

使用Visual Studio Code等代码编辑器打开创建的“todo-list”文件夹。

3. 创建组件。

在src文件夹中，创建一个名为“components”的新文件夹。在该文件夹中，创建一个名为“TodoList.js”的新文件。

在“TodoList.js”文件中添加以下代码：

import React from 'react';

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      newTodo: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleAdd = this.handleAdd.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  handleChange(event) {
    this.setState({newTodo: event.target.value});
  }

  handleAdd() {
    this.setState(prevState => ({
      todos: prevState.todos.concat(this.state.newTodo),
      newTodo: ''
    }));
  }

  handleDelete(index) {
    this.setState(prevState => ({
      todos: prevState.todos.filter((_, i) => i !== index)
    }));
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.todos.map((todo, index) => (
            <li key={index}>{todo} <button onClick={() => this.handleDelete(index)}>Delete</button></li>
          ))}
        </ul>
        <input value={this.state.newTodo} onChange={this.handleChange} />
        <button onClick={this.handleAdd}>Add Todo</button>
      </div>
    );
  }
}

export default TodoList;

在此代码中，我们创建了一个名为“TodoList”的React组件。组件及其内部状态具有两个属性：“todos”（包含所有添加的事项）和“newTodo”（表示要添加的新事项字符串）。组件还有一个名为“handleChange”的帮助程序方法，用于在文本框中输入新的待办事项时更新组件的状态。组件的“handleAdd”方法接收新事项并将其添加到“todos”数组中。最后，我们添加了一个“handleDelete”方法，该方法将删除给定索引处的待办事项。

4. 渲染组件。

返回到src文件夹中的“App.js”文件，并将以下代码添加到文件顶部：

import TodoList from './components/TodoList';

此代码将导入我们在步骤3中创建的“TodoList”组件。

接下来，将以下代码添加到“App.js”文件的渲染方法中：

render() {
  return (
    <div className="App">
      <h1>Todo List</h1>
      <TodoList />
    </div>
  );
}

当用户输入待办事项并单击“Add Todo”按钮时，“TodoList”组件将添加该事项并显示该列表。这将在页面上呈现为某种文本框/按钮组合。

5. 运行应用程序。

最后，在终端中导航至项目的根目录并键入以下命令以启动应用程序：

npm start

这将在浏览器中打开React应用程序，）。

结论

这就是使用React创建一个简单的反应应用程序所需的全部步骤。我们介绍了React的基本概念，并演示了如何在React中创建组件和状态。启动本地服务器并在浏览器中运行该服务器后，我们的待办事项列表应该在Web浏览器中完美地呈现。