Docs

Docs

React Views

Client-side views written in React and TypeScript, next to Flow views.

A React view is a view written in React and TypeScript that runs in the browser. It calls Java code on the server through browser-callable services, using a TypeScript module that Vaadin generates for each service. A Flow view, by contrast, runs on the server, and the browser only shows what the server sends it.

React views and Flow views can be in the same application. They share the client-side router and the browser session, and the same Spring Security configuration protects both.

This section is the reference for React views. For when to choose a React view, and for step-by-step guides, see React Views in Building Apps.

Routing
File naming conventions, layouts, view configuration, and the router configuration of React views.
Flow Interoperability
Flow views in the React menu, page titles, Flow layouts around React views, and Flow components inside React views.
Component Events
Listener props and event types of Vaadin React components.
Browser-Callable Services
Java services whose public methods React views call through generated TypeScript modules.
Forms
Bind the fields of a React view to a Java type, validate them with Bean Validation, and save the value with a browser-callable service.

Enabling React Views

React views and browser-callable services come with the Hilla Spring Boot starter, which vaadin-spring-boot-starter doesn’t include. Add it to the project:

Source code
pom.xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>hilla-spring-boot-starter</artifactId>
</dependency>

The version comes from the vaadin-bom dependency management. Without the starter, Vaadin ignores the files in src/main/frontend/views and generates no TypeScript clients for services.

React views require a Spring Boot application.

Frontend Files

React views and the files around them are in src/main/frontend:

views/

The views. The router derives each view’s route from its path in this directory. See Routing.

generated/

Files that Vaadin generates when it builds the frontend. These include the TypeScript clients of browser-callable services, the route list, and the default routes.tsx and index.tsx. Vaadin overwrites them, so don’t edit them.

routes.tsx, index.tsx

Optional. Vaadin uses a file here instead of the generated one. To customize the router, start from a copy of the generated routes.tsx, as described in The Route Configuration File.

React and Flow Views in One Application

The router shows a React view when one matches the path. Otherwise, it passes the path to the server, which shows the Flow view with that route. Links and programmatic navigation work the same way for both kinds of views.

Beyond navigation, the two kinds of views share these parts:

  • Menu: the function that creates menu items from the React views also includes Flow views annotated with @Menu.

  • Layout: a Flow layout annotated with @Layout can wrap React views.

  • Page title: a React layout can show the page title of Flow views.

See Flow Interoperability for these, and for using Flow components inside React views.

Updated –