Пишем приложение со списком дел при помощи React Hooks
Обложка статьи «Пишем приложение со списком дел при помощи React Hooks»

Пишем приложение со списком дел при помощи React Hooks

Перевод статьи «How to Build a Todo List with React Hooks»

React Hooks — это функции, которые позволяют определять категорию состояния и жизненный цикл (state, lifecycle) React-компонента без использования ES6-классов.

Некоторые преимущества React Hooks:

  • изолированная логика упрощает последующие тесты;
  • при распределении логики не понадобится использование render props или «компонентов высшего порядка»;
  • разделение функциональности приложения основано на логике, а не на жизненном цикле;
  • React Hooks — достойная замена ES6-классов, с которыми порой возникают проблемы даже у опытных программистов.

Для демонстрации возможностей React Hooks построим приложение, в котором можно добавлять и удалять задачи (ToDo-приложение).

Так будет выглядеть готовое приложение

Это приложение будет выполнять следующие функции:

  • отображать ваши текущие задачи;
  • позволять добавлять новые задачи через поле ввода;
  • удалять задачи.

Установка

Весь код доступен на GitHub и CodeSandbox.

git clone https://github.com/yazeedb/react-hooks-todo
cd react-hooks-todo
npm install

Ветка master — уже готовый проект. Если вы хотите создавать приложение поэтапно, следуя статье, используйте ветку start.

git checkout start

Для запуска проекта используйте следующую команду:

npm start

Приложение должно запуститься на localhost:3000. Вы увидите пустой начальный интерфейс с названием приложения. Весь дизайн уже настроен при помощи библиотеки material-ui, так что можно сразу добавлять функциональность.

Todo-форма

Создайте новый файл src/TodoForm.js и добавьте в него следующий код:

import React from 'react';
import TextField from '@material-ui/core/TextField';
const TodoForm = ({ saveTodo }) => {
  return (
    <form>
      <TextField
        variant="outlined"
        placeholder="Add todo"
        margin="normal"
      />
   </form>
  );
};


export default TodoForm;

Как можно понять из названия формы, здесь главная задача — добавить что-либо в состояние React-компонента. Вот и первый hook.

useState

Теперь давайте рассмотрим такой код:

import { useState } from 'react';
const [value, setValue] = useState('');

Это функция, которая принимает начальное состояние React-компонента и возвращает массив. Вы можете использовать console.log, чтобы посмотреть, что именно она возвращает.

Под первым индексом массива находится текущее значение состояния компонента, а во второй ячейке находится обновляющая функция. Они названы value и setValue, следуя ES6 destructuring assignment.

useState с формами

Ваша форма должна отслеживать значение, вводимое пользователем и вызывать метод saveTodo() при отправке формы. useState поможет вам с этим.

Добавьте изменения в TodoForm.js, они выделены жирным шрифтом:

import React, { useState } from 'react';
import TextField from '@material-ui/core/TextField';
const TodoForm = ({ saveTodo }) => {
    const [value, setValue] = useState('');
    return (
    <form 
onSubmit={event => {
        event.preventDefault();
        saveTodo(value);
      }}
    >
      <TextField
        variant="outlined"
        placeholder="Add todo"
        margin="normal" 
        onChange={event => {
          setValue(event.target.value);
        }}
        value={value}
        />
    </form>
  );
};
export default TodoForm;

В index.js импортируйте форму:

...
import TodoForm from './TodoForm';
...
const App = () => {
  return (
    <div className="App">
    <Typography component="h1" variant="h2">
      Todos
    </Typography> <TodoForm saveTodo={console.warn} /> </div>
  );
};

Теперь введённое значение логируется при подтверждении (нажатии на Enter).

useState с Todos

Вам также нужно состояние компонента. Импортируйте useState в index.js. Начальное состояние компонента должно быть пустым массивом.

import React, { useState } from 'react';
...
const App = () => {
  const [todos, setTodos] = useState([]);
  return ...

Компонент TodoList

Для начала создайте новый файл src/TodoList.js.

Большая часть кода — это компоненты из Material-UI. Самые важные части выделены жирным шрифтом.

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';

const TodoList = ({ todos, deleteTodo }) => (
  <List>
    {todos.map((todo, index) => (
      <ListItem key={index.toString()} dense button>
        <Checkbox tabIndex={-1} disableRipple />
        <ListItemText primary={todo} />
        <ListItemSecondaryAction>
<IconButton
            aria-label="Delete"
            onClick={() => {
              deleteTodo(index);
            }}
          >
            <DeleteIcon />
          </IconButton>
        </ListItemSecondaryAction>
      </ListItem>
    ))}
  </List>
);

export default TodoList;

Чтобы всё работало корректно, требуется:

  • todos — массив всех ваших задач. При помощи метода map() вы сопоставляете каждую из них и создаёте элемент списка;
  • deleteTodo() — функция вызывается при нажатии на IconButton и передает индекс, который однозначно идентифицирует пункт списка.

Импортируйте этот компонент в ваш файл index.js.

...
import TodoList from './TodoList';
import './styles.css';
const App = () => { ...

И используйте в App-функции:

...
<TodoForm saveTodo={console.warn} />
<TodoList todos={todos} />

Добавление новых задач

В index.js добавляем метод SaveTodo()в todo-форму.

<TodoForm
  saveTodo={todoText => {
    const trimmedText = todoText.trim();
    if (trimmedText.length > 0) {
      setTodos([...todos, trimmedText]);
    }
  }}
/>

Проще всего объединить уже существующие задачи с новой. Дополнительные пробелы будут вырезаны.

Очистка поля ввода

Заметьте, что на данном этапе после добавления новой задачи поле ввода не очищено, и это не очень-то хорошо. Исправить это можно внеся маленькое изменение в TodoForm.js.

<form
  onSubmit={event => {
    event.preventDefault();
    saveTodo(value);
   setValue('');
   }}
>

Теперь, как только todo будет сохранён, состояние формы преобразуется в пустую строку:

Удаление задач

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

// TodoList.js
<IconButton
  aria-label="Delete"
  onClick={() => {
    deleteTodo(index);
  }}
>
  <DeleteIcon />
</IconButton>

Теперь примените в index.js.

<TodoList
  todos={todos}
deleteTodo={todoIndex => {
    const newTodos = todos
      .filter((_, index) => index !== todoIndex); 
    setTodos(newTodos);
  }}


/>

Если задача с соответствующим index не найдена, остальные задачи останутся в состоянии формы благодаря использованию setTodos().

Извлечение useState из компонента Todos

В начале статьи упоминалось, что React Hooks хорошо подходят для разделения состояния и логики компонента. И вот как это могло бы выглядеть в вашем приложении.

Создайте новый файл src/useTodoState.js.

import { useState } from 'react';
export default initialValue => {
  const [todos, setTodos] = useState(initialValue);

  return {
    todos,
    addTodo: todoText => {
      setTodos([...todos, todoText]);
    },
    deleteTodo: todoIndex => {
      const newTodos = todos
        .filter((_, index) => index !== todoIndex);

      setTodos(newTodos);
    }
  };
};

По сути это тот же самый код, что и в index.js, но теперь управление состоянием не так плотно связано с компонентом.

Осталось только всё импортировать. Новый код выделен жирным шрифтом.

import React from 'react';
import ReactDOM from 'react-dom';
import Typography from '@material-ui/core/Typography';
import TodoForm from './TodoForm';
import TodoList from './TodoList';
import useTodoState from './useTodoState';
import './styles.css';
const App = () => {
  const { todos, addTodo, deleteTodo } = useTodoState([]);

  return (
    <div className="App">
      <Typography component="h1" variant="h2">
        Todos
      </Typography>

      <TodoForm
        saveTodo={todoText => {
          const trimmedText = todoText.trim();

          if (trimmedText.length > 0) {
            addTodo(trimmedText);
          }
        }}
      />

      <TodoList todos={todos} deleteTodo={deleteTodo} />
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(, rootElement);

Абстракция useState в форме ввода

То же самое можно сделать с формой.

Создайте новый файл src/useInputState.js.

import { useState } from 'react';
export default initialValue => {
  const [value, setValue] = useState(initialValue);

  return {
    value,
    onChange: event => {
      setValue(event.target.value);
    },
    reset: () => setValue('')
  };
};

Сейчас TodoForm.js должен выглядеть так:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import useInputState from './useInputState';
const TodoForm = ({ saveTodo }) => {
  const { value, reset, onChange } = useInputState('');

  return (
    <form
      onSubmit={event => {
        event.preventDefault();

        saveTodo(value);
        reset();
      }}
    >
      <TextField
        variant="outlined"
        placeholder="Add todo"
        margin="normal"
        onChange={onChange}
        value={value}
      />
    </form>
  );
};

export default TodoForm;

В данной статье мы рассмотрели создание ToDo-приложения с помощью React Hooks. Если вы любите React и хотите узнать о нём больше, обратите внимание на нашу статью:

React: практики, которые помогут стать продвинутым разработчиком
tproger.ru