How React and Redux make life easier for Developer?

why use React?

React’s official definition state that, It is an open source JavaScript library for building user interfaces. It helps us manage a lot of things easier with features like DOM, handling data with states, component-based structure etc. If you are facing the problem in managing the state of a page, you should choose React. the best thing about React is, we can easily change our page view according to our state. It allows you to manage state and render different outcomes based on what the state is. It’s a real joy if you get it right.

Basic terms, that you must know in React:

Component

In React, the different part of a single page application is said to be a component which can be reused anywhere in the application.

Props

Props is simply a technique for passing information from one component to another component as they talk to each other through props. they are immutable i.e. it will not be changed (the value of props).

State

Since the props cannot change, the State steps up. The state is used for mutable data or data that will change. when we need to change the view of any application, we simply change the state by setState. Normally components don’t have state and so they are called stateless. A component using state is known as stateful.

React-Router

when we are working on a single page application, it is difficult to manage the state of UI because when the users interact with your app, they expect, The URL displayed in the address bar always reflects the thing that they are viewing or they can navigate back and forward in the browser successfully. To deal with all of this, you should go with Routing.

What is Routing?

Routing is a process for selecting a path in the traffic of network.

In React, there can be multiple of components, we can route them by fixed their path according to the application requirement. and we can easily change the state. let’s talk about, how can you do this?

So first we need to install react-router-dom, by command:

 npm install --save react-router-dom

now we have to import <BrowserRouter /> or <HashRouter /> component for wrapping the all routes. BrowserRouter is used in dynamic web app while <HashRouter /> is for static web application. now, we also need to import Route for fix the path of every component. so, when we fix the path of a particular component, that component can be displayed using their path.

Redux

why Redux?

When your app will be large, and hard to manage the state, you should go with Redux. because the single page applications are increasingly complicated every day. and It will hard to manage the state using React on a large application.

How Redux works with React?

If you are familiar with Javascript and React.js, it will be easy to understand how the Redux works with React. There are some characters which play their role. let’s talk about them

Store

Store in Redux is for storing all the data of state. To create the store, we can use createStore method of react-redux which take a function as an argument which is imported from the Reducer(also a character). Store is also passes throgh <Provider /> which is the higher-order component provided by React Redux. We wrap <Router /> in <Provider/> so that route handlers can get access to the store .

Reducers

Reducer is a pure function which takes two argument i.e. the previous state and an action and return a new state. it passes through the store to update it and then the view will be update as well.

Action Creator

It includes all the action which is triggered for the changing of state. Actions are declared according to our requirement. when any action is triggered, we need to dispatch that action and it will go to the reducer to perform the specific action.

Redux-flow