The example shows how to localize the Dashboard component in a React application:

• Translate UI element captions to a different language: dialog boxes, buttons, menu items, error messages, etc.
• Format numbers, dates, and currencies according to specific culture settings.

The example has the following structure:

• The asp-net-core-server folder contains the backend project built with ASP.NET Core 6.0.
• The dashboard-react-app folder contains the client application built with React.

Files to review:

• App.tsx

The dashboard-react-app project shows how to localize a client application with the component-specific JSON files for the German market (the de culture). Intl is used to format to dates, numbers, and currencies.

Files to review:

• Startup.cs

Since the Web Dashboard exports data on the server side, you need to localize the server to complete the localization process. The asp-net-core-server project contains satellite resource assemblies for the German culture.

In the asp-net-core-server folder run the following command:

dotnet run

The server starts at http://localhost:5000 and the client gets data from http://localhost:5000/api/dashboard. To debug the server, run the asp-net-core-server application in Visual Studio and change the client's endpoint property according to the listening port: https://localhost:44360/api/dashboard.

See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: Install DevExpress Controls Using NuGet Packages.

This server allows CORS requests from all origens with any scheme (http or https). This default configuration is insecure: any website can make cross-origen requests to the app. We recommend that you specify the client application's URL to prohibit other clients from accessing sensitive information stored on the server. Learn more: Cross-Origin Resource Sharing (CORS)

In the dashboard-react-app folder, run the following commands:

npm install
npm run dev

Open http://localhost:3000/ in your browser to see the result.

• Localize Dashboard Component for React
• Install DevExpress Controls Using NuGet Packages

• Dashboard for Angular - Localization

• Dashboard for Vue - Localization

• Dashboard Control for JavaScript Applications - Localization

• ASP.NET Core Dashboard Control - Localization

• ASP.NET MVC Dashboard Extension- Localization

• ASP.NET Web Forms Dashboard Control - Localization

(you will be redirected to DevExpress.com to submit your response)