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

ВВЕДЕНИЕ

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

В этом проекте мы использовали Typescript (надмножество JavaScript) и TailwindCSS для облегчения работы с CSS.

Начните с макета

Предположим, что у вас уже разработан дизайн списка автомобилей с маркой, моделью, годом выпуска и ценой.

Наш JSON API должен возвращать данные в таком виде:

[
  {brand: "Ford", model: "Fiesta", year: 2008, color: "Blue", price: 14000,},
  {brand: "Ford", model: "Focus", year: 2009, color: "Silver",price: 16000,},
  {brand: "Ford", model: "Mondeo", year: 2010, color: "Black", price: 18000,},
  {brand: "Ford", model: "Mustang", year: 2011, color: "Red", price: 20000,},
  {brand: "Ford", model: "Taunus", year: 2012, color: "White", price: 22000,},
]

Шаг 1: Разделите пользовательский интерфейс на иерархию компонентов

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

Но как узнать, что такое компонент и субкомпонент? Используйте те же знания, которые вы использовали бы для принятия решения о том, следует ли вам создать функцию или объект. Хорошей методикой является принцип единой ответственности, который гласит, что компонент должен служить только одной цели. Если он разрастается, его следует разбить на более мелкие компоненты, которые являются подкомпонентами.

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

Мы смогли разделить наш список автомобилей на 4 компонента:

1. FilterableProductTable (GREEN): в ней размещаются все компоненты;
2. SearchInput (RED): принимает ввод пользователя;
3. CarsTable (СИНИЙ): отображает и фильтрует сбор данных на основе пользовательского ввода;
4. CarRow (ОРАНЖЕВЫЙ): отображает одну строку для каждого автомобиля.

Возможно, вы задались вопросом: «А как же заголовок таблицы? Разве это не отдельный компонент?».  Ответ: это зависит от обстоятельств! По мере роста таблицы, если возникнет необходимость, например, в сортировке, мы, конечно, можем компоновать заголовок в CarTableHeader. В данном случае, поскольку это просто статическое отображение названий заголовков, мы сохраним ответственность за это за CarsTable.

Теперь, когда мы определили компоненты нашего макета, давайте приступим к работе. Компоненты, которые находятся внутри других, должны отображаться как дочерние в иерархии. Мы организуем их следующим образом:

• FilterableProductTable
  • SearchInput
  • CarsTable
    • CarRow

Шаг 2: Создание статической версии в React

Всегда начинайте работу на фронтенде с REACT, используя макет (фиктивные данные) для имитации запроса API на фронтенде — это выгодно, так как исключает необходимость интеграции с бэкендом. Следуйте документации, чтобы воспроизвести, как будет выглядеть возврат API.

Вот пример карты данных списка (представляющего наш JSON)

const carsData: Array<{
 brand: string;
 model: string;
 year: number;
 color: string;
 price: number;
}> = [
 {
   brand: "Ford",
   model: "Fiesta",
   year: 2008,
   color: "Blue",
   price: 14000,
 },
 {
   brand: "Ford",
   model: "Focus",
   year: 2009,
   color: "Silver",
   price: 16000,
 },
 {
   brand: "Ford",
   model: "Mondeo",
   year: 2010,
   color: "Black",
   price: 18000,
 },
 {
   brand: "Ford",
   model: "Mustang",
   year: 2011,
   color: "Red",
   price: 20000,
 },
 {
   brand: "Ford",
   model: "Taunus",
   year: 2012,
   color: "White",
   price: 22000,
 },
];

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

export type StaticFilterableProductTableProps = {};

const StaticFilterableProductTable =
 ({}: StaticFilterableProductTableProps) => {
   return (
     <div className="flex flex-col h-screen w-screen bg-slate-200 
             items-center justify-center">
       <div className="flex items-start justify-start">
         <input
           className="border-2 border-gray-300 rounded-lg p-2 
             focus:border-blue-300 focus:outline-none"
           placeholder="Search ... "
         />
       </div>
       <div>
         <table className="table-auto mt-8">
           <thead>
             <tr>
               <th className="px-4 py-2">Brand</th>
               <th className="px-4 py-2">Model</th>
               <th className="px-4 py-2">Year</th>
               <th className="px-4 py-2">Color</th>
               <th className="px-4 py-2">Price</th>
             </tr>
           </thead>
           <tbody>
             {carsData.map((car, index) => (
               <tr key={index}>
                 <td className="border px-4 py-2">{car.brand}</td>
                 <td className="border px-4 py-2">{car.model}</td>
                 <td className="border px-4 py-2">{car.year}</td>
                 <td className="border px-4 py-2">{car.color}</td>
                 <td className="border px-4 py-2">${car.price}</td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
     </div>
   );
 };
export default StaticFilterableProductTable;

Шаг 3: Управление компонентами

Мне нравится называть этот шаг «Изучение компонента», это когда мы делаем его умным. Оставим немного JSX и CSS в стороне и обратим внимание на функциональные возможности компонента.

Мы знаем, что нам нужно получить входное значение для фильтрации списка, простым и эффективным способом в этом сценарии является использование хука useState от React, который поможет нам управлять этим состоянием (подробнее читайте в разделе Введение в хуки ).

Всегда злоупотребляя хорошей практикой, интересно дать каждому хуку правильное и специфическое имя в соответствии с его назначением, поэтому назовем эту константу searchValue, сопровождаемую ее функцией, которая будет манипулировать ее значением, setSearchValue .
С этого момента мы можем использовать наше государство в работе. Добавьте параметр value из тега <input> и установите его значение в searchValue. Добавьте второй реквизит, onChange (один из обработчиков событий React), и в его обратном вызове анонимную стрелочную функцию с event в параметре и неявным возвратом setSearchValue, значение которой event.target.value.

Добавьте консольный журнал за пределами возврата для проверки.
Наш вход уже работает, но мы пока ничего не фильтруем. Массив остается прежним. Чтобы упростить это, мы можем сделать функцию перед возвратом JSX. Назовем его filterCars. Он принимает в качестве параметра массив cars и имеет тот же тип, что и исходный массив cars (поскольку мы используем TS), который возвращает новый массив, отфильтрованный по модели продукта, в данном случае cars.

Рассмотрите возможность введения условия, утверждающего возврат исходного массива cars, если searchValue не определено.

Мы вызываем эту функцию в map() листинга автомобилей в таблице, передавая в качестве параметра наш «имитатор массива» carsData.

ЗАКЛЮЧЕНИЕ

Мы удалили console.logs, и все готово! В нашей таблице есть умная фильтрация и список. Все просто, как и должно быть.

Мы определили данные mocks, чтобы имитировать API, затем мы создали статический компонент только с помощью JSX и css (в моем случае я использовал Tailwindcss) и немного js, затем мы сделали компонент более динамичным и умным, чтобы он служил своей цели — быть таблицей, которая перечисляет и фильтрует продукты.

В основном мы изучали порядок работы с React. Создание компонентов React стало проще и быстрее!

# REFERENCES

1. Мышление в стиле React