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

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

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

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

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

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

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

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

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

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

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

Вывод данных

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

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

<!-- Вывод контента в теге #app -->
<script type="text/babel">
ReactDOM.render("Контент", document.getElementById("app"));
</script>

Пример кода на JSFiddle

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

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

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

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

Пример кода на JSFiddle

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

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