Списки и ключи в React

Давайте рассмотрим, как можно преобразовывать списки в JavaScript.
Используем функцию map() для перебора массива numbers и удвоения значения его элементов. Результат присваивается новому массиву doubled, и выводится в log:


const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

Этот код выводит [2, 4, 6, 8, 10] в консоль.
В React преобразование массивов в списки производится аналогичным способом…
Читать далее «Списки и ключи в React»

Как создать приложение на React — 5 шагов

1. Первое, что необходимо сделать, это нарисовать схему компонентов. Т.е. изобразить скелет приложения. Компонент, в идеале, должен создавать только одну вещь/сущность. Если компонент создает несколько повторяемых в других компонентах сущностей, то он должен быть разложен на более мелкие компоненты.

2. После этого нужно оформить эти компоненты в виде иерархии (вложенности). Компоненты, которые входят в другой компонент в макете, должны выглядеть как потомки в иерархии.

3. Создаем статистическую версию приложения. Проще говоря, напишите код верстки в компонентах и выведите это все в приложение.
В результате ваши компоненты будут иметь только метод render().

4. Добавьте модель данных. Т.е. свяжите компоненты данными, которые передают посредством props (Свойства). Props являются инструментом передачи данных от предка к потомку в иерархии Компонентов React. На этом этапе не используйте state!

5. Для добавления интерфейсу интерактивности, добавьте state.

Все.