React Integration Demo

This sample shows how to host React components in DotVVM pages.

Prerequisites

• .NET 6
• node.js and npm
• Optionally, yarn package manager (as alternative to npm)
• Optionally, DotVVM for Visual Studio

How to run the sample

1. Open the GitHub repo in Visual Studio or git clone https://github.com/riganti/dotvvm-samples-react-integration.git

2. Open ReactIntegrationDemo.sln

Sample 1: Recharts chart component & simple UpDown component

1. In your favorite shell, navigate in the solution directory and run the following commands:

cd Recharts_UpDown
yarn install --immutable
yarn build

2. Execute dotnet run or right-click the Recharts_UpDown project and select View > View in Browser

3. You can interact with the React components in the page and see how they are able to synchronize with the other controls in the page.

Sample 2: Digraph diagram component integration

1. In your favorite shell, navigate in the solution directory and run the following commands. Make sure yarn is installed

cd Digraph
dotnet run

2. Execute dotnet run or right-click the Digraph project and select View > View in Browser

3. You can interact with the React components in the page and see how they are able to synchronize with the other controls in the page.

In order to rebuild JavaScript files faster, yarn dev command can be used to start rollup in watch mode.

Sample 3: Telerik KendoReact integration

1. Obtain a license of Telerik KendoReact and place the license text file to the following path: Kendo/kendo-ui-license.txt

2. In your favorite shell, navigate in the solution directory and run the following commands.

cd Kendo
npm ci
npm run build

3. Execute dotnet run or right-click the Kendo project and select View > View in Browser

4. You can interact with the React components in the page and see how they are able to synchronize with the other controls in the page.

Sample 4: DevExtreme React integration

1. Obtain a license of DevExtreme React.

2. In your favorite shell, navigate in the solution directory and run the following commands.

cd DevExtreme
npm ci
npm run build

3. Execute dotnet run or right-click the DevExtreme project and select View > View in Browser

4. You can interact with the React components in the page and see how they are able to synchronize with the other controls in the page.

Sample 5: Syncfusion React UI integration

1. Obtain a license of Syncfusion React UI.

2. In your favorite shell, navigate in the solution directory and run the following commands.

cd Syncfusion
npm ci
npm run build

3. Execute dotnet run or right-click the Syncfusion project and select View > View in Browser

4. You can interact with the React components in the page and see how they are able to synchronize with the other controls in the page.

What you can learn in the sample

• Wrapping React components to be used in DotVVM using the <js:Component /> control.
• Set up rollup or esbuild pipeline to bundle all resources together

---

Other resources

• DotVVM Forum
• DotVVM Official Website
• DotVVM Documentation
• DotVVM GitHub
• Twitter @dotvvm
• Samples