react.js 期末项目

原创

mob64ca12d0e5a4 2023-08-14 17:19:49 ©著作权

文章标签 应用程序用户界面 App 文章分类 React.js 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d0e5a4的原创作品，请联系作者获取转载授权，否则将追究法律责任

React.js期末项目

引言

React.js是一个用于构建用户界面的开源JavaScript库。它由Facebook开发，是一个非常受欢迎的前端框架。React.js的主要特点是组件化、虚拟DOM和单向数据流。在本文中，我们将通过一个实际的期末项目来介绍如何使用React.js。

项目概述

我们的期末项目是一个简单的待办事项应用程序。用户可以添加、编辑和删除待办事项，并可以标记已完成的事项。我们将使用React.js来构建这个应用程序的用户界面。

准备工作

在开始编写代码之前，我们需要安装React.js的开发环境。首先，我们需要安装Node.js，这是一个基于Chrome V8引擎的JavaScript运行环境。然后，我们可以使用Node.js的包管理器npm来安装React.js。

$ npm install -g create-react-app
$ create-react-app todo-app
$ cd todo-app
$ npm start

这将创建一个名为todo-app的新React.js项目，并启动开发服务器。我们可以在http://localhost:3000上访问应用程序。

创建组件

在React.js中，我们使用组件来构建用户界面。我们将创建三个组件：TodoList、TodoItem和AddTodo。

import React, { Component } from 'react';

class TodoList extends Component {
  render() {
    return (
      <div>
        {this.props.todos.map(todo => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onDelete={this.props.onDelete}
            onToggle={this.props.onToggle}
          />
        ))}
      </div>
    );
  }
}

class TodoItem extends Component {
  render() {
    const { id, title, completed } = this.props.todo;
    return (
      <div>
        <input
          type="checkbox"
          checked={completed}
          onChange={this.props.onToggle.bind(this, id)}
        />
        {title}
        <button onClick={this.props.onDelete.bind(this, id)}>
          删除
        </button>
      </div>
    );
  }
}

class AddTodo extends Component {
  state = {
    title: ''
  };

  onSubmit = e => {
    e.preventDefault();
    this.props.onAdd(this.state.title);
    this.setState({ title: '' });
  };

  onChange = e => this.setState({ [e.target.name]: e.target.value });

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input
          type="text"
          name="title"
          placeholder="添加待办事项"
          value={this.state.title}
          onChange={this.onChange}
        />
        <input type="submit" value="添加" />
      </form>
    );
  }
}

组合组件

现在我们需要将这些组件组合在一起来构建我们的应用程序。

class App extends Component {
  state = {
    todos: [
      {
        id: 1,
        title: '学习React.js',
        completed: false
      },
      {
        id: 2,
        title: '完成期末项目',
        completed: false
      },
      {
        id: 3,
        title: '提交作业',
        completed: false
      }
    ]
  };

  handleToggle = id => {
    this.setState({
      todos: this.state.todos.map(todo => {
        if (todo.id === id) {
          todo.completed = !todo.completed;
        }
        return todo;
      })
    });
  };

  handleDelete = id => {
    this.setState({
      todos: [...this.state.todos.filter(todo => todo.id !== id)]
    });
  };

  handleAdd = title => {
    const newTodo = {
      id: Date.now(),
      title,
      completed: false
    };
    this.setState({ todos: [...this.state.todos, newTodo] });
  };

  render() {
    return (
      <div>
        Todo List
        <AddTodo onAdd={this.handleAdd} />
        <TodoList
          todos={this.state.todos}
          onDelete={this.handleDelete}
          onToggle={this.handleToggle}
        />
      </div>
    );
  }
}

export default App;