JSX и Babel
При создании приложения для React.js в прошлых темах для компиляции JSX в JavaScript использовался специальный инструмент - компилятор Babel. Для этого, во-первых, на веб-страницу подключался скрипт компилятора:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
Это специальный скрипт, который позволяет при запуске веб-страницы в брузере на лету преобразовать весь содержащийся на ней код React в код javascript, понятный браузеру.
Во-вторых, элемент script, который содержал основной код приложения, имел атрибут type="text/babel":
<script type="text/babel">
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById("app")
)
</script>
Если мы уберем подключениие скрипта компилятора Babel или уберем атрибут type="text/babel" наш код не будет работать. Более того
в браузере мы увидим ошибки, поскольку по умолчанию мы не можем определять код html в javascript, как это делается с помощью JSX. Нам обязательно
надо транслировать код JSX в обычный JavaScript, который понимается браузером.
Кроме того, использование Babel позволяет задействовать в приложении многие возможности новых стандартов JS, в частности, ES2015+, которые в полноценной мере на данный момент поддерживаются не всеми браузерами. Например, определим следующую веб-страницу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React</title>
</head>
<body>
<div id="app"> </div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello, React</h1>;
}
}
ReactDOM.render(
<Hello />,
document.getElementById("app")
)
</script>
</body>
</html>
В данном случае элемент, который будет отображаться на веб-странице, вынесен в отдельный класс Hello, который наследуется от
класса React.Component. То есть в данном случае уже применяются возможности ES6. Подобное определение компонента позволяет
работать с ним и развивать его отдельно от другого кода. А чтобы его использовать, в функцию ReactDOM.render() в качестве
первого параметра передается одноименный элемент <Hello />. Но без компилятора Babel мы естественно это все не смогли бы использовать.
- Глава 1. Введение в React
- Глава 2. Основы React
- Глава 3. Состояние. Управление компонентами-классами
- Глава 4. Хуки. Управление функциональными компонентами
- Глава 5. Маршрутизация
- Глава 6. Flux и Redux
- Глава 7. Дополнительные статьи