Что такое React?

Часть раздела Основы путешествия по React на Coddy — урок 1 из 42.

React — самая популярная в мире библиотека для создания пользовательских интерфейсов. Facebook, Netflix, Airbnb: интерактивные части веб-сайтов, которыми вы пользуетесь каждый день, созданы с её помощью.

Главная идея проста: вместо того чтобы писать одну огромную страницу, ты создаёшь небольшие повторно используемые части, называемые компонентами. Кнопка — это компонент. Карточка профиля — это компонент. Целая страница — это всего лишь компоненты внутри компонентов.

component — это не что-то страшное: это JavaScript function, которая возвращает то, что должно появиться на экране:

function App() {
    return <h1>Hello, React!</h1>;
}

Эта похожая на HTML конструкция внутри JavaScript называется JSX. Она позволяет описывать экран прямо там, где находится логика. React берёт то, что возвращают ваши компоненты с помощью return, и поддерживает синхронизацию реальной страницы. Вы описываете что хотите получить, а React определяет, как обновить браузер.

В этом курсе вы будете редактировать App.jsx — главный компонент небольшого приложения React. Предварительный просмотр справа показывает ваше приложение в реальном времени по мере ввода. Давайте кое-что создадим.

Задание

Новичок

Вот ваш first React component, уже написанный для вас.

Что нужно сделать:

Прочитайте App.jsx: это function, которая returns JSX.
Нажмите кнопку Run.
Посмотрите, как предварительный просмотр справа отображает результат, возвращённый component.

That — весь цикл React: component returns JSX, а React выводит его на экран. Начиная со следующего урока, вы будете писать JSX самостоятельно.

Попробуйте сами

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>