ReactJS - Использование Newly Созданных Компонентов

Введение

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

Что такое React Компоненты?

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

Типы Компонентов

React имеет два основных типа компонентов:

1. Функциональные компоненты
2. Компоненты класса

Для этого учебника мы сосредоточимся на функциональных компонентах, так как они проще и более modern.

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

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

function Greeting() {
return <h1>Здравствуйте,学习者 React!</h1>;
}

Это может показаться простым, но здесь происходит многое:

• Мы определяем функцию под названием Greeting
• Функция возвращает JSX (тот HTML-подобный синтаксис)
• JSX представляет то, что будет отрендерено на экране

Использование вашего Newly созданного компонента

Теперь, когда у нас есть компонент Greeting, давайте используем его в нашем приложении!

function App() {
return (
<div>
<Greeting />
<p>Добро пожаловать в наш учебник React!</p>
</div>
);
}

Вот что происходит:

• У нас есть компонент App (основной компонент нашего приложения)
• Внутри App, мы используем наш компонент Greeting
• Мы используем компоненты так же, как бы мы использовали HTML теги

Когда вы запустите этот код, вы увидите "Здравствуйте,学习者 React!" followed by "Добро пожаловать в наш учебник React!"

Компоненты с пропсами

Компоненты становятся真的很 мощными, когда мы делаем их динамичными с помощью пропсов. Пропсы resemble параметры для ваших компонентов.

Давайте модифицируем наш компонент Greeting, чтобы он принимал имя:

function Greeting(props) {
return <h1>Здравствуйте, {props.name}!</h1>;
}

Теперь мы можем использовать его так:

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

Это отобразит:

Здравствуйте, Алиса!
Здравствуйте, Боб!

Не правда ли, это здорово? Мы создали многоразовый компонент, который может приветствовать разных людей!

Компоненты с несколькими пропсами

Давайте сделаем шаг вперед и создадим более сложный компонент. Мы создадим компонент UserCard, который отображает информацию пользователя.

function UserCard(props) {
return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Возраст: {props.age}</p>
<p>Профессия: {props.occupation}</p>
</div>
);
}

Теперь мы можем использовать его так:

function App() {
return (
<div>
<UserCard name="Алиса" age={28} occupation="Разработчик" />
<UserCard name="Боб" age={35} occupation="Дизайнер" />
</div>
);
}

Вложение компонентов

Одна из самых мощных функций React - это возможность вкладывать компоненты. Давайте создадим компонент UserList, который использует несколько компонентов UserCard:

function UserList() {
return (
<div>
<h1>Список пользователей</h1>
<UserCard name="Алиса" age={28} occupation="Разработчик" />
<UserCard name="Боб" age={35} occupation="Дизайнер" />
<UserCard name="Чарли" age={42} occupation="Менеджер" />
</div>
);
}

Теперь наш компонент App может просто использовать UserList:

function App() {
return (
<div>
<Greeting name="Лearner React" />
<UserList />
</div>
);
}

Методы компонентов

Компоненты также могут иметь свои собственные методы. Давайте добавим метод в наш компонент UserCard, который calculates год рождения:

function UserCard(props) {
const calculateBirthYear = () => {
const currentYear = new Date().getFullYear();
return currentYear - props.age;
};

return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Возраст: {props.age}</p>
<p>Год рождения: {calculateBirthYear()}</p>
<p>Профессия: {props.occupation}</p>
</div>
);
}

Заключение

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

помните, что практика делает мастера. Попробуйте создать свои собственные компоненты, поэкспериментируйте с разными пропсами и увидите, что вы сможете построить. Before you know it, вы будете конструировать сложные интерфейсы с легкостью!

Вот quick reference таблица компонентов, которые мы создали:

Название компонента	Пропсы	Описание
Greeting	name	Отображает приветственное сообщение
UserCard	name, age, occupation	Отображает информацию пользователя
UserList	None	Отображает список компонентов UserCard

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

Credits: Image by storyset