Рассмотрим приведенный ниже код.
import React from "react";
import ReactDOM from "react-dom";
const element = <div>Div in Component</div>
function DivComponent() {
return element
};
const rootElement = document.getElementById("root");
ReactDOM.render(<DivComponent />, rootElement);
ВОПРОС 1: Как Вавилон знает, как конвертировать <DivComponent/> JSX синтаксис обычного вызова функции DivComponent(), который затем возвращает element и затем divHTML-тег компилируется в ...
React.createElement("div", null, "Div in Component");
, который отображается в браузере. Использует ли он Регулярные выражения или какой-либо другой метод для замены синтаксиса JSX?
ВОПРОС 2: Как Babel сообщает разницу между действительным тегом HTML <div> и пользовательский тег <DivComponent/>?
Насколько я понимаю, действительный тег HTML <div> компилируется в React.createElement("div", null, "Div in Component");, а затем пользовательский тег компонента (JSX) <DivComponent/> компилируется в DivComponent().