How to create a rating component in ReactJS ?

Last Updated : 23 Jul, 2025

Creating a rating component in React application allows user to register their review and rate the items using clickable stars. Using a custom rating component enhances the UI and experience of users.

Prerequisite:

Basic knowledge of npm or yarn.
styled-components.
Basic Knowledge of useState React hooks.

Approach

To create a Rating component in React we will use the react-icons and styled-components libraries. Import the star icons from react icons and add the styles using styled-components. Implement the rating logic to style the stars in click and display the provided rating.

Steps to create React App and Install required modules

Step 1: Initialize React Project

You will start a new project usingcreate-react-app command.

npx create-react-app react-rating

Step 2: Switch to Project Directory

Now go to your react-rating folder by typing the given command in the terminal.

cd react-rating

Step 3: Install Required Packages

Install the dependencies required in this project by typing the given command in the terminal.

npm install --save styled-components
npm install --save react-icons

Now create the components folder in src then go to the components folder and create two files Rating.js and RatingStyles.js.

Project Structure:

👁 Image

The updated dependencies in package.json file are:

"dependencies": {
 "@testing-library/jest-dom": "^5.11.4",
 "@testing-library/react": "^11.1.0",
 "@testing-library/user-event": "^12.1.10",
 "react": "^18.0.0",
 "react-dom": "^18.0.0",
 "react-scripts": "5.0.0",
"styled-components": "^5.3.10",
"react-icons": "^4.10.1,
 "web-vitals": "^1.0.1"
},

Example: In this example, we will design a rating component, for that we will need to manipulate the App.js file and other created components file.

Step to Run Application: Run the application using the following command from the root directory of the project: