> Markdown version of [React Views](https://vaadin.com/docs/next/building-apps/react). Section index: [llms.txt](https://vaadin.com/docs/next/building-apps/llms.txt)

# React Views

A Vaadin application is built primarily from server-side **Flow** views written in Java. In addition to these, you can add **client-side views** written in React and TypeScript. A React view runs entirely in the browser and communicates with the server through type-safe service calls, rather than being rendered on the server like a Flow view.

This section explains how to add React views to an otherwise server-driven Vaadin application. It’s not a guide to building a complete application in React.

> **Note: Built on Hilla**
>
> React views use the technology previously released as a separate product called **Hilla**, which is now an integrated part of Vaadin. You may still encounter the Hilla name in package names, annotations, and reference documentation.

## <a id="when-to-use-react-views"></a>When to Use React Views

Most views in a Vaadin application are best implemented as Flow views: the logic stays on the server, close to your data and business logic, and you write the whole view in Java. Reach for a React view when a specific view benefits from running on the client:

- **Offline capability** — the view needs to keep working when there’s no connection to the server, for example in a field or warehouse application.

- **Highly interactive, low-latency UI** — the view updates so frequently that a server round trip per interaction would feel sluggish, such as a drawing canvas or a real-time editor.

- **Reusing existing React code** — you already have React components or an ecosystem library that you want to use as-is.

For a side-by-side comparison of how the two kinds of views behave at runtime, see [How a Vaadin Application Works](https://vaadin.com/docs/next/building-apps/architecture/runtime-model.md#how-react-views-differ).

If none of these apply, prefer a Flow view. Mixing client-side and server-side views in the same application is fully supported, but each React view adds a separate, client-side programming model to your codebase, so add them deliberately. A Java developer can build a good Flow view with Java alone, whereas a React view also requires knowledge of React, TypeScript, HTML, and CSS.

> **Tip: Wrapping a React Component Is Different**
>
> This section is about adding React **views** (pages with their own route) to your application. If instead you want to use an individual React **component** inside a Flow view — for example a third-party chart or color picker — you don’t need a React view. See [Wrap a React Component](https://vaadin.com/docs/next/building-apps/components/wrap-react-component.md) instead.

## <a id="how-react-views-fit-in"></a>How React Views Fit In

React views and Flow views live in the same application and share the same browser session:

- They share a single client-side router, so you can link and navigate between Flow and React views freely.

- They can share the same application shell, such as an `AppLayout` with a navigation drawer.

- They’re protected by the same Spring Security configuration on the server.

React views are placed as `.tsx` files under `src/main/frontend/views`. Their routes are derived from the file system, so adding a view is often a matter of adding a file. The server side — services, security, and data — is the same Java backend your Flow views already use.

## <a id="enabling"></a>Enabling React Views in a Project

React views and browser-callable services need the Hilla Spring Boot starter, which a plain Vaadin project doesn’t have. Add the dependency to enable them:

`pom.xml`

```xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>hilla-spring-boot-starter</artifactId>
</dependency>
```

The version comes from the `vaadin-bom` dependency management that the project already has, and no other build configuration is needed. Without it, files under `src/main/frontend/views` are ignored, and no TypeScript clients are generated for services. The [Browser-Callable Services reference guide](https://vaadin.com/docs/next/hilla/guides/browser-callable-services.md#enabling) describes the same dependency from the service side.

## <a id="topics"></a>Topics

This section covers:

- [Add a React View](https://vaadin.com/docs/next/building-apps/react/add-view.md) — create views, the file-based routing conventions, and how to organize them.

- [Navigation and Layouts](https://vaadin.com/docs/next/building-apps/react/navigate.md) — link between views (including to and from Flow views), pass route and query parameters, and wrap views in shared layouts.

- [Call Java Services](https://vaadin.com/docs/next/building-apps/react/call-services.md) — make a Java service browser-callable and call it from a React view in a type-safe way.

- [Secure React Views](https://vaadin.com/docs/next/building-apps/react/security.md) — require authentication, restrict access by role, add login and logout, and protect the services behind your views.

For form building, validation, and other in-depth React topics, see the [Hilla reference guides](https://vaadin.com/docs/next/hilla/guides.md).