Here viewers, i am back again for you and now we will start coding in redux-saga. So, we will teach you make redux wrapper and code only for Store.jsx file and after that we will code in another file like Action.jsx, Reducer.jsx. So don't worry if you are confused like what i am saying now and how to manage all of things dont worry i am here for you guys. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Make Redux Wrapper

# Make all files (Action, Reducer, Store)

# Make Wrapper Around React App

# Make Redux Store

# Interview Question

Make all files (Action, Reducer, Store)

First, we make all file like action , reducer, store but only in this blog we will code inside Store,jsx file and what is the purpose of Store.jsx etc okay don't worry we will for move forward step by step.

In src folder first we make a folder as called as redux and after then we will make a file name as Action .jsx, Reducer.jsx

src folder => redux folder => Action.jsx => Reducer.jsx

If we make a reducer then for combining all reducers we make a file called as rootReducer.jsx file.

if you little bit confused don't worry gradually we will know and learn everything.

Make Wrapper Around React App

Now, inside react-app and the file is main.jsx (might be different name in your case like index.jsx) we will cover with provider around the react-app just because of if we use of redux app in another page of react app then we can access data of redux in  any kind of page of react-app.

And now wrapping time. So if we remove strictmode then no issue in our program.

import the provider from react-redux and then after removing strictmode we will write and wrap via provider.

like this -

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from 'react-redux'


//www.kumaratuljaiswal.in www.hackingtruth.in

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider>
    <App />
    </Provider>
)

But there is some error because lets check output.

So, its time to make redux store. lets move forward with the next step.

Make Redux Store

The Redux store is the main, central bucket which stores all the states of an application. It should be considered and maintained as a single source of truth for the state of the application.

But you must have seen in the diagram given above, first of all we create the action file and reducer fie andonly then e create the store file, but hrer we have not yet written the code in the reducer file. so for this we create the store file. we will create a dummy store in the file.

import { createStore } from "redux";

const dummyReducer = () => 
{
     return 100
}

const Store = createStore(dummyReducer)

export default Store

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from 'react-redux'

import Store from './redux/Store.jsx'

//www.kumaratuljaiswal.in www.hackingtruth.in

console.log(Store)

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={Store}>
    <App />
    </Provider>
)

Now it is finally running and all are done. After this blog we will make Action file and etc.

Watch Full Tutorial

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

Disclaimer

Hello viewers, i am back again for you and now we will start from redux-saga. So, we will teach first how to install redux and saga packages and after that we are ready for implemenation of redux-saga. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Install redux and saga package

# npm install react-redux

# npm install redux

# npm install redux-saga

so lets start with gain more details for installing these packages but it will be install only if you have installed react for your product.

When we use react with redux-saga for installing these libraries.

First Library

Create a react redux app = CLICK Here

In this site, through we can install redux app with 2 methods but if you see that there is one of them installation way are  like ( npm create-react-app my-app --template redux ) but we don't go through this method because of either the ready-made template, what can we say, gives a complete structure in which you will have difficulty in understanding which structure in made and how.

Thats why we have to prefer install like this way ( npm install redux or npm i redux )

For check it is installing or not ? then go to package.json file and there is redux and his version are available.

Now let's move forward.

Second Library

Using Create React App = CLICK Here

In this site, through we can install react-redux app with this command ( npm install react-redux or npm i react-redux )

Third Library

install react-saga = CLICK Here

In this site, through we can install redux-saga app with this command ( npm install redux-saga or npm i redux-saga )

Finally all are done. After this blog we will make Action, Reducer, Store, Constant, and saga file.

Watch Full Tutorial

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

Disclaimer

 ES6 Gives us a new syntax for defining functions using a fat arrwo. Arrow fucntions bring a lot of clarity & code reduction.

ES6 is different version of the ECMAScript specification. Which is the standard that defines the scripting language that javascript is based on.

ES6 release on 2015 and there are so many features Arrow function, classes, let and const for variables.

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. 

Each child in a list should have a unique "key" prop 

When we use this code like this we got an error in our outpage page "Each child in a list should have a unique "key" prop" 

function MapWithBoxes() {
  const [movies, setMovies] = useState([1, 2, 3, 4, 5]);
  const boxes = movies.map(() => {
    return <Box/>
  });

The "Each child in a list should have a unique 'key' prop" warning in React occurs when you render a list of components or elements (e.g., within a map function) without specifying a unique key prop for each item. React uses the key prop to efficiently update and reconcile the virtual DOM when items in a list change, so it's essential to provide a unique key for each item.

To fix this warning, you need to assign a unique key to each element or component you're rendering in the list. Typically, you can use a unique identifier from your data or the index of the item as the key. Here's how you can fix it in your MapWithBoxes component:

function MapWithBoxes() {


  const [movies, setMovies] = useState([1, 2, 3, 4, 5]);
  const boxes = movies.map(
    (item, index) => {
        return <Box key={index} />
    }
)

 OR

function MapWithBoxes() {


  const [movies, setMovies] = useState([1, 2, 3, 4, 5]);
  const boxes = movies.map(
    (item, index) => {
        return <Box key={item.id} />
    }
)

In this example, I'm using the item itself as the key since the movies array appears to contain unique items.

Disclaimer

 ES6 Gives us a new syntax for defining functions using a fat arrwo. Arrow fucntions bring a lot of clarity & code reduction.

ES6 is different version of the ECMAScript specification. Which is the standard that defines the scripting language that javascript is based on.

ES6 release on 2015 and there are so many features Arrow function, classes, let and const for variables.

React

How to make boxes using map and useState in reactjs

This is a React functional component named MapWithBoxes that renders a list of boxes using the map method and a Box component. Let's break down the code and explain each part:


1. Import Statements:

import React, { useState } from "react";

 
The code imports the React library and the useState hook from React. useState is used to manage state within functional components.

 

2. MapWithBoxes Component:

function MapWithBoxes() {

 
This defines a functional component named MapWithBoxes.

 
3. State Management:

const [movies, setMovies] = useState([1, 2, 3, 4, 5]);

 
This line initializes a piece of state named movies using the useState hook. The initial state is an array [1, 2, 3, 4, 5], which represents a list of movies (though the actual content is not used in this example).

 

4. Mapping Over Movies:

const boxes = movies.map(() => {
  return <Box />
});

 

This code uses the map function to iterate over the movies array. For each item in the array, it creates a Box component. The key prop is set to the index to help React efficiently update and render these components.


5. JSX Rendering:

return (
  <div/>
    <div className="max-w-[1240px] shadow-2xl min-h-[400px] mx-auto p-3 "/>
      {/* Input Element */}
    <input
        type="search"
        className="w-full border border-black rounded text-slate-500 p-4"
      />

      {/* Grid of Boxes */}
      <div className="w-full grid grid-cols-4 gap-5">{boxes}</div/>
    </div/>
  </div/>
);

Inside the return statement, there is JSX code that defines the component's layout.

It includes an input element for searching (though it doesn't have any functionality in this example).

The boxes array of Box components is rendered within a grid layout using the CSS classes provided.



6. Box Component:
 

const Box = () => {
  return <div className="shadow min-h-[200px] border border-black mt-3"/></div/>;
};

 

This defines a separate functional component named Box.

The Box component renders a <div> element with some CSS classes to create a box-like appearance with shadows and borders.

Output

In summary, this React component MapWithBoxes renders a list of boxes using the map function to iterate over an array of movie items. Each box is created using the Box component, and the resulting boxes are displayed within a grid layout. This code example is a simplified template and doesn't include any actual movie data or search functionality.

Disclaimer

 ES6 Gives us a new syntax for defining functions using a fat arrwo. Arrow fucntions bring a lot of clarity & code reduction.

ES6 is different version of the ECMAScript specification. Which is the standard that defines the scripting language that javascript is based on.

ES6 release on 2015 and there are so many features Arrow function, classes, let and const for variables.

React

How to API calling in Reactjs

The code you provided is a React component called APICalling that fetches data from a movie API using the Axios library and displays it on the screen. 

1. Import Statements:

import axios from 'axios';
import React, { useEffect, useState } from 'react';

The code imports the axios library, which is a popular JavaScript library for making HTTP requests.

It also imports React's useEffect and useState hooks, which are used to manage state and handle side effects in a functional component.

 
2. APIURL Constant:

const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";

This constant holds the URL of the movie API endpoint you want to fetch data from. It includes a query parameter for sorting movies by popularity, an API key, and a page number.



3. State Management:

const [search, setSearch] = useState("");

 
The useState hook is used to declare a state variable named search and its corresponding setter function setSearch. This state variable will be used to manage the search term.

4. getAllMovies Function:

const getAllMovies = () => {
    axios.get(APIURL)
    .then(
        (response) => {
            console.log(response.data.results);
            setSearch(response.data.results);
        }
    )
    .catch(
        (error) => {
            console.log(error);
        }
    )
}

getAllMovies is a function that makes an HTTP GET request to the APIURL using Axios.

When the request is successful, it logs the movie data received from the API and sets the search state with the movie results.

If there is an error in the request, it logs the error.



5. useEffect Hook:

useEffect(
    () => {
        if (search === "") {
            getAllMovies();
        } else {
            // getSearchedMovies();
        }
    },
    [search]
)

 

The useEffect hook is used to perform side effects in the component. In this case, it's used to fetch movie data when the search state changes.

The useEffect is set up with a dependency array [search], which means it will be triggered whenever the search state changes.

If the search state is empty, it calls the getAllMovies function to fetch the most popular movies. If search has a value, it could be used to implement searching for movies, but this part of the code is currently commented out (// getSearchedMovies();).




6. Render:

return (
   <div>APICalling</div>
)
 

 

The component's render function simply returns a <div> element with the text "APICalling". This is the content that will be displayed on the screen when this component is rendered.

Full Code

import axios from 'axios';
import React, { useEffect, useState } from 'react'
const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";

function APICalling() {

    const [search, setSearch] = useState("");

    const getAllMovies = () => {
        axios.get(APIURL)
        .then (
            (response) => {
                console.log(response.data.results);
                setSearch(response.data.results);
            }
        )
        .catch(
            (error) => {
                console.log(error)
            }
        )
    }

    useEffect(
        () => {
            if(search === "") {
                getAllMovies();
            } else {
                //getSearchedMovies();
            }
        },
        [search]
    )
      
  return (
    <div>APICalling</div>
  )
}

export default APICalling

 
In summary, this React component fetches movie data from an API when it's mounted or when the search state changes (though the search functionality is currently commented out), and it logs the results to the console. The actual movie data is stored in the search state variable, which can be used for rendering movie information in the component's UI.

Output

Disclaimer

Callbacks and Async Operation

In Javascript the code is executed line-by-line in a sequence so when we run a parallel operation or asynchronous operation like fetching data from backend, javascript doesn't waits for the response it simply executes the next line of code. We give the asynchronous operation a function to call when it is completed. This function is called a Callback Function.


await - Asynchronous actions are the action that we initiate now  & they finish later.


Eg - SetTimeout


Synchronous actions are the actions that initiate & finish one-by-one.


Async - Asynchronous it allows a program to run a function without stop/hold/freezing the entire program. This is done using the Async/Await keyword.

Async/Await make it easier to write promises.

The keyword 'async' before a function makes the function return a promises.

The keyword await is used inside async keyword.

Introduction to Promises

A promises is used to handle the asynchronous result of an operation. It defers the execute of a code block until an asynchronous request is completed. This way, other operations can keep running without interruption.


A promises has 3 states :

# Pending - It means the operation is going on.

# Fulfilled - It means the operation was completed.

# Rejection - It means the operation did not completed and an error can be thrown.

<script>

async function atul() {
      let promises = new promise((resolve, reject) => {
      setTimeout(() =>
                    resolve("Done"), 3000)
      
      });

let result = await promise;
    alert(Result);
    console.log("The result is ", result);
    
    }

atul();

</script>

Disclaimer

 

All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.

Array Function: filter()

It iterates through the array to create a new array. You can decide which elements should be addded in the new array based on some conditions.

 
ES6 is different version of the ECMAScript specification. Which is the standard that defines the scripting language that javascript is based on.

ES6 release on 2015 and there are so many features Arrow function, classes, let and const for variables.

Syntax

arr.filter(item => {
    // return true/false to add /skip the current item
})

Example

Lets see if we return true.

Actually we have used this code in reactjs called as TheArrow.jsx

import React from 'react'

function TheFilter() {
   
    
   const myArr = [1, 2, 3, 4];

    const myResult = myArr.filter(item => {
       
              return true
             
    })
   console.log(myResult);
  
   


  return (
    <div>
    
    <h1>Check console</h1>
    
    </div>
  )
}

export default TheFilter

Output

Let's take another example of if we return even or odd condition.

import React from 'react'

function TheFilter() {
   
    
   const myArr = [1, 2, 3, 4];

    const myResult = myArr.filter(item => {
       
      return item % 2 === 1;
             
    })
   console.log(myResult);
  
   


  return (
    <div>
    
    <h1>Check console</h1>
    
    </div>
  )
}

export default TheFilter

Output

if you want you can also check another type of return condition like - 

 return item % 2 !== 0;
 return item % 2 === 0;

Disclaimer

 

All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.