ReactJS - Создание компонентов с использованием свойств

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

Что такое компоненты и свойства React?

Прежде чем мы начнем создавать компоненты, давайте поймем, что они из себя представляют. Представьте, что вы строите дом из кирпичиков Lego. Каждый кирпичик - это как компонент React - повторно используемый строительный блок для вашего веб-приложения. А что, если вы хотите настроить эти кирпичики? Вот где на помощь приходят свойства (или пропсы). Это как особые инструкции, которые вы даете каждому кирпичику, чтобы сделать его уникальным.

Как создать компонент с использованием свойств

Давайте начнем с простого примера. Мы создадим компонент "Greeting", который здоровается с разными людьми.

function Greeting(props) {
return <h1>Привет, {props.name}!</h1>;
}

function App() {
return (
<div>
<Greeting name="Алиса" />
<Greeting name="Боб" />
<Greeting name="Чарли" />
</div>
);
}

Разберем это:

1. Мы определяем функцию Greeting, которая принимает props в качестве аргумента.
2. Внутри функции мы возвращаем некоторое JSX (это способ React писать HTML-подобный код в JavaScript).
3. Мы используем {props.name}, чтобы вставить значение свойства name.
4. В нашем компоненте App мы используем <Greeting /> трижды с разными свойствами name.

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

Добавление больше свойств

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

function Greeting(props) {
return (
<div>
<h1>Привет, {props.name}!</h1>
<p>Ты aged {props.age} лет и ты любишь {props.hobby}.</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Алиса" age={25} hobby="живопись" />
<Greeting name="Боб" age={30} hobby="игра на гитаре" />
</div>
);
}

Здесь мы добавили свойства age и hobby. Обратите внимание, как мы используем фигурные скобки {} для свойства age? Это потому, что мы передаем число, а не строку. Для строк мы используем кавычки, а для чисел или выражений JavaScript мы используем фигурные скобки.

Объекты как свойства

Иногда удобно группировать связанные данные в объект. Давайте переделаем наш компонент Greeting, чтобы использовать объектное свойство:

function Greeting(props) {
return (
<div>
<h1>Привет, {props.person.name}!</h1>
<p>Ты aged {props.person.age} лет и ты любишь {props.person.hobby}.</p>
</div>
);
}

function App() {
const alice = { name: "Алиса", age: 25, hobby: "живопись" };
const bob = { name: "Боб", age: 30, hobby: "игра на гитаре" };

return (
<div>
<Greeting person={alice} />
<Greeting person={bob} />
</div>
);
}

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

Деструктуризация свойств

По мере роста ваших компонентов, вам может показаться, что вы часто пишете props.. Есть классный трюк под названием "деструктуризация", который может сделать ваш код чище:

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Привет, {name}!</h1>
<p>Ты aged {age} лет и ты любишь {hobby}.</p>
</div>
);
}

Это делает то же самое, что и наш предыдущий пример, но немного короче. Мы говорим " возьми свойство person и извлеки из него name, age и hobby".

Умолчательные свойства

Что, если кто-то забудет передать свойство в ваш компонент? Мы можем задать умолчальные значения, чтобы избежать ошибок:

function Greeting({ person = { name: "Гость", age: "неизвестно", hobby: "таинства" } }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Привет, {name}!</h1>
<p>Ты aged {age} лет и ты любишь {hobby}.</p>
</div>
);
}

Теперь, если мы используем <Greeting /> без каких-либо свойств, он будет использовать эти умолчальные значения вместо того, чтобы рухнуть.

Типы свойств

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

import PropTypes from 'prop-types';

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Привет, {name}!</h1>
<p>Ты aged {age} лет и ты любишь {hobby}.</p>
</div>
);
}

Greeting.propTypes = {
person: PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
hobby: PropTypes.string.isRequired
}).isRequired
};

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

Заключение

Поздравляю! Вы только что узнали основы создания компонентов React с использованием свойств. Запомните, что пропсы - это инструкции, которые вы даете своим компонентам, чтобы сделать их динамичными и повторно используемыми. Они являются фундаментальной частью React, и овладение ими поможет вам в вашем пути к maîtrise React.

Вот quick reference table методов, которые мы рассмотрели:

Метод	Описание
Basic Props	Передавать отдельные значения в компонент
Object Props	Передавать один объект, содержащий несколько значений
Destructuring	Извлекать значения из prop для более чистого кода
Default Props	Задавать значения по умолчанию для отсутствующих prop
PropTypes	Проверять типы prop, передаваемых в компонент

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

Credits: Image by storyset