Создаем свой React с рендером и useState за 30 минут19.02.2022 16:32

e9cfb8ca2a96faeb7efad83d26e2d213.png

Понимание работы процессов приходит с изучением механизмов, которые приводят в движение мелкие части большого пазла. Если представить, что Вам дали задачу объяснить, что такое React за полчаса, скорее всего, Вы бы выбрали один из двух вариантов:

  • пересказать все то, что изложено на первой странице официальной документации reactjs.org

  • либо прокомментировать каждый из импортов в репозитории react

Разумеется, можно попробовать скомбинировать оба шага, но есть ли варианты интереснее?

Подготовка

Давайте создадим пустой проект, в который установим две dev зависимости: 

yarn add -D parcel typescript

В нашем проекте parcel будет использоваться в качестве бандлера, который не требует настройки (как раз то, что нам нужно), а typescript (точнее typescriptcompiler — tsc) понадобится для легкого компилирования jsx в js. Для решения второй задачи можно было бы использовать babel, но используя typescript мы дополнительно получим статическую типизацию. Выполним следующую команду: 

yarn tsc --init

Подробнее про файл node_modules/.bin/tsc

При установке пакетов, yarn (или npm) проверяет, есть ли у зависимости исполняемый файл через поле bin в файле package.json.
Когда мы устанавливали typescript, бинарных файла было сразу два: 

// node_modules/typescript/package.json
"bin": {
  "tsc": "./bin/tsc",
  "tsserver": "./bin/tsserver"
}

Если поле bin заполнено, то пакетный менеджер создает symlink (символическую ссылку) на указанный путь и помещает ее в директорию node_modules/.bin
Таким образом node_modules/.bin/tsc — это символическая ссылка на файл node_modules/typescript/bin/tsc
Когда мы запускаем инструкцию yarn  — пакетный менеджер проверит наличие по адресу node_modules/.bin и если таковой найден, то он исполняется.

Это поможет нам сгенерировать файл конфигурации для typescript — tsconfig.json. Далее нам необходимо сделать несколько косметических изменений:

  1. Раскомментируем строку "jsx": "preserve" — и заменим "preserve" на значение "react". Таким образом мы указываем, какой тип output в случае появления jsx мы получим (подробнее поговорим о jsx в следующем разделе). Все варианты можно рассмотреть по ссылке.

  2. Изменим значение флага «strict» с "true" на "false". Сделаем это, чтобы не отвлекаться на предупреждения во время работы над нашей версией React. 

    В итоге, изменения в tsconfig.json будут выглядеть следующим образом: 

// tsconfig.json
-    // "jsx": "preserve"  /* Specify what JSX code is generated. */,
+    "jsx": "react"        /* Specify what JSX code is generated. */,
-    "strict": true        /* Enable all strict type-checking options. */,
+    "strict": false       /* Enable all strict type-checking options. */,

Все готово для начала работы! Чтобы убедиться, что мы готовы писать код, предлагаю начать с создания index.html со следующим содержимым: 

// index.html

Соответсвенно, следующим шагом будет создание index.tsx, в котором мы выведем сообщение в консоль console.log("hello react");

// index.tsx
console.log("hello react");

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

// package.json
"licence": "MIT",
"scripts": {
  "start": "parcel index.html"
},

Таким образом, после запуска yarn start в терминале, мы запустим приложение на 1234 порту локалхоста http://localhost:1234, при этом страница будет совершенно пустой, но в консоли будет выведено приветствие из файла index.tsx

JSX & React Elements

Рассмотрим объявление переменной в следующем блоке кода: 

const element = 
React, what are you?
;

Официальная документация React (в переводе которой на русский язык принял участие в том числе Ваш покорный слуга), начинает объяснение JSX с фразы:  

Этот странный тег — ни строка, ни фрагмент HTML

© Habrahabr.ru