# JSX / React Runtime

> Run raw JSX with no build step by loading React and Babel at runtime.

- **Applies to:** AppMint and Appwright
- **Source:** the Integration Guide shipped inside the app; this page is generated from it.
- **HTML:** https://freewebtoapk.com/docs/jsx-react-runtime

Run Raw JSX & React Code Directly Without a Build Step

### 1. What Is JSX Runtime?

JSX is a syntax extension used by React that lets you write HTML-like code inside JavaScript. Browsers and WebView cannot run JSX directly - it needs to be compiled first.

The JSX Runtime feature loads React and Babel Standalone into your app at runtime, so raw JSX code just works - no build tools needed.

### 2. When to Use This

Enable JSX Runtime when:

- You write React/JSX code in the Custom JS field
- Your HTML files contain <script type="text/babel"> tags
- You generated JSX code with AI
- You want to use React components without setting up a build pipeline

⚠️ NOT needed if you upload a ZIP project - the built-in esbuild bundler already handles JSX for ZIP uploads.

### 3. How to Enable

1. Go to Step 4 (Advanced Features) in the wizard
2. Toggle ON '⚛️ JSX / React Runtime'
3. Write your JSX in the Custom JS field or in your HTML
4. Generate your APK as normal

The app will load React 18 + Babel from CDN on first page load.

### 4. Writing JSX in Custom JS

With JSX Runtime enabled, you can write React code directly in the Custom JS field:

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 will automatically transpile the JSX before execution.

### 5. Using <script type="text/babel"> in HTML

If your website or offline HTML uses script tags with JSX, mark them with 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 automatically finds and compiles these tags.

### 6. Important Notes

- Requires internet connection on first load (CDN)
- Adds ~200-500ms startup delay for Babel compilation
- React 18 and ReactDOM 18 are loaded automatically
- Works alongside all other features (ads, push, side menu, etc.)
- For production apps with large codebases, consider using the ZIP upload with esbuild bundling instead - it's faster and works offline