Сразу начнём с примера, который будем разбирать в течение урока:
Центральное понятие в React - компонент. Более того, это единственная сущность, которую он содержит. Вся остальная функциональность построена вокруг компонентов.
В примере выше создан компонент, который добавляет <div>Hello!</div>
в DOM страницы.
Вот как выглядит получившийся html:
<div id="react-root">
<div>Hello!</div>
</div>
CodePen импортирует React автоматически (его нужно указать в подключаемых библиотеках), но в своём коде импорты пропускать нельзя:
import React from 'react';
import ReactDOM from 'react-dom';
Из кода и импортов видно, что для работы с React нужно две библиотеки: сам React и ReactDOM. Причина наличия двух зависимостей достаточно проста. Сама библиотека React
не связана с DOM напрямую и используется не только в браузере. Поэтому отрисовка конкретно для DOM вынесена в отдельный пакет ReactDOM.
export default class Hello extends React.Component {
render() {
return <div>Hello</div>;
}
}
React.Component
(как мы увидим позже, это не единственный способ создать компонент).render
возвращает нечто (рассмотрим позже), что будет отрисовано в браузере. Класс-компонент без функции render
существовать не может, это его интерфейс.Экспорт класса по умолчанию задан неспроста. В JS принято создавать один класс на файл. В отличие от обычных классов, React-компоненты имеют расширение JSX, а значит компонент, определённый выше, должен лежать в файле с именем Hello.jsx
.
Обратите внимание: класс всё равно проименован, хотя это и не обязательно в случае дефолтного экспорта. Мы действительно можем его не именовать, но тогда через расширение React Dev Tools будет тяжело понять, что же отрисовал React, так как любой безымянный компонент отображается как <ReactComponent>
. Поэтому возьмём себе за правило всегда давать компонентам имена.
Самое поразительное происходит в этой строчке:
<div>Hello</div>;
Здравый смысл подсказывает, что такая запись синтаксически невозможна в JS. И он будет прав. То, что вы видите, называется JSX и является расширением языка (добавляется с помощью Babel). Кардинальное решение для фреймворка, не правда ли? В процессе вы поймёте, что это не такая уж и плохая идея.
Главное сейчас запомнить то, что в конечном итоге любой React-компонент возвращает кусок DOM (на самом деле – виртуальный DOM).
Кстати, div
– это тоже компонент React, только встроенный. Отличить встроенные компоненты от самописных очень легко. Встроенные всегда начинаются с маленькой буквы, а те, которые не являются частью React, должны начинаться с большой.
Хорошим стилем считается давать расширение .jsx
для всех файлов, которые содержат JSX, независимо от того, создаётся ли компонент в этом файле или нет.
const mountNode = document.getElementById('react-root');
ReactDOM.render(<Hello />, mountNode);
Созданный компонент (класс компонента) сам по себе ничего не делает. Чтобы насладиться результатом его работы нужно произвести так называемое монтирование. То есть указать React, куда его вставить в DOM.
Для этой задачи обязательно требуется реальный DOM-узел, к которому и производится монтирование строчкой:
ReactDOM.render(<Hello />, mountNode);
Первым параметром передаётся наш компонент в синтаксисе JSX, а вторым тот самый узел. Подходящим может быть любой узел внутри body
. Как правило, если у нас не SPA, то React используется в виде виджетов, подключаемых на странице в разных местах. Причём на одной странице может быть сразу несколько виджетов. Например, на Хекслете все фронтенд-элементы – это как раз виджеты.
JSX – это похожее на XML-разметку расширение для JavaScript, созданное специально для задач React. React из коробки поставляется с набором компонентов, которые полностью повторяют HTML. По большей части синтаксис и структура JSX и HTML совпадают, но есть некоторые важные различия:
<hr />
.class
в JSX используется имя свойства в DOM: className
.Существуют и другие различия, о которых мы поговорим в следующих уроках. Большинство этих отличий делает работу с DOM внутри React проще и удобнее.
Так же как и в HTML, из компонентов можно строить композиции, например такую:
const vdom = (
<div className="card">
<div className="card-body">
<h4 className="card-title">Card title</h4>
<p className="card-text">my text</p>
<a href="#" className="btn btn-primary">Go somewhere</a>
</div>
</div>
);
И это всё валидный код на JS с подключённым расширением для JSX.
То, что каждый компонент React возвращает кусок DOM, является следствием его фундаментальной идеи и архитектуры. В одном из уроков мы рассмотрим эту идею подробнее, и я уверен вы проникнитесь ей. Но почему понадобилось вводить JSX?
Нужно понимать, что JSX – расширение языка, а значит это именно код, а не html
. А раз JSX транслируется в код, то, следовательно, мы могли бы сразу писать этот код. Верно? Верно, но не совсем:
React.createElement(
"div",
{ className: "card" },
React.createElement(
"div",
{ className: "card-body" },
React.createElement(
"h4",
{ className: "card-title" },
"Card title"
),
React.createElement(
"p",
{ className: "card-text" },
"my text"
),
React.createElement(
"a",
{ href: "#", className: "btn btn-primary" },
"Go somewhere"
)
)
);
Пример кода выше – это как раз то, как бы выглядели функции render
компонентов на React. Причём данный пример очень тривиальный и не содержит логику. Если бы у нас появились условные конструкции, то этот код перешёл бы все разумные пределы по сложности анализа. К сожалению, или к счастью, собирать древовидные структуры в коде (а DOM – это дерево) – занятие очень тяжёлое и беспощадное. Надеюсь, теперь стало чуть понятнее, зачем нужен JSX, и что JSX – это не вёрстка (как думают некоторые).
Ну и последнее. Так как любой JSX в итоге превращается в вызовы React.createElement
, то нужно следить за тем, чтобы React был импортирован: import React from 'react'
.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт