The Development Factory

 Explore Core Redux Concepts Redux is the library which can be used with any javascript framework and not just with react .Indeed redux team , now  recommends usage of extra package called reduxjs toolkit and will cover this later in the blog post. These core concepts will  make the baseline for the redux learning. Let's explore core redux concepts and clear the basics from the starting.   This is the folder structure that will look like in the simple project. Will will first run the command npm init -y to install the package json file and then install redux with command npm install redux  which will automatically install package- lock. Json  file and node_modules  later , also create the server.js file in the project .  Then , we will import redux and create the store with the help of the function createStore()  . It will give the deprecation warning which you should ignore it first because redux team recommends using reduxjs toolkit ....

  Introduction We know what is redux and as we know it is an alternative to react context hook . Redux is an replacement for react context and cover many potential disadvantages when using cross component and app wide state across multiple components . Let's explore core redux concepts and how we use redux in our react applications with the flow diagrams . So it better understand to you and the concept easily get into your projects. Redux  , stores the state in the centralized location where it can be used globally over the web across multiple components.  So we should first be discussing about that peace of content.   1) Central data store generally keep all the state or updates of state which later notifies the component which state has changed . Central Data Store is the location where all the mutation or updates of state kept which later be used in the component. 2) After setup the central data store for managing the state , how the store notify the componen...

  Introduction Redux is  a javascript library which can be used with any framework React , Angular etc. it is used to store some data globally which is used to share state across multiple components. Now , you might be confusing that in react we shared state in component with useState and many more hooks . So why using redux at first place ? Separation of states Separation of state are generally on the basis of  what state is used between the components and where they are shared across the whole react app. We will look at what separation of state in redux and see how this came to rescue and why we generally use it instead of hooks provided by react. 1)  Local State The state which is used when taking input of the used for the form field . The local state is limited to the single component and useState hook is generally used to maintain local state as they are not complex to maintain 2) Cross - Component State The state which is used in multiple components for ex...

  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...

  Introduction React Router is used to make the dynamic Single Page Applications (SPA) without affecting the user interface with the reloads and can give the multi page functionality through the navigation in react Outlet It is used to render the child components where all the child components shared the same parent component example navigation bar. First Step is to add the special key name children and provide the array of object route definitions whose route  , will start from the parent route. It is the special route which will have the component that contains the outlet from the react-router and the component which will render in all child components. In this example , we have the Root layout component which will be rendered to home child component for the "/" route Second step  is to create the special component that will contain the common element and the outlet component from the react-router . In this example , we have the main navigation bar which will be shared...

  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...