Узнай, что такое React, напиши свой самый первый компонент и освой базовые правила JSX.
Открыть этот урок в KodokonReact - это библиотека JavaScript, то есть набор готового кода, созданный для построения пользовательских интерфейсов: всего, что ты видишь на экране и с чем взаимодействуешь (кнопки, меню, формы...). Единственное требование для этого модуля - основы JavaScript (переменные, функции, массивы). Чтобы понять, зачем нужен React, сначала посмотрим, как меняют страницу без React.
const el = document.getElementById("title");
el.textContent = "Hello!";
el.style.color = "green";Такой подход работает, но как только страница разрастается, приходится находить каждый элемент, обновлять его в нужный момент и ни про один не забыть... Это быстро становится неуправляемым. React предлагает другую идею: разбить интерфейс на компоненты. Компонент - это функция JavaScript, которая описывает кусочек интерфейса (кнопку, карточку, меню). Как детали конструктора, ты собираешь из них целую страницу, а React берёт на себя поддержание экрана в актуальном состоянии.
import { createRoot } from "react-dom/client";
function Hello() {
return <h1>Hello!</h1>;
}
const root = createRoot(document.getElementById("root"));
root.render(<Hello />);Функция Hello - это компонент: она возвращает нечто похожее на HTML, написанное прямо внутри JavaScript. Такой синтаксис называется JSX. Три правила, которые стоит запомнить: компонент возвращает один родительский элемент; некоторые атрибуты меняют имя (class становится className); каждый тег должен быть закрыт (например, <img />). У JSX есть суперсила: фигурные скобки { } позволяют вставить в результат любое значение JavaScript.
function Welcome() {
const firstName = "Sarah";
return <h2>Welcome, {firstName}!</h2>;
}