Building application with react and redux

Why Redux?

Redux is a predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. —  https://redux.js.org/

Single Store-

Redux centralises all of your application states in a single store.
redux enforces keeping  all states in single centralise object.
Redux is a state management tool. While it’s mostly used with React, it can be used with any other JavaScript framework or library. 

each component can access any state that it needs from this store.


Reduced BoilerPlate-
your container component subscribe to redux store autometically so you dont have to wire up event emitter to subscribe to the dispatcher.
there is no dispatcher at all

Immutable store-

Hot reloading 

small


Environment Build-

install Node-

Building app react Redux-

use my below blog to do the initial setup of project

https://javacmlearning.blogspot.com/2019/08/learn-react-js-setp-by-step.html


install visual studio

i am using prettier to format code.

after installing Prettier go to File ----> prefrences---->setting

search formatonsave and enable that.

Configure web-pack-

webpack became most popular bundler for react. it is extremely powerful.
webpack bundler compile java-script into a single minified file that works in browser.

webpack also includes development web server so server act locally during development using webpack.
webpack also use by creating react app behind the seen.

webpack configured javascript object.

config file is called webpack.config.js and is placed in project root.

webpack.config.js

module.exports = {

module: {

rules: [

{

test: /\.js$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader',

},

},

],

},

};