Home Bootstrap 4.5 Reactjs Star Rating Working Demo Part 1 – Star Rating Form

Reactjs Star Rating Working Demo Part 1 – Star Rating Form

by therichpost
0 comment
Reactjs Star Rating Working Demo Part 1

Hello to all, welcome back to my blog. Today in this blog post, I am going to tell you, Reactjs Star Rating Working Demo Part 1.

Reactjs Star Rating

Post Code Benefits, this post code will provide below things:

  1. Star Rating Reactjs.
  2. Form with Star Rating Feature.
  3. In Next Post, I will tell you, how to validation star rating input and get star rating value in reactjs.

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials

Friends now I proceed onwards and here is the working code snippet for Reactjs Star Rating Working Demo Part 1 and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

npx create-react-app reactstarrating

cd reactstarrating

npm start // run the project

2. Now we need to run below commands to get bootstrap(for good layout), antd(for datepicker and form) modules into our react js app:

npm install antd

npm install bootstrap --save

npm start

3. Now friends, after are done with commands, now please open reactstarrating/src/App.js file and add below code inside it:

import React, { useState } from 'react';

import './App.css';

//Bootstrap and jQuery libraries
import 'bootstrap/dist/css/bootstrap.min.css';

//Star Rating and other modules
import { Rate, Form, Input, Button } from 'antd';

import "antd/dist/antd.css";

class App extends React.Component {


    //Form with star rating
    const { TextArea } = Input;
    const Demo = () => {
      return (
          initialValues={{ remember: true }}
            rules={[{ required: true, message: 'Please enter your comment!' }]}
            <TextArea rows={4} />
                type: 'email',
                message: 'The input is not valid E-mail!',
                required: true,
                message: 'Please input your E-mail!',
            <Input />
            //Star Rating Module
            <Rate allowHalf defaultValue={2.5} />
            <Button type="primary" htmlType="submit">

    return (
    <div className="MainDiv">
      <div className="jumbotron text-center">
          </br>Reactjs Form with Star Rating</h3>
      <div className="container">
      <Demo />

export default App;

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding and live working must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will good or bad.



You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.