️ 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