Небольшое прочтение, почему вам следует меньше думать о JSX и больше о том, что происходит под капотом.

Как говорится в официальном документе, JSX - это просто синтаксический сахар.

Возьмем пример:

Можете ли вы отрендерить этот компонент приложения и вывести что-то вроде этого?

Вы заметили разницу в JSX и выводе? Как сделать так, чтобы текст h2 выглядел иначе, чем вы написали в JSX?
Вы можете приостановить чтение и сначала попробовать свои силы, прежде чем искать решение.

Нам нужно понимать, что JSX, который мы пишем, не отображается напрямую в DOM. Добро пожаловать в React 🙅🏻‍♂️

JSX фактически преобразуется в элементы React с зависимостями типа babel-plugin-transform-react-jsx.

Таким образом, технически функция рендеринга возвращает элементы React. React.createElement - это функция, которая используется для этой цели.

✳️ React.createElement принимает следующие аргументы:

тип: «h1», «div», «span» и т. д., т. е. это будет строка в случае компонентов хоста.

props: объект, содержащий свойства, которые вы передаете таким элементам, как key, className. например, {key: 5, className: "App"}

children: то, что отображается внутри элемента. Это может быть текст (внутри h2) или массив элементов реакции (внутри div).

Могут быть и другие аргументы, которые нам сейчас не нужны. Мы рассмотрим их на … отдыхе.

Итак, данный JSX аналогичен написанию этого:

С помощью элементов React создаются узлы Fiber, а затем наступает рабочий жизненный цикл, в котором происходит рендеринг. Жизненный цикл работы выходит за рамки данной статьи.

Итак, мы знаем, что процесс рендеринга сейчас очень далек. И мы можем использовать промежуточные шаги для создания нашего вывода. Мы собираемся изменить createElement в React, чтобы он имел волшебное / неожиданное поведение.

✳️ Возврат React.createElement выглядит так:

{
        $$typeof: Symbol(react.element),
        type: 'h2’,
        props: {
            key: "2",
            className:"...."
            children: "..normal text"
        }
       
}

✳️ Мы возьмем существующую функцию React. createElement и немного поиграем.

Это жестко кодирует дочерние элементы всех тегов h2 в вашем приложении. Мы только что изменили элемент реакции.

Точно так же вы даже можете изменить тип и отобразить кнопки вместо div. Попробуйте.

✳️ Еще одна интересная вещь - вы можете изменять свои любимые сайты, созданные на React, такие как Instagram или Twitter, с помощью консоли Chrome с прикрепленным отладчиком.

Вот ссылка на рабочий код, чтобы вы могли поиграть с ним.
✳️ https://codesandbox.io/s/elastic-shtern-i6dvh?file=/src/App.js

Удачного кодирования…! Оставайся дома, оставайся в безопасности.