devexpress-examples / react-dashboard-localization

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

Dashboard for React - Localization

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.

Example Structure

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.

Client Localization

Files to review:

• App.js

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.

Server Localization

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.

Quick Start

Server

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 origins with any scheme (http or https). This default configuration is insecure: any website can make cross-origin 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)

Client

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

npm install
npm start

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

Documentation

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

More Examples

• 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