Trying out React components in Flow in Vaadin 24.4 beta1

Flow
1

We recently released Vaadin 24.4.0.beta1. One of the new features that we’re introducing is a wrapper that helps you use React components from Flow. Here’s how you can try that out right now. Start by downloading https://start.vaadin.com/dl?preset=react&preset=partial-prerelease, extracting it, importing it to an IDE, and running the main method in Application.java.

You can wrap any React component as a Flow component by wrapping it as a web component using a provided helper class. This helper will give access to state variables set from the server and provides a way of passing events back to the server.

src/main/frontend/reactExample.tsx:

import { ReactElement, JSXElementConstructor } from "react";
import { ReactAdapterElement, RenderHooks } from "./generated/flow/ReactAdapter";
import { Button } from "@vaadin/react-components";

class ReactExample extends ReactAdapterElement {
    protected render(hooks: RenderHooks): ReactElement {
        const [value, setValue] = hooks.useState("value", "initial");
        const sendEvent = hooks.useCustomEvent<string>("example-event");
        return <Button onClick={() => sendEvent("Bar")}>{value}</Button>
    }
}

customElements.define("react-example", ReactExample);

src/main/java/com/example/application/FlowView.java:

package com.example.application;

import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.react.ReactAdapterComponent;
import com.vaadin.flow.router.Menu;
import com.vaadin.flow.router.Route;

@Route
@Menu
@JsModule("./reactExample.tsx")
@Tag("react-example")
public class FlowView extends ReactAdapterComponent {
    public FlowView() {
        getElement().addEventListener("example-event", event -> {
            String value = event.getEventData().getString("event.detail");
            setState("value", "Update: " + value);
        }).addEventData("event.detail");
    }
}
2

Is there already a way to make the Component “bindable” ?

For example how would I implement the HasValue<E,V> interface for a value (string) state ?

3

CustomField is a good candidate for that; in addition to the data binding, it gives you Label, Helper text, and other common features: Custom Field | Components | Vaadin Docs

4

You can also use the AbstractCompositeField class even though would then have to define two separate classes for the component (an internal one using ReactAdapterComponent and then the “actual” component as a AbstractCompositeField). There’s also an open issue about providing a mechanism for integrating with a React component in a way that lets you use an arbitrary super class.

5

Very helpful Thanks!

6

It’s a bit old topic but I made an example of how to use a React component with a Vaadin Field: GitHub - jcgueriaud1/vaadin-react-field

( I’ve just read the link before and it was in the link :slight_smile: )

7

Hi @Leif

First great job on the website and documentations for components etc and it’s great to see Vaadin is evolving.

Regarding Vaadin 24.4 and Hilla being part of Vaadin Flow, will this have any affect of
JavaAPI and Lit API?

In other words , will Vaadin base will be LitElement or we should expect something else?

8

Vaadin will keep using web components for reusable components. Those components are historically built using Polymer but there’s an initiative ongoing to migrate them to use Lit instead. For building applications, we support both server-side Java through Flow and client-side TypeScript through Hilla.

With Flow, the server-side component APIs remain as the main recommended way of defining the component tree and the UI logic. There’s also the possibility of using the LitTemplate Java class to define the component tree using Lit. We’re also considering a similar option based on JSX and React.

For Hilla, we will recommend using React but will keep supporting Lit as well. See this post for more details about Hilla.

9

Thank you

As long as Vaadin will keep its main goal : writing web app in Java, the client side technology is less important.

1 Like
10

Java is at the center of our product strategy so it’s certainly not going anywhere.