29 дек 2020 в 22:35

Напишите свое первое приложение на React

Перевод

Ожидает приглашения

Вы услышали о React и пришли сюда, чтобы написать свое первое приложение на нем. Это будет просто приложение hello world c использованием React. Через него мы изучим множество связанных понятий.

Что такое React для пятилетнего ребенка?

Вы видели сайты с заголовком, нижним колонтитулом, боковой панелью? Вы видели Facebook с повторяющимися блоками статусов? Все эти "строительные блоки" можно рассматривать как разные компоненты, вместе формирующие полный веб-сайт. React - это библиотека для создания таких компонентов пользовательского интерфейса.

Пробуем React из CDN

Вы работали с jQuery? Если да, то вы знаете, как это просто добавить ссылку на файл jQuery и начать его использовать. Аналогичным образом давайте попробуем создать компонент Hello World в React.

Создайте HTML-файл index.html. Поместите в него тег <div> в качестве плейсхолдера. Позже наш React-компонент Hello World будет рендериться внутри этого <div>.

<div id="root"></div>

Значение id может быть любым. Позже мы будем использовать значение id, чтобы сообщить ReactDOM, где рендерить наш React-компонент.

Затем добавьте следующие ссылки на CDN в свой HTML-файл.

<head>
<!-- .... --> 
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> 
<!-- .... --> 
</head>

CDN расшифровывается как Content Delivery Network. У провайдеров CDN есть серверы, распределенные по всему миру. Они кэшируют наши файлы (здесь response.development.js и response-dom.development.js) на всех своих серверах. Это помогает пользователю с любым географическим местоположением быстро получить нужный файл.

Первый добавленный нами файл - react.development.js. Он нужен для React-разработки. Он содержит больше информации для отладки и комментариев. Следовательно, размер файла будет больше по сравнению с его рабочей версией. Сейчас в мире React react.js или response.development.js содержит весь код для создания компонентов.

Теперь нам нужно что-то, чтобы рендерить созданные компоненты в браузере. Для этого мы импортируем response-dom.development.js. Этот файл содержит код для эффективного отображения React-компонентов на экране.

Настройка HTML завершена. Давайте напишем наш компонент Hello World в отдельный файл JavaScript (component.js). Добавьте ссылку на новый файл в наш HTML. Наш окончательный HTML-файл выглядит так:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>First React App</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
  <div id="root"></div>
  <script src="component.js"></script>
</body>
</html>

Когда мы добавляем ссылку на response.development.js, он добавляет объект React в глобальную область видимости. Объект React содержит метод createElement(). Этот метод используется для создания компонента в React.

В component.js сначала мы создадим компонент и присвоим его переменной myComponent.

const MyComponent = React.createElement("h1", null, "Hello World!");

Метод createElement() принимает 3 аргумента. Первый аргумент - это имя тега HTML. Второй атрибут - это свойства или атрибуты тега HTML. Третий аргумент - дочерние элементы. Дочерним элементом может быть строка или другой компонент React.

Теперь наш компонент готов. Но нам нужно отобразить его внутри элемента div#root. Для этого файл response-dom.development.js, загруженный CDN, добавляет объект ReactDOM в глобальную область видимости. Мы можем использовать метод render() внутри объекта ReactDOM для отображения MyComponent в браузере.

ReactDOM.render(MyComponent, document.getElementById("root"));

Вот полный код для component.js.

const MyComponent = React.createElement("h1", null, "Hello World!");

ReactDOM.render(MyComponent, document.getElementById("root"));

Наш файл component.js готов. Теперь давайте откроем index.html в браузере. Он отобразит наш компонент React внутри div.

Здесь HTML-код, который рендерится как часть компонента React, написан с использованием React. Это говорит о том, что этот HTML рендерится с помощью JavaScript. Таким образом, при использовании React нам не нужно отображать весь HTML-код в браузере и программно скрывать ненужные части. Вместо этого мы можем выполнить проверку условий в JavaScript и рендерить только необходимый HTML-код.

В списке параметров React.createElement() второй переданный аргумент был null. Давайте добавим вместо null объект.

const MyComponent = React.createElement("h1", { style: { color: "red"}}, "Hello World!");

Теперь атрибут style добавлен к тегу h1 .

Итак, мы успешно создали компонент React и использовали его на нашей веб-странице. Но, как мы видим в React.createElement() , синтаксис, используемый для отображения простого тега h1, довольно запутан. Если HTML будет больше, то все может стать хуже. Например, рассмотрим HTML-код ниже.

<div>
  <h1>Blog Title</h1>
  <p>Here is the blog description.</p>
</div>

Когда мы конвертируем код в эквивалентный код на React, он выглядит так:

const MyComponent = React.createElement("div", null, [
  React.createElement("h1", null, "Blog Title"),
  React.createElement("p", null, "Here is the blog description."),
]);

Чтобы облегчить жизнь разработчикам, Facebook придумал специальный синтаксис под названием JSX (JavaScript Syntax eXtension). Вместо написания сложного кода при помощиReact.createElement() он помогает работать с синтаксисом, похожим на HTML. Например, указанный выше компонент может быть написан на JSX так:

const MyComponent = (
<div>
  <h1>Blog Title</h1>
  <p>Here is the blog description.</p>
</div>
);

Подробнее о JSX в следующем разделе.

Создание компонентов React с использованием JSX

Как мы видели ранее, если мы используем синтаксис JSX, с ним легко работать. Но есть проблема. Браузеры могут загружать файлы JavaScript и выполнять их с помощью своего JavaScript-движка. Движки JavaScript не могут понять JSX.

Итак, пусть разработчики вроде нас работают с JSX. Мы можем использовать инструмент для преобразования написанного нами на JSX кода в чистый JavaScript. Этот инструмент - Babel.

Давайте переименуем наш файл component.js в component.jsx. Это просто для удобства чтения кода. Теперь любой другой разработчик будет знать, что этот файл содержит код JSX. Вот полный код в component.jsx.

const MyComponent = (
  <div>
    <h1>Blog Title</h1>
    <p>Here is the blog description.</p>
  </div>
);

ReactDOM.render(MyComponent, document.getElementById("root"));

Установите Node.js

Node.js - это серверная платформа для JavaScript. Это означает, что у Node.js есть движок, который может читать и выполнять JavaScript. Вы можете установить его c официального сайта Node.js .

Вы можете проверить установку Node.js, введя следующую команду в терминале.

node --version

Будет отображен номер версии. У меня v12.14.1. Нам нужен Node.js для запуска некоторых инструментов сборки, таких как Babel.

При установке Node.js он также устанавливает NPM (Node Package Manager). Это менеджер, содержащий большое количество пакетов. Вы можете проверить установку npm, введя следующую команду в терминале.

npm --version

Номер моей версии NPM - v6.13.4. Скачиваем и устанавливаем необходимые инструменты из NPM репозитория.

Установите Babel

Babel это транспилятор. Это означает, что он может преобразовывать один тип кода в другой. Например: Babel может конвертировать код ES6 в ES5. Babel также может конвертировать код JSX в код React.js.

Теперь нам нужен Babel для преобразования component.jsx в файл component.js. Чтобы использовать команду babel в терминале, нам нужно установить Babel глобально. Запустите эту команду в терминале.

sudo npm install -g babel-cli

Команда -gиспользуется для глобальной установки любого пакета. Только если команда установлена глобально, мы можем использовать babel как команду в терминале. Мы можем проверить, успешно ли установлен Babel, набрав следующую команду в терминале.

babel --version

Ранее я уже установил v7.4.3 на моей машине.

babel-cli похож на робота. Но у него нет знаний о преобразовании JSX в JavaScript. Нам нужно научить Babel, как это делать. Для этого нужно установить пакет @babel/preset-react. Если babel-cli был установлен глобально, @babel/preset-react устанавливается в пределах проекта.

Перед установкой @babel/preset-react нам нужно создать в нашем проекте файл с именем package.json. Этот файл поддерживает зависимости пакетов нашего проекта. npm имеет команду init для создания файла package.json. В терминале из корня нашего проекта выполните команду ниже.

npm init -y

-y - нужен для того, чтобы принять все значения по умолчанию при создании файла package.json. Теперь файл создается с содержимым по умолчанию, которое выглядит следующим образом.

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Теперь мы можем начать установку пакета @babel/preset-react. В командной строке введите:

npm install --save-dev @babel/preset-react

Транспилирование JSX в JS

Из корневой папки проекта в терминале запустите эту команду.

babel --presets @babel/preset-react component.jsx -o component.js

Здесь мы говорим babel использовать @babel/preset-react для преобразования component.jsx в component.js. Если мы откроем файл component.js, то увидим транспилированный чистый код JavaScript.

Если мы откроем index.html в браузере, мы сможем увидеть результат.

Мы увидели, как создать компонент React с помощью JSX. На данный момент наш проект очень простой и содержит только один компонентный файл. Поэтому можно каждый раз заходить в терминал и запускать команду babel. Но по мере роста проекта нам необходимо автоматизировать некоторые задачи. Об этом мы поговорим в отдельной статье.

Резюме

React.js - это библиотека компонентов пользовательского интерфейса. Мы можем писать компоненты React, используя чистый JavaScript. Но это может потребовать значительный усилий. Синтаксис JSX помогает писать компоненты React в виде синтаксиса HTML. Браузеры не понимают JSX. Поэтому мы используем транспилятор, такой как Babel, для преобразования JSX в чистый код JavaScript.

Теги:

Хабы: