Установка и вывод данных

Подключение React и JSX (Babel)

Фреймворк React разработан компанией Facebook, которая также использует данную библиотеку на своих проектах (Facebook, Instagram).

Подключается React через код ниже.

<!-- Подключение React -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<!-- Подключение JSX (Babel) -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Стоит обратить внимание, что подключается React версия для разработки (есть дополнительный функционал для отладки, например сообщения в консоли браузера). На боевых сайтах рекомендуется заменить «development» на «production».

Также подключается библиотека Babel, которая позволяет использовать более читабельный код для React-приложений (такой код называется JSX).

Чтобы использовать JSX, в теге <script> надо добавить атрибут type="text/babel".

<!-- 1-ый способ -->
<script type="text/babel">
    // код
</script>

<!-- 2-ой способ -->
<script src="script.js" type="text/babel"></script>

Вывод данных

Сначала надо создать HTML-тег, в котором будет загружаться React-приложение, и вывести приложение через метод render().

<!-- Тег, в котором будет выводится приложение -->
<div id="react-app"></div>

<script type="text/babel">
const reactApp = document.querySelector('#react-app');

// В новых версиях
const root = ReactDOM.createRoot(reactApp);
root.render("Контент");

// В старых версиях
ReactDOM.render("Контент", reactApp);
</script>

Теперь в теге «#app» будет загружаться строка «Контент».

В методе render() передаётся строка, т.е. прописать HTML не получится (теги будут экранированы). Но можно создать объект, который сгенерирует HTML, для этого будет использоваться JSX.

class App extends React.Component {
    render() {
        return (
            <div className="react-app">
                <p>Приложение</p>
            </div>
        );
    }
}

// Вывод данных в элементе "#app"
root.render(<App />);

В коде выше создаётся компонент App, которая через метод render() выводит HTML-код в теге «#app».

Также стоит обратить внимание, что классы в HTML задаются через атрибут className.

Компоненты надо называть с заглавной буквы, иначе React будет воспринимать объект как тег. Т.е. <app /> восприниматся как тег <app></app>, а <App /> уже как компонент.

HTML-код должен быть завёрнут в теге <div>, иначе будет появляться ошибка «Uncaught SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?».