Создайте приложение для фильтрации цветов с использованием React

Введение

В этом проекте вы научитесь создавать приложение для фильтрации цветов с использованием React. Приложение позволит пользователям фильтровать список цветов, вводя название искомого цвета. Этот проект поможет вам понять, как работать с управлением состоянием, обработкой событий и условным рендерингом в React.

👀 Предварительный просмотр

предварительный просмотр проекта

🎯 Задачи

В этом проекте вы научитесь:

настраивать проект React и управлять зависимостями;
реализовывать функцию реального времени фильтрации цветов;
стилизовать приложение с использованием CSS.

🏆 Достижения

После завершения этого проекта вы сможете:

настроить проект React и установить зависимости;
использовать управление состоянием в React для фильтрации данных;
обрабатывать события ввода пользователя и соответствующим образом обновлять интерфейс;
стилизовать приложение React с использованием CSS.

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

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

Откройте свой редактор кода и перейдите в директорию проекта.

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

Далее, загрузите зависимости с помощью команды npm install в терминале, подождите, пока зависимости будут загружены, а затем запустите проект с помощью команды npm start.

Как только проект успешно запустится, нажмите на "Web 8080", чтобы просмотреть его в браузере.

Реализация фильтрации цветов

В этом шаге вы реализуете функцию фильтрации цветов.

Откройте файл App.js в редакторе кода.
В этом файле импортируйте необходимые зависимости:
```
import React, { useState } from "react";
```
Добавьте переменную состояния внутри const App = () => {}, чтобы хранить отфильтрованный список цветов:
```
const [filteredList, setFilteredList] = useState(colors);
```

Реализуйте функцию handleOnChange, чтобы фильтровать список цветов в зависимости от ввода пользователя:

const handleOnChange = (e) => {
  const value = e.target.value;
  if (!value) {
    setFilteredList(colors);
  }

  const filtered = colors.filter((c) =>
    c.name.toUpperCase().includes(value.toUpperCase())
  );
  setFilteredList(filtered);
};

Отобразите поле ввода и отфильтрованный список цветов:

return (
  <div className="app">
    <input
      className="filter-input"
      type="text"
      name="filter"
      placeholder="Enter a colour name to see filtered results"
      onChange={handleOnChange}
    />
    <div className="list">
      {filteredList.map((c) => {
        return (
          <div
            className="list-item"
            key={c.name}
            style={{ backgroundColor: c.hex }}
          >
            {c.name}
          </div>
        );
      })}
    </div>
  </div>
);

Полный код внутри const App = () => {} выглядит так:

const App = () => {
  const [filteredList, setFilteredList] = useState(colors);

  const handleOnChange = (e) => {
    const value = e.target.value;
    if (!value) {
      setFilteredList(colors);
    }

    const filtered = colors.filter((c) =>
      c.name.toUpperCase().includes(value.toUpperCase())
    );
    setFilteredList(filtered);
  };

  return (
    <div className="app">
      <input
        className="filter-input"
        type="text"
        name="filter"
        placeholder="Enter a colour name to see filtered results"
        onChange={handleOnChange}
      />
      <div className="list">
        {filteredList.map((c) => {
          return (
            <div
              className="list-item"
              key={c.name}
              style={{ backgroundColor: c.hex }}
            >
              {c.name}
            </div>
          );
        })}
      </div>
    </div>
  );
};

Сохраните файл App.js, и приложение должно теперь фильтровать список цветов в режиме реального времени, когда пользователь вводит текст в поле ввода.