Подпись ReactDOM.render

Question

В ReactJ для визуализации тега мы обычно используем приведенный ниже код в теге скрипта

<script type="text/babel">
    ReactDOM.render(<App />, document.getElementById('root'));
</script>

Здесь второй аргумент является допустимым JS, но каков первый аргумент?Что представляет собой 1-й аргумент (функция, переменная)?

и с какой целью babel служат здесь?Будет ли он создать объект класса App под капотом и заменить его?

Answer 1

Это компонент React (JSX).Это будет успешно передано, если у вас есть

import React from 'react';

в верхней части вашего кода.Это означает, что он будет преобразован в обычный класс / функцию JS (в зависимости от того, как вы написали свой компонент).

Это выглядит так, чтобы было проще писать и думать о React.Транслируемый код будет неким родным Javascript, который платформа React использует для визуализации вашего кода.Вам не нужно будет полностью понимать его, если вы не хотите изменить работу самой платформы React.

Под капотом все React <Components> - это просто функции или классы с методами визуализации, на самом деле.

[править: Вы будете зависеть от Babel как часть вашего процесса связывания, поскольку именно это и происходит.Тем не менее, поскольку вы должны использовать create-реагировать-приложение или что-то подобное, чтобы сделать скелет вашего приложения, на этом этапе это будет обработано для вас незаметно.Однако, если вы хотите начать умничать, вам необходимо получить базовые знания о пакете (например, Webpack / Gulp / Parcel) и Babel.]

Answer 2

Первый аргумент - это элемент JSX, который позже переносится в ванильный JavaScript.