#reactjs #babeljs
#reactjs #babeljs
Вопрос:
В ReactJS для рендеринга тега мы обычно используем приведенный ниже код в теге script
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
Здесь 2-й аргумент является допустимым JS, но каков 1-й аргумент? Что представляет 1-й аргумент (функция, переменная)?
и какой цели babel это служит? будет ли это создавать объект класса App под капотом и заменять его?
Комментарии:
1. Это JXS (вы не обязаны его использовать, хотя это настоятельно рекомендуется). Вы должны перенести его, чтобы его можно было использовать в браузере.
2. @Keul Есть идеи, для чего это будет скомпилировано?
3. Смотрите это
4. Вы можете увидеть, что он компилирует здесь
Ответ №1:
Это компонент React (JSX). Это будет успешно перенесено, если у вас есть
import React from 'react';
в верхней части вашего кода. Это означает, что он будет преобразован в обычный класс / функцию JS (в зависимости от того, как вы написали свой компонент).
Это выглядит так, просто чтобы упростить написание React и обдумывание. Загруженный код будет представлять собой некоторый собственный Javascript, который платформа React framework использует для рендеринга вашего кода. Вам не нужно будет понимать это полностью, если вы не хотите изменить, как работает сам React framework.
На самом деле все React <Components> — это просто функции или классы с методами рендеринга.
[редактировать: у вас будет зависимость от Babel как части вашего процесса объединения, поскольку это то, что выполняет перенос. Однако, поскольку вы должны использовать create-react-app или что-то подобное, чтобы создать скелтон вашего приложения, на этом этапе это будет обработано незаметно для вас. Однако, если вы хотите начать поумнеть, вам нужно будет получить базовое представление о сборщике пакетов (например, Webpack / Gulp / Parcel) и Babel.]
Ответ №2:
Первым аргументом является элемент JSX, который позже переносится в ванильный javascript.