ReactJS - Вложенные компоненты: руковод для начинающих

Здравствуйте, будущие маги React! Сегодня мы отправимся в увлекательное путешествие в мир вложенных компонентов в ReactJS. Не волнуйтесь, если вы новички в программировании - я буду вашим доброжелательным проводником, explaining everything step by step. К концу этого руководства вы будете создавать вложенные компоненты как профессионал!

Что такое вложенные компоненты?

Прежде чем мы углубимся, давайте поймем, что такое вложенные компоненты. Представьте, что вы строите дом (ваше приложение React). Стены, крыша и фундамент - это ваши основные компоненты. Но внутри дома у вас есть комнаты (вложенные компоненты), которые могут содержать мебель (еще более вложенные компоненты). Эта структура позволяет нам создавать сложные интерфейсы пользователя управляемым образом.

Почему использовать вложенные компоненты?

1. Республика: Создайте компоненты один раз, используйте их многократно.
2. Поддержка: Легче обновлять и управлять более мелкими,ocused компонентами.
3. Читаемость: Ваш код становится более организованным и легким для понимания.

Теперь давайте перейдем к коду!

Создание нашего первого вложенного компонента

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

// Product.js
import React from 'react';
import Price from './Price';

function Product({ name, price }) {
return (
<div className="product">
<h2>{name}</h2>
<Price amount={price} />
</div>
);
}

export default Product;

// Price.js
import React from 'react';

function Price({ amount }) {
return <p className="price">${amount.toFixed(2)}</p>;
}

export default Price;

В этом примере Product - это родительский компонент, а Price вложен внутри него. Давайте разберем это:

1. Мы импортируем компонент Price в Product.
2. Компонент Product получает name и price в качестве пропсов.
3. Мы используем компонент Price внутри Product, передавая проп price как amount.

Теперь, когда мы используем компонент Product:

<Product name="Super Cool Gadget" price={19.99} />

Он отрендерит:

<div class="product">
<h2>Super Cool Gadget</h2>
<p class="price">$19.99</p>
</div>

Это здорово, не правда ли? Мы создали перерабатываемый дисплей цены, который можно использовать в любом продукте!

Компонент FormattedMoney

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

// FormattedMoney.js
import React from 'react';

function FormattedMoney({ amount, currency = 'USD' }) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency,
});

return <span className="formatted-money">{formatter.format(amount)}</span>;
}

export default FormattedMoney;

// Product.js (обновленный)
import React from 'react';
import FormattedMoney from './FormattedMoney';

function Product({ name, price, currency }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
</div>
);
}

export default Product;

Давайте разберем, что происходит в FormattedMoney:

1. Мы используем API Intl.NumberFormat для форматирования нашего числа как валюты.
2. Мы устанавливаем валюту по умолчанию 'USD' с помощью значений по умолчанию параметра.
3. Компонент возвращает span с отформатированной суммой.

Теперь мы можем использовать наш компонент Product следующим образом:

<Product name="Amazing Widget" price={29.99} currency="EUR" />

Это отрендерит:

<div class="product">
<h2>Amazing Widget</h2>
<span class="formatted-money">€29.99</span>
</div>

Круто, правда? Мы создали гибкий, перерабатываемый компонент для отображения цен в различных валютах!

Компонент FormattedDate

Давайте создадим еще один вложенный компонент для отображения отформатированных дат. Это может быть полезно для отображения дат выхода продукта или дат окончания продаж.

// FormattedDate.js
import React from 'react';

function FormattedDate({ date, format = 'long' }) {
const options = {
short: { month: 'short', day: 'numeric', year: 'numeric' },
long: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
};

const formatter = new Intl.DateTimeFormat('en-US', options[format]);

return <span className="formatted-date">{formatter.format(new Date(date))}</span>;
}

export default FormattedDate;

// Product.js (обновленный снова)
import React from 'react';
import FormattedMoney from './FormattedMoney';
import FormattedDate from './FormattedDate';

function Product({ name, price, currency, releaseDate }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
<p>Release Date: <FormattedDate date={releaseDate} /></p>
</div>
);
}

export default Product;

В компоненте FormattedDate:

1. Мы создаем два варианта форматирования: 'short' и 'long'.
2. Мы используем Intl.DateTimeFormat для форматирования даты в зависимости от выбранного формата.
3. Мы парсим строку даты в объект Date.

Теперь мы можем использовать наш обновленный компонент Product следующим образом:

<Product
name="Futuristic Gizmo"
price={99.99}
currency="USD"
releaseDate="2023-12-25"
/>

Это отрендерит:

<div class="product">
<h2>Futuristic Gizmo</h2>
<span class="formatted-money">$99.99</span>
<p>Release Date: <span class="formatted-date">Monday, December 25, 2023</span></p>
</div>

Круто, правда? Мы создали компонент, который может отображать цены и даты в различном формате!

Объединение всего

Давайте создадим компонент ProductList, который использует все наши вложенные компоненты:

// ProductList.js
import React from 'react';
import Product from './Product';

function ProductList({ products }) {
return (
<div className="product-list">
{products.map(product => (
<Product
key={product.id}
name={product.name}
price={product.price}
currency={product.currency}
releaseDate={product.releaseDate}
/>
))}
</div>
);
}

export default ProductList;

Теперь мы можем использовать наш ProductList следующим образом:

const products = [
{ id: 1, name: "Super Gadget", price: 49.99, currency: "USD", releaseDate: "2023-06-15" },
{ id: 2, name: "Mega Widget", price: 39.99, currency: "EUR", releaseDate: "2023-07-01" },
{ id: 3, name: "Awesome Gizmo", price: 59.99, currency: "GBP", releaseDate: "2023-08-30" },
];

<ProductList products={products} />

Это отрендерит список продуктов, каждый из которых имеет отформатированные цены и даты!

Заключение

Поздравляю! Вы только что узнали о вложенных компонентах в React. Мы создали перерабатываемые компоненты для форматирования денег и дат и вложили их в компонент продукта. Это только начало - возможности с вложенными компонентами безграничны!

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

Счастливого кодирования, будущие мастера React! ?

Компонент	Назначение	Пропсы
FormattedMoney	Отображение отформатированной валюты	amount, currency
FormattedDate	Отображение отформатированных дат	date, format
Product	Отображение информации о продукте	name, price, currency, releaseDate
ProductList	Отображение списка продуктов	products (массив)

Credits: Image by storyset