Создайте простое приложение Todo с помощью React

Давайте создадим простое приложение Todo на React, которое научит вас основным принципам CRUD (создание, чтение, обновление и удаление).

Привет, читатели! Я впервые пишу статью о создании чего-либо с помощью React. Итак, я новичок в React и Frontend Framework. И лучший способ создать свой первый проект на React - это создать простое приложение Todo.

Создать приложение Todo легко и не займет много времени, но оно научит вас некоторым важным концепциям. Он учит вас принципам CRUD (создание, чтение, обновление и удаление), которые очень важно понимать любому разработчику.

Поскольку это наш первый проект в мире React, мы постараемся упростить его. Мы не будем использовать Redux для управления состоянием и не будем использовать какие-либо серверы для управления им.

Создание простого списка задач означает, что мы не сможем отслеживать задачи после обновления страницы. Так что это не идеальное решение, но хорошее начало.

Мы научимся создавать расширенное приложение Todo, которое будет включать в себя Redux и сервер, но пока мы хотели бы все упростить. Мы бы создали простое работающее приложение на React с некоторым стилем.

Итак, начнем: -

Настройка проекта

Итак, приступим к созданию нашего первого приложения React Todo. Мы могли бы использовать create-response-app, чтобы помочь нам загрузить приложение React для нас.

npm install create-react-app

Выполнение указанной выше команды установит create-response-app в нашем проекте. Теперь все готово к использованию.

Чтобы создать новый проект с именем «todo», мы должны запустить команду следующим образом: -

create-react-app todo

Теперь в нашем текущем репозитории будет создана папка с именем «todo». Затем мы должны перейти в папку todo, выполнив:

cd todo

Теперь мы установим две библиотеки с помощью npm, которые помогут нам использовать библиотеку Bootstrap в нашем приложении для применения стиля.

npm install react-bootstrap bootstrap

Выполнение указанной выше команды установит в нашем приложении библиотеки response-bootstrap и bootstrap.

Теперь мы готовы создать приложение.

App.cs

Теперь давайте напишем собственный код CSS, чтобы немного стилизовать. Не беспокойтесь об этой части. Это очень простой стиль, чтобы наше приложение Todo выглядело немного лучше.

.app {
  padding: 30px;
  background-color: floralwhite;
}

.todo {
  align-items: center;
  display: flex;
  font-size: 18px;
  justify-content: space-between;
}

Остальную часть стиля мы выполним с помощью компонентов react-bootstrap.

App.js

Далее мы начнем с основной части - файла App.js. Начнем с импорта необходимых вещей в наш файл App.js.

import React from "react";
import "./App.css";
import { Button, Card, Form } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

Мы будем использовать React Hooks, чтобы позволить нам заменять компоненты на основе классов функциональными компонентами и при этом использовать все функции без каких-либо проблем.

Итак, начнем с основной функции приложения. Мы определим список javascript todos, который будет содержать все наши задачи, а также будет содержать статус каждой задачи, независимо от того, выполнены они или нет. Мы будем использовать setTodos и React.useState, который включен с помощью React Hooks.

function App() {
  const [todos, setTodos] = React.useState([
    {
      text: "This is a sampe todo",
      isDone: false
    }
  ]);
}

Далее мы переходим к части добавления задач. Мы определим функцию addTodo и определим newTodos, который возьмет список todos и добавит текст нового дела в список с помощью разворота оператор. Затем мы используем setTodos, чтобы установить newTodos как задачи.

const addTodo = text => {
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  };

Далее мы переходим к части отметки Todos как выполненной. Мы определим функцию markTodo. Мы используем оператор распространения, чтобы скопировать все задачи в newTodos, а затем помечаем задачу как выполненную, используя ее индекс, а затем устанавливаем newTodos как задачи.

const markTodo = index => {
    const newTodos = [...todos];
    newTodos[index].isDone = true;
    setTodos(newTodos);
  };

Далее мы перемещаем часть удаления задач. Таким же образом, на этот раз мы используем индекс для объединения списка и удаления задачи, индекс которой совпадает, а затем устанавливаем новые задачи.

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

Затем мы завершаем функцию приложения, возвращая рендеринг JSX, который будет отображаться на веб-сайте. Мы используем компонент FormTodo, который мы определим позже. Он принимает addTodo в качестве параметра.

Затем мы отображаем все задачи с помощью оператора карты. Для каждой задачи мы передадим ее компоненту Todo (определим позже). Мы отправляем index, todo, функции markTodo и removeTodo.

return (
    <div className="app">
      <div className="container">
        <h1 className="text-center mb-4">Todo List</h1>
        <FormTodo addTodo={addTodo} />
        <div>
          {todos.map((todo, index) => (
            <Card>
              <Card.Body>
                <Todo
                key={index}
                index={index}
                todo={todo}
                markTodo={markTodo}
                removeTodo={removeTodo}
                />
              </Card.Body>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );

Теперь мы определим компонент Todo. Он принимает четыре параметра, которые мы передали ранее, когда вызывали компонент Todo.

Мы возвращаем JSX, который покажет каждое Todo. Он также покажет две кнопки для отметки Todos как Done и для удаления Todo соответственно.

function Todo({ todo, index, markTodo, removeTodo }) {
  return (
    <div
      className="todo"
      
    >
      <span style={{ textDecoration: todo.isDone ? "line-through" : "" }}>{todo.text}</span>
      <div>
        <Button variant="outline-success" onClick={() => markTodo(index)}>✓</Button>{' '}
        <Button variant="outline-danger" onClick={() => removeTodo(index)}>✕</Button>
      </div>
    </div>
  );
}

Затем мы должны определить функцию FormTodo. Он принимает в качестве параметра addTodo. Он обрабатывает отправку нового Todo. Если значение не пустое, мы вызываем функцию addTodo для этого текста задачи, а затем снова устанавливаем значение формы как пустое.

Мы возвращаем форму, которая принимает задачи и имеет кнопку «Отправить» для отправки задач. Нажатие на кнопку отправки добавит Todo в список Todo.

function FormTodo({ addTodo }) {
  const [value, setValue] = React.useState("");

  const handleSubmit = e => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue("");
  };

  return (
    <Form onSubmit={handleSubmit}> 
    <Form.Group>
      <Form.Label><b>Add Todo</b></Form.Label>
      <Form.Control type="text" className="input" value={value} onChange={e => setValue(e.target.value)} placeholder="Add new todo" />
    </Form.Group>
    <Button variant="primary mb-3" type="submit">
      Submit
    </Button>
  </Form>
  );
}

Теперь давайте посмотрим на полный файл App.js: -

Таким образом, мы создали простое приложение Todo. Вы можете попробовать этот простой React Todo, который мы создали на этом веб-сайте, размещенном на страницах Github.

Вы можете получить доступ к репозиторию этой статьи на GitHub и увидеть полную структуру пакета и код.

Еще несколько статей, которые стоит прочитать после этой: -