⚛️ React Islands Integration

Lila provides a powerful "React Islands" architecture, allowing you to embed interactive React components directly into your Jinja2 templates. This approach combines the best of both worlds: the SEO and performance of server-side rendering with Lila, and the interactivity of React.

Installation

To set up the React environment in your project from the root directory, run:

CLI Command


lila-react create

This will scaffold the package.json, vite.config.js, and the react/ directory structure.

Usage

Once installed, you can use the new Jinja2 helpers vite_assets() and react().

vite_assets(): Injects the necessary script tags. In DEBUG=True mode, it connects to the Vite development server (HMR). In production, it loads the optimized assets from public/build.
react(component, props): Mounts a specific React component.

Example of a full HTML template:

templates/html/react.html


<!DOCTYPE html>
<html lang="{{ lang }}">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="description" content="{{ description }}" />
    <meta name="keywords" content="{{ keywords }}" />
    <meta name="author" content="{{ author }}" />
    <title>{{ title }}</title>
    <link rel="icon" type="image/x-icon" href="/public/img/lila.png" />
    <link rel="stylesheet" href="/public/css/lila.css" />
    {{ vite_assets() | safe }}
  </head>
  <body>
    <main class="mt-4 container">
      <h1>Example React integration</h1>
      <div>{{ react('Counter', {'start': 3}) | safe }}</div>
    </main>
  </body>
</html>

How it Works

Development (DEBUG=True):
The vite_assets() helper injects scripts pointing to http://localhost:5173. You can start the dev server with:

Terminal


npm run dev
# OR
lila-react dev

Re-rendering React Islands

You can trigger a re-render of your React islands from standard JavaScript (e.g., from Twig templates, jQuery, or other non-React components) using the global function window.renderReactComponent(name).

This is useful for updating components that rely on shared client-side data like localStorage from other independent DOM elements without needing a complete page reload.

Terminal


//Example in client
// Re-render all React components on the page
renderReactComponent();

// Re-render only components named 'CartBadge'
renderReactComponent('CartBadge');

Production (DEBUG=False):
Run npm run build to compile your React code into public/build. The helper will automatically detect the manifest.json and load the hashed CSS and JS files for optimal performance.

Benefits

SEO with Jinja: Your main page content is rendered by Jinja, ensuring search engines can read it perfectly.
React Interactivity: Use React only where needed (Islands architecture).
Secure Sessions: You can rely on Lila's secure, signed sessions using itsdangerous for authentication, while the React components communicate with your API endpoints.

🎯 React Render (render components with htmlResponse without templates Jinja)

This reactRender method is used to return the HTML directly and load a React page or component, with styles, meta tags, custom scripts, and content/props.

ReactRender


from lila.core.templates import render,renderMarkdown,renderReact
...
router = Router()
@router.get("/react-page")
async def react_page(request: Request):
    response =renderReact(request=request,component="Counter",
    props={
        "start": 5
    } ,
    options={
        "title": "React Page",
        "description": "A React page with a counter component",
        "keywords": "React, counter, component",
        "author": "Lila",
        "styles": ["css/lila.css"]
    }                      
    )
    return response