Установка и вывод данных
Подключение 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>
Теперь в теге «#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"));
В коде выше создаётся компонент App
, которая через метод render()
выводит HTML-код в теге «#app».
HTML-код должен быть завёрнут в теге <div>
, иначе будет появляться ошибка «Uncaught SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?».
Авторизуйтесь, чтобы добавлять комментарии