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

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

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

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

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

Подготовка

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

yarn add -D parcel typescript

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

yarn tsc --init

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

Это поможет нам сгенерировать файл конфигурации для 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
<script src="index.tsx" type="module"></script>

Соответсвенно, следующим шагом будет создание 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 = <h1>React, what are you?</h1>;

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

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