Всем привет!

  • 5 мин

Самый распространенный способ начать любой курс программирования заключается в отображении текста "Hello, world!" Продолжая эту традицию, мы будем использовать React для отображения известного текста.

Мы создадим два элемента для базы проекта:

  • Файл index.html размещает наше приложение React.
  • Файл index.jsx подключает наше приложение.

Создание узла приложения

  1. В Visual Studio Code создайте файл в общедоступной папке . Назовите его index.html.

  2. Добавьте следующий HTML-код:

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Recipes</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/dist/index.js"></script>
</body>
</html>

Изучение кода

Обратите внимание на две важные строки в HTML:

  • <div id="app"></div>
    • Эта строка создает HTML-элемент, на котором размещается наше приложение React.
    • Мы вызываем этот элемент с помощью идентификатора для отрисовки нашего приложения.
  • <script type="module" src="/dist/index.js"></script>
    • Эта строка загружает JavaScript.

Заметка

Имя импортируемого файла — index.js. Мы не используем index.jsx, так как браузеры не могут отображать файлы JSX. Для создания JavaScript всегда требуется пакет (например, Snowpack). Мы ссылаемся на JavaScript, а не на JSX.

Атрибут type="module" позволяет использовать инструкции import в файлах JavaScript (или JSX). Эта функция является относительно новой для браузеров. Он помогает импортировать необходимые пакеты и компоненты.

Создание точки входа для приложения React

Нам нужен код для отрисовки приложения React внутри HTML. Традиционно для отрисовки приложения используется файл index.jsx.

  1. Создайте файл в папке src. Назовите его index.jsx.

  2. Добавьте следующий код:

    import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('app')
);

Изучение кода

Наш файл index.jsx начинается с импорта двух важных библиотек. Первая библиотека, React, позволяет использовать JSX. Он будет импортирован в каждый компонент или JSX-файл, который мы создаем. Вторая библиотека, ReactDOM, отображает наше приложение внутри HTML.

render принимает два параметра:

  • HTML-код, который мы хотим отобразить. В этом случае HTML является заголовком h1.
  • Html-элемент, который мы хотим использовать для отображения HTML. Мы будем использовать элемент с идентификатором app. Мы создали этот элемент ранее.

Возможность использования HTML в коде JavaScript является частью возможностей JSX.

Проверка страницы

Теперь, когда мы создали наш код, давайте увидим наш сайт в действии!

  1. Откройте интегрированный терминал в Visual Studio Code, выбрав Вид>Терминал или выбрав Ctrl+`. На компьютере Mac выберите Cmd+` вместо этого.

  2. Чтобы запустить сервер разработки Snowpack, используйте следующую команду:

    npm start

Браузер по умолчанию должен автоматически открываться и отображать страницу. Если страница не отображается автоматически, откройте браузер и перейдите к http://localhost:8080. Теперь вы должны видеть свою страницу!

снимок экрана: страница

Изучение созданного кода

Код JSX преобразуется в соответствующий HTML-код и JavaScript для отображения в браузере. Откройте файл JavaScript, созданный Snowpack: http://localhost:8080/dist/index.js. Вы увидите следующий код:

import React from "../web_modules/react.js";
import ReactDOM from "../web_modules/react-dom.js";
ReactDOM.render(/* @__PURE__ */ React.createElement("h1", null, "Hello, world!"), document.getElementById("app"));

Сосредоточьтесь на строке кода, которая создает элемент h1 и помещает текст в него:

React.createElement("h1", null, "Hello, world!")

Использование этого кода аналогично использованию document.createElement с vanilla JavaScript. Средства, предоставляемые Snowpack и другими пакетами, позволяют использовать JSX для автоматического создания соответствующего кода, понятного для браузера.