Среда выполнения JSX / React

1Что такое среда выполнения JSX?#

JSX — это расширение синтаксиса, которое использует React и которое позволяет писать HTML-подобный код внутри JavaScript. Браузеры и WebView не умеют запускать JSX напрямую: его нужно сначала скомпилировать.

Функция среды выполнения JSX загружает React и Babel Standalone в ваше приложение во время работы, поэтому чистый код JSX просто работает, и никакие инструменты сборки не нужны.

2Когда это использовать#

Включайте среду выполнения JSX, когда:

• Вы пишете код React/JSX в поле Custom JS
• Ваши файлы HTML содержат теги <script type="text/babel">
• Вы сгенерировали код JSX с помощью ИИ
• Вы хотите использовать компоненты React без настройки конвейера сборки

⚠️ НЕ нужно, если вы загружаете проект в ZIP: встроенный сборщик esbuild уже обрабатывает JSX для загрузок ZIP.

3Как включить#

1. Перейдите на шаг 4 (Дополнительные функции) в мастере
2. Включите переключатель «⚛️ Среда выполнения JSX / React»
3. Напишите свой JSX в поле Custom JS или в своём HTML
4. Создайте APK как обычно

При первой загрузке страницы приложение загрузит React 18 и Babel из CDN.

4Написание JSX в Custom JS#

При включённой среде выполнения JSX вы можете писать код React прямо в поле Custom JS:

const App = () => (
<div>

<h1>Hello from React!</h1>
<p>This JSX is compiled at runtime</p>

</div>
);

const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(<App />);

Babel автоматически преобразует JSX перед выполнением.

5Использование <script type="text/babel"> в HTML#

Если ваш сайт или офлайн-HTML использует теги script с JSX, пометьте их type="text/babel":

<script type="text/babel">
function Greeting({ name }) {

return <h1>Hello, {name}!</h1>;

}
ReactDOM.createRoot(document.getElementById('app'))

.render(<Greeting name="World" />);

</script>

Babel Standalone автоматически находит и компилирует эти теги.

6Важные замечания#

• Требуется подключение к интернету при первой загрузке (CDN)
• Добавляет задержку запуска примерно 200–500 мс на компиляцию Babel
• React 18 и ReactDOM 18 загружаются автоматически
• Работает вместе со всеми остальными функциями (реклама, push, боковое меню и т. д.)
• Для рабочих приложений с большой кодовой базой лучше использовать загрузку ZIP со сборкой через esbuild: так быстрее, и она работает без интернета