Этот урок посвящен созданию простой программы, которая будет принимать текст и HTML-теги, размещая их в другом элементе. Это первый шаг в изучении React JS.
Подключение библиотек
Для работы необходимы библиотеки React и Babel. React уже подключен (в папке «js»). Babel преобразует JSX-код в JavaScript. Подключение Babel осуществляется через тег <script>.
JSX — синтаксис, позволяющий писать HTML-код внутри JavaScript. Вместо громоздкого JavaScript-кода для создания элементов, используется более компактный JSX. Babel преобразует его в понятный браузеру JavaScript.
Создание контейнера и скрипта
Создаем контейнер — <div> с id «example»:
<div id="example"></div>Создаем тег <script> для React-кода. Важен атрибут type="text/babel":
<script type="text/babel">
// Здесь будет наш React-код
</script>Этот атрибут указывает браузеру на необходимость обработки содержимого скрипта Babel. Без него браузер не сможет интерпретировать JSX-код.
Написание React-кода
React-приложение разделяет веб-страницу на блоки (шапка, футер, статьи и т.д.). Используем метод ReactDOM.render() для размещения контента в эти блоки.
В примере заголовок третьего уровня «<h1>Han and Zmey</h1>» помещается в контейнер с id «example»:
ReactDOM.render(
<h1>Han and Zmey</h1>,
document.getElementById('example')
);Первый параметр — JSX-код для отображения. Второй — элемент DOM, куда вставляется код (в данном случае, <div> с id «example»).
Результат и важность type="text/babel"
После обновления страницы в браузере отобразится заголовок «Han and Zmey» внутри контейнера. Без атрибута type="text/babel" ничего не отобразится, и в консоли разработчика появится ошибка. Атрибут type="text/babel" необходим для корректной обработки JSX-кода Babel. Код можно разбить на несколько строк для улучшения читаемости.
В этом уроке выполнена базовая настройка и создана первая программа на React JS, используя JSX и метод ReactDOM.render(). Мы научились создавать контейнеры, подключать React-код и использовать Babel для обработки JSX. В следующих уроках продолжим изучение React.