Это вторая часть серии «Реагировать с нуля». На этот раз мы начнем создавать To-Do-приложение с настройкой, которую мы сделали в части 1!

Предпосылки

Часть 2 начнется с того места, где мы остановились в части 1. Если вы еще этого не сделали, продолжайте и закончите часть 1 или просто клонируйте ее из моего репозитория и начните оттуда.

Новые зависимости

Прежде чем мы начнем создавать To-Do-Application, мы добавим bootstrap в качестве библиотеки CSS, чтобы упростить нашу жизнь и наши инструменты маршрутизации:

$ npm i bootstrap react-router react-router-dom

– bootstraps: библиотека CSS для создания адаптивных веб-приложений.

- react-router: основные функции маршрутизации для реакции.

- react-router-dom: привязки DOM для react-router.

Затем мы импортируем bootstrap в наш index.scss, добавив следующую строку вверху файла:

@import “~bootstrap/scss/bootstrap”;

После этого мы создаем два новых каталога в нашей src-folder, один для наших компонентов и один для наших контейнеров:

$ mkdir containers
$ mkdir components

Контейнеры и компоненты

Мне нравится проводить четкое различие между контейнерами и компонентами.

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

- Компоненты содержат логику нашего приложения и «решают», какие контейнеры отображать в какое время. Они обеспечивают функциональность контейнеров, передавая их им.

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

Единственная работа этого контейнера — возвращать маршруты нашего приложения. Эти маршруты будут отслеживать все различные пары маршрутов-компонентов.

Создайте новый файл в папке-источнике с именем Routes.js со следующим содержимым:

Как видите, в этой функции мы использовали наши недавно добавленные зависимости. Switch содержит все маршруты, которые мы объявим в этом приложении. В настоящее время мы объявили только один маршрут, который указывает на этот адрес http://localhost:8000/. Компонент TodoPage будет отображаться по этому адресу.

Далее нам нужно реализовать TodoPage. Поэтому мы создадим новый файл с именем Todo.js в папке компонентов.

Файл должен выглядеть так:

import React, { Component, Fragment } from ‘react’
import TodoListContainer from ‘../containers/TodoList’;
export class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [{
        id: 1,
        title: ‘Create Part 1’,
        text: ‘Starting with project setup’
      },
      {
        id: 2,
        title: ‘Create Part 2’,
        text: ‘creating the UI with components and containers’
      },
      {
        id: 3,
        title: ‘Create Part 3’,
        text: ‘To be decided’
      }],
    };
  }
  render() {
    return (
      <Fragment>
        <div className=”container-fluid”>
          <TodoListContainer
            todos={this.state.todos}
          />
        </div>
      </Fragment>
    );
  }
}
export default Todo;

В этом файле мы создаем несколько фиктивных задач.

После этого мы передаем задачи в наш TodoListContainer, который мы пишем дальше. Для этого нам нужно создать файл в папке контейнеров с именем TodoList.js и добавить следующее содержимое:

В этом контейнере мы перебираем все задачи, которые мы передали из нашего Todo-компонента. Перебирая их, мы создаем загрузочную карточку для каждой задачи, чтобы отображать заголовок и текст.

Затем мы меняем цвет фона на что-то более подходящее, чем красный. Для этого мы открываем наш index.scss и меняем цвет фона следующим образом:

@import “~bootstrap/scss/bootstrap”;
body {
  background-color: #d7dfdb;
}

Теперь мы очищаем наш index.js, избавляясь от App-функции и реализуя наш Root-контейнер следующим образом:

Давайте запустим наш проект через npm start и посмотрим на макет, который мы только что создали. Это должно выглядеть так:

Больше функций

Теперь мы добавим функциональность, чтобы добавить новую задачу в наш список.

Первое, что нам нужно сделать, это настроить наш Todo-Component для отображения кнопки добавления.

Кроме того, нам нужно реализовать функциональность для добавления новой задачи в наш массив задач.

Для этого нам нужно изменить наш Todo.js следующим образом:

Прежде всего, я добавил к нашему состоянию три новых свойства.

showNewTodo — это логическое значение, которое помогает нам переключаться между кнопкой добавления и формой добавления новой задачи.

title и текст будут содержать заголовок и текст новой задачи.

Затем я добавил две новые функции. onChange записывает заголовок и текст нашей новой задачи в состояние.

onSubmit создает новый объект todo и добавляет его в начало массива todos.

И последнее, но не менее важное: мы добавили необходимый HTML-код для отображения кнопки добавления или NewTodoContainer в зависимости от нашего логического значения showNewTodo.

Теперь нам просто нужно создать новый файл в папке-контейнерах с именем NewTodo.js и добавить следующее содержимое:

Это простая форма с двумя полями ввода, которые реализуют нашу функцию onChange и кнопку отправки, которая реализует нашу функцию onSubmit. Теперь, когда это сделано, мы можем перезапустить наш сервер разработки, нажав npm start.

Вы должны увидеть это:

И после нажатия кнопки «Добавить Todo» это должно выглядеть так:

Заключение

Вот и все для части 2 этой серии. Мы реализовали базовую маршрутизацию и компонент, который обрабатывает все, что касается наших задач. Кроме того, мы реализовали некоторые элементы пользовательского интерфейса, такие как форма добавления задач и список всех задач.

Я надеюсь, что вам понравилось!

В следующей части мы, наконец, займемся избыточностью и управлением состоянием в реакции и добавим в наше приложение еще несколько функций.

Весь код этой многосерийной серии можно найти в этом GitHub-Repository.

Обновлять

Третья часть этой серии уже вышла, посмотрите ее здесь: