ReactJS - Разметка в компоненте

Здравствуйте, стремящиеся к знаниям разработчики React! Я рад помочь вам окунуться в захватывающий мир компонентной разметки в ReactJS. Как кто-то, кто уже давно преподает информатику, я видел无数的 студентов, которые загораются, когда они понимают эти концепции. Так что отправляемся в это путешествие вместе, не так ли?

Понимание компонентной разметки

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

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

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

Теперь давайте посмотрим на пример, чтобы увидеть, как это работает на практике.

Пример компонента разметки

Сначала мы создадим простой компонент разметки, который включает заголовок и футер, с местом для контента между ними.

import React from 'react';

const Layout = ({ children }) => {
return (
<div className="layout">
<header>
<h1>Моя классная программа</h1>
</header>
<main>{children}</main>
<footer>
<p>&copy; 2023 Моя классная программа</p>
</footer>
</div>
);
};

export default Layout;

Давайте разберем это:

1. Мы импортируем React (всегда необходимо в компонентах React).
2. Мы определяем функциональный компонент под названием Layout.
3. Он принимает проп children, который является особым пропом в React, содержащим контент, переданный между открывающим и закрывающим тегами компонента.
4. Компонент возвращает JSX (синтаксис React для описания UI), который включает заголовок, основную область контента и футер.
5. Мы используем {children} в основной секции, чтобы отрендерить любой контент, переданный этому компоненту.

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

import React from 'react';
import Layout from './Layout';

const HomePage = () => {
return (
<Layout>
<h2>Добро пожаловать в мою классную программу!</h2>
<p>Это контент главной страницы.</p>
</Layout>
);
};

export default HomePage;

В этом примере компонент HomePage использует наш компонент Layout. Контент между тегами <Layout> становится пропом children в нашем компоненте разметки.

Использование логики в компонентах: Render Props

Теперь, когда мы понимаем базовые компоненты разметки, давайте перейдем к концепции под названием "render props". Это мощная техника для разделения кода между компонентами React.

Что такое Render Props?

Render props - это техника, при которой компонент принимает функцию в качестве пропа и использует эту функцию для рендеринга чего-то. Это как если бы вы дали компоненту "рецепт" для рендеринга.

Давайте посмотрим на пример:

import React, { useState } from 'react';

const ToggleComponent = ({ render }) => {
const [isOn, setIsOn] = useState(false);

const toggle = () => setIsOn(!isOn);

return render(isOn, toggle);
};

const App = () => {
return (
<div>
<ToggleComponent
render={(isOn, toggle) => (
<div>
<button onClick={toggle}>{isOn ? 'Выключить' : 'Включить'}</button>
<p>Переключатель {isOn ? 'включен' : 'выключен'}.</p>
</div>
)}
/>
</div>
);
};

export default App;

Давайте разберем это:

1. Мы создаем ToggleComponent, который управляет своим состоянием (isOn) и предоставляет функцию toggle.
2. Вместо рендеринга собственного UI, он вызывает функцию пропа render, передавая isOn и toggle в качестве аргументов.
3. В компоненте App мы используем ToggleComponent и предоставляем функцию в качестве пропа render.
4. Эта функция принимает isOn и toggle и возвращает фактический UI, который мы хотим отрендерить.

Преимущество этого подхода в том, что ToggleComponent можно использовать с различным UI. Мы могли бы использовать его для выключателя света, модального окна или anything else, что требует включения/выключения функциональности!

Таблица методов

Вот таблица, резюмирующая ключевые методы, о которых мы говорили:

помните, что практика делает мастера! Попробуйте создать свои собственные компоненты разметки и поэкспериментируйте с render props. Вас удивит, как быстро вы можете создавать гибкие, повторно используемые компоненты.

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

Credits: Image by storyset