react-rating-start in reactjs

 

 

 

Search product with API

Hello viewers, i am back again for you and now we will start from reactjs. So, we are ready for implemenation of react-rating-start in reactjs and set result. Actually we are making some project like E-commerce where we can implemen react rating start.

 

 

React

Certainly, Reactjs is a JavaScript library developed by Facenook for building user interfaces. It allows developers to create reusable UI components and effciently manage the state of their applications. Here are some key aspects of Reactjs.


Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.



Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.



JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.


Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.


React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.


State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.


ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community.

 

Topic we will cover -

# Install npm install react-rating-star-with-type

# Implementation of rating start

# Output

 

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/09/get-data-in-component-from-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

 

Install React Rating Start 

Here, we will install library of reactjs (npm install react-rating-star-with-type) in cmd prompt, terminal whatever.

 

 

 

 

Implementation of React Rating Start

 

Now, we are ready to code of react rating star using with this library. After installation of react rating start. We are building an E-Commerce website using Redux.

 

First we import this library.

 

 

import ReactStars from 'react-rating-star-with-type';

 

 

Now we are using useState hooks for change the static state value of rating start when user hover on rating start with onChange event handler change the color.

 

 

 

  const [star, setStar] = useState(5);
   const onChange=(nextValue) => {
    setStar(nextValue)
   }

 

 

 

 

 <ReactStars classNames=" " onChange={onChange} value={4.2} edit={true} activeColors={[ "yellow", "red"]} 
    />

 

 

 1. classNames: This prop allows you to pass additional CSS classes to the component. In your example, it is an empty string (" "). This can be useful for styling the component with custom CSS.

2.onChange: This prop specifies a callback function that will be called whenever the user changes the rating by clicking on the stars. In your example, it refers to a function named onChange. You need to define this function elsewhere in your code to handle the rating changes.

3. value: This prop sets the initial value of the star rating. In your example, it's set to 4.2. This means that initially, the component will display 4.2 stars filled.

4. edit: This prop determines whether the user can interact with the stars to change the rating. When set to true, users can click on the stars to modify the rating; when set to false, the stars are essentially read-only. In your example, it's set to true, indicating that the user can edit the rating.

5. activeColors: This prop sets the color of the active (filled) stars. In your example, it's an array containing one color, "yellow". This means that the filled stars will be displayed in yellow

 

 

 

 

 

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

 

Disclaimer