В течение этого года у меня была возможность поэкспериментировать с React при реализации следующих проектов:

  • мой сайт: https://www.alicemoretti.com/ ,
  • простая страница, извлекающая данные из внешнего API и использующая useState, useEffect и useParams,
  • веб-блог, который позволяет пользователям читать блоги, добавлять и удалять их. В качестве примечания: я кодировал этот проект, следуя отличному руководству по React, которое я очень рекомендую (Полное руководство по React от The Net Ninja),
  • блог, который вы читаете, реализован с помощью Gatsby.js, фреймворка на основе React,
  • свадебный веб-сайт, который я недавно закончил для клиента, который также сделан с помощью Gatsby.js.

Путь к тому, чтобы стать опытным разработчиком React, еще долог, но я уверен, что это будет результатом моего пути самообучения :-)

Перед рождением моего второго ребенка (может быть, через пару недель, кто знает) у меня было желание пересмотреть основы React, и я решил сделать это, пройдя очень интересный курс React на Frontend Master, Полное введение в React V6 Брайана Хоита. В этом посте и, надеюсь, еще в паре (в зависимости от того, когда родится ребенок) я постараюсь поделиться тем, что узнал, уделяя особое внимание темам, которые показались мне более интересными и трудными для понимания.

Что мне нравится в этом уроке, так это то, что он учит вас React с нуля. Команда create-react-app не используется, вместо этого курс начинается с создания простого файла index.html. Все необходимые пакеты (npm, Prettier, ESLint, Parcel, Babel, React) добавляются вручную.

Зачем вам набирать весь этот код вручную, если вы можете начать с красивого шаблона, который может вас удивить? Я считаю, что понимание базовой структуры и логики приложения React может открыть глаза (особенно для людей, которые, как и я, недавно занялись кодированием без какого-либо опыта в области ИТ). Честно говоря, прежде чем натолкнуться на это руководство, я едва ли задался вопросом, какая магия работает за кулисами при запуске приложения create-react-app. В течение многих месяцев мне было достаточно запускать «npm start» в терминале и видеть, как мой стилизованный веб-сайт появляется в браузере.

Теперь я почувствовал, что пришло время копнуть глубже.

Реагировать и РеактДОМ

Сразу после написания страницы index.html я узнал, что React требует для рендеринга двух пакетов: React и ReactDOM.

  • React — это высокоуровневый API, он содержит все методы, но не содержит способа рендеринга внутри браузера.
  • ReactDOM — это библиотека, взаимодействующая с DOM, необходимая для того, чтобы наше приложение было видно внутри браузера.

Я так понял, что они были разделены на отдельные пакеты после появления React Native. Эти два пакета перед добавлением в проект всех необходимых зависимостей изначально загружаются с cdn внутри файла index.html следующим кодом:

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

Создание первого компонента

Основной компонент App.js изначально кодируется внутри самой страницы index.html. Как мы увидим ниже, для создания отдельного компонента нам потребуется установить сборщик JavaScript под названием Parcel.

<script>
      const App = () => {
        return React.createElement(
          "div",
          {},
          React.createElement("h1", { id: "my-brand" }, "Adopt me")
        );
      };
      ReactDOM.render(
        React.createElement(App),
        document.getElementById("root")
      );
 </script>

Выше мы создаем компонент «Приложение» со следующей структурой: div без атрибутов (фигурные скобки могут содержать возможные атрибуты и/или арии), содержащий h1 с id «my-brand» и текст «Adopt me». Интересно, что при использовании синтаксиса JSX нам больше не нужно использовать метод createElement, поскольку JSX автоматически преобразуется в вызовы createElement.

ReactDOM.render — это то, что берет наш компонент приложения и помещает его в DOM внутри элемента с идентификатором «root». Обратите внимание на использование метода React.createElement с компонентом приложения в качестве параметра. Нам нужно создать экземпляр приложения, чтобы отобразить сам компонент.

нпм

Вы можете смеяться, но я не знал, что для создания файла package.json мне нужно запустить «npm init» внутри терминала :-)

Package.json — это файл, в котором отслеживаются все зависимости, необходимые проекту для запуска. Например, когда мы клонируем на нашу машину репозиторий из GitHub, нам обычно нужно запустить «npm install», который автоматически устанавливает все зависимости, перечисленные в файле package.json (обычно они добавляются внутри файла package.json). папку node_modules).

Как только мы запускаем «npm init», запускается проект npm, и мы можем импортировать код из реестра npm, который представляет собой набор модулей с открытым исходным кодом, которые написали люди и каждый может использовать.

Гит

Это также было хорошим напоминанием о том, что Git не волшебным образом приземлится на ваш проект React, но что, если вы не используете приложение create-react-app, вам нужно вручную инициализировать репозиторий git с помощью команды «git init». Имейте в виду, что репозиторий git необходимо инициализировать в корне проекта!

Кроме того, мне никогда не приходило в голову, что файл .gitignore можно создать вручную (да, возможно, вы еще посмеетесь в другой раз). В предыдущем уроке, которому я следовал, мне пришлось добавить некоторые переменные среды, необходимые для подключения к безголовой CMS, и файл .gitignore уже был там (это был проект Gatsby, который поставлялся с хорошим шаблоном).

В качестве примечания для тех, кто хочет узнать больше о Git, я делюсь этими двумя полезными ссылками, которые мне порекомендовали во время посещения мероприятия Codebar здесь, в Хельсинки.

Посылка

Затем с помощью команды «npm install -D посылка@1.12.3» я добавил Parcel, о котором изначально понятия не имел, что это такое.

Parcel (на техническом жаргоне это сборщик JavaScript) действует как связующее звено, позволяющее запускать ваше приложение React. Это тот, который собирает воедино все кусочки головоломки (файлы CSS, файлы/компоненты js, зависимости) при включении живого сервера. Да, волшебный живой сервер, который я запускал с помощью «npm start», не понимая, как браузер может интерпретировать все эти файлы и информацию…

Это работает следующим образом: вы даете ему точку входа, в данном случае файл index.html, и оттуда он достаточно умен, чтобы понять, найти и включить все зависимости и файлы .js. необходимо для сборки приложения (более подробное объяснение смотрите в официальной документации Parcel).

Точка входа определяется внутри package.json следующим образом:

"scripts": {
    "dev": "parcel src/index.html",
}

Действительно, как только Parcel был установлен, я мог переместить компонент приложения в отдельный файл! Благодаря Parcel приложение отображается в браузере, даже если компоненты разбросаны по разным файлам! Раскрыта логика компонентов!

После добавления Parcel я смог удалить зависимости React и ReactDOM, добавляемые с unpkg.com, из файла index.html и добавить их в каталог node_modules, запустив «npm install [email protected] [email protected]. 1». Чтобы использовать React внутри компонентов, я добавил следующий код:

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

Я новичок в этой теме и не могу привести хорошего сравнения, но я понимаю из учебника, что альтернативами Parcel являются следующие:

  • Вебпак
  • Браузериф
  • строить
  • Свернуть

Babel (не приложение для изучения языков)

Учитывая, что я изучал языки в университете, для меня Babel, несмотря на то, что пишется по-другому, был приложением для изучения языков. Было интересно узнать, что это транспилятор проекта, который транспилирует более новые версии JavaScript в более старые (а также JSX и typescript), чтобы старые браузеры могли их понять. В течение последних месяцев я никогда не задумывался, как браузер может понимать JSX…

Так что, в конце концов, кажется, что и Вавилон, и Баббель названы в честь мифа о «Вавилонской башне», который объясняет, почему народы мира говорят на разных языках. Это заставляет меня чувствовать себя немного менее глупым :-)

Babel также можно настроить, добавив файл .babelrc в корневую папку. В этом случае был добавлен следующий код:

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

И, добавив «автоматический запуск», мы можем не импортировать React из «реакции» вверху каждого файла JSX.

Как было сказано выше, Babel позволяет браузеру понимать синтаксис JSX, поэтому я мог переключить исходный синтаксис Pet.js на JSX, который гораздо удобнее печатать.

/*
const Pet = (props) => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, props.name),
    React.createElement("h3", {}, props.animal),
    React.createElement("h3", {}, props.breed),
  ]);
};
*/
 
/*When the JSX below runs through Babel and Parcel, it outputs the code above.
 */
const Pet = (props) => {
  return (
    <div>
      <h2>{props.name}</h2>
      <h3>{props.animal}</h3>
      <h3>{props.breed}</h3>
    </div>
  );
};
 
export default Pet;

Список браузеров

Наконец, было интересно увидеть следующую конфигурацию внутри файла package.json:

"browserslist": [
    "last 2 Chrome versions",
    "last 2 Firefox versions"
  ]

Здесь происходит то, что Babel может преобразовать код JSX из футуристического кода в код, понятный старым браузерам. С помощью пакета под названием Browserslist (который Parcel автоматически установил для меня) я могу решить, какие браузеры будет использовать Babel.

На этом я рассмотрел первую часть курса, которая в основном касалась настройки всех необходимых инструментов JavaScript для начала работы над проектом React (это было только начало…). В следующих постах в блоге я расскажу подробнее о хуках и React Router (моя любимая тема, так как я постоянно на ней застреваю :-)).

Если вы считаете, что мой пост в блоге можно улучшить или считаете какое-то утверждение неверным, отправьте мне сообщение через эту форму. Я всегда с нетерпением жду возможности учиться и общаться с людьми, увлеченными программированием и говорящими о технологиях простыми словами.