Getting Started with React Progress Bar

10 Aug 20264 minutes to read

This section explains the steps required to create the Progress Bar component using React and configure its properties.

Prerequisites

Before getting started, ensure that your development environment meets the system requirements for Syncfusion® React UI components. That page documents the supported React, Node.js, and npm versions, and includes the React-version compatibility table for Syncfusion React components.

Dependencies

Below is the list of minimum dependencies required to use the Progress Bar component.

  |-- @syncfusion/ej2-react-progressbar
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-svg-base

These dependencies will be installed automatically when you install the main package.

Set up a development environment

To set up a React application quickly, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up the environment using JavaScript and optimizes applications for production.

As an alternative, you can create a React application using create-react-app. For detailed instructions, refer to this documentation.

To create a new React application, run one of the following commands based on your preferred language:

React with JavaScript

npm create vite@latest my-app -- --template react

React with TypeScript

npm create vite@latest my-app -- --template react-ts

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → ESLint
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Then, navigate to the project directory:

cd my-app

Install Syncfusion® React Progress Bar Package

All Syncfusion Essential® JS 2 packages are available in the npmjs.com registry.

Install the React Progress Bar package using the following command:

npm install @syncfusion/ej2-react-progressbar

Add the Progress Bar Component to the Project

Add the Progress Bar component to src/App.tsx using the following code to create a basic linear Progress Bar.

import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from 'react';

function App() {
  return (
    <ProgressBarComponent id="linear" type="Linear" value={40} />
  )
}
export default App;

Run the Application

Run the following command to start the development server.

npm run dev

This command compiles your code and serves the application locally, opening it in the browser.

Complete Code Example

The following demonstrates a complete implementation, including the entry file and the Progress Bar component.

import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import { createRoot } from 'react-dom/client';

function App() {
    return (<ProgressBarComponent id="linear" type='Linear' height='60' value={40} animation=>
         </ProgressBarComponent>);
}
export default App;

const root = createRoot(document.getElementById('container'));
root.render(<App />);
import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import { createRoot } from 'react-dom/client';

function App() {
  return(<ProgressBarComponent id="linear"
                        type='Linear'
                        height='60'
                        value={40}
                        animation=>
         </ProgressBarComponent>
        )
};
export default App;

const root = createRoot(document.getElementById('container')!);
root.render(<App />);

Troubleshooting

Common issues and fixes:

  • createRoot is not a function – Your React version is older than 18. Upgrade React and react-dom to v18+, or use the legacy ReactDOM.render API.
  • Port already in use – Vite will prompt to use an alternative port, or run npm run dev -- --port 3000.
  • Module not found for @syncfusion/ej2-react-progressbar – Verify the package is listed in package.json dependencies and re-run npm install.

See also