React js programming concept

What is React JS?
React is a declarative, efficient, and flexible JavaScript library for
building user interfaces. It lets you compose complex UIs from small and
isolated pieces of code called “components”.

Must Know about Topics for React JS?
Declarative programming is a programming paradigm.that expresses the
logic of a computation without describing its control flow. For Declarative
programming developer has less control over process and control flow, tells other
or other process to do the job. Such as ask your friend to do your homework, he or
she will do that, you don’t care.
Imperative programming is a programming paradigm that uses statements
that change a program’s state. More control over control flow and processes.
Imperative programming is, you will do your homework by yourself and you will
care about that job.
Pure function: this is a function, it always return the same output, for
same input or parameter.
In Javascript: example of pure function is
`const add = (x, y) => x + y // A pure function`
1. React Component Render function must be pure function
2. Redux Recommend Option is using pure function

Must Know about Topics for React JS?
Virtual DOM
Virtual DOM is any kind of representation of a real DOM. Virtual DOM is about avoiding
unnecessary changes to the DOM, which are expensive performance-wise, because
changes to the DOM usually cause re-rendering of the page. It allows to collect several
changes to be applied at once, so not every single change causes a re-render, but instead
re-rendering only happens once after a set of changes was applied to the DOM.
React JS using Virtual DOM
Shadow DOM
Shadow DOM is mostly about encapsulation of the implementation. A single custom
element can implement more-or-less complex logic combined with more-or-less complex
DOM. Shadow DOM refers to the ability of the browser to include a subtree of DOM
elements into the rendering of a document, but not into the main document DOM tree.

React is Declarative Programming and How?
Imperative Programming: In this
figure, we have full control over
this button color. We can change
the color by changes its different
attributes, we also have full control
over click option to change color
the button.
Declarative Programming: In react js,
we can change the color of the button
without touch the button control, just
declares element should rendered
give current state and react changes
the color without manipulate the
DOM itself.

What is Redux and Redux Flow for React JS?
Redux is a predictable state container for JavaScript apps. Most popular state
management framework for react JS.
Redux Life cycle without Web API Integration Redux Life cycle with Web API Integration

Sample Life Cycle of React Redux
Ref: https://medium.com/@rajaraodv/using-middlewares-in-react-redux-apps-f7c9652610c6

Configure the Redux with React JS?
I have use “create-react-app” for building the primary project, which will helps
you to understand how redux works with react js.
We need Node js V1.8.10 stable, “create-react-app” for develop the simple project
with react and redux. Need some plugins related to “react js” named.
1. React Router Dom
2. Redux Thunk
3. React Router Redux
4. Redux Promise
5. Axios
What is React Router?
React Router is the standard routing library for React. It keeps your UI sync with
the URL. it has a simple API with powerful features like Lazy code Loading,
dynamic route matching and Location transition handling build right in. To know
about react router you can go to this link “react-router”

What is Redux Thunk?
Redux Thunk is middleware, which allows you to write action creators
that return a function instead of a action. The thunk can be used to delay
the dispatch of an action, or to dispatch only if a certain condition is met.
To know redux thunk more about, you can go to this link “redux-thunk”.
What is React Router Dom?
React Router includes three main packages:
1. react-router. This is the core package for the router.
2. react-router-dom. It contains the DOM bindings for React Router. In
other words, the router components for websites.
3. react-router-native. It contains the React Native bindings for React
Router. In other words, the router components for an app
development environment using React Native.

What is Redux Promise?
The middleware returns a promise to the caller so that it can wait for the operation
to finish before continuing. So Developer can add the `.then` and `.catch` after
`dispatch` any action at `redux`.
What is React Router Redux?
You use Redux to manage your application state. You use React Router to do
routing. All is good.But the two libraries don't coordinate. You want to do time
travel with your application state, but React Router doesn't navigate between pages
when you replay actions. It controls an important part of application state: the
URL.
This library helps you keep that bit of state in sync with your Redux store. We keep
a copy of the current location hidden in state. When you rewind your application
state with a tool like Redux DevTools, that state change is propagated to React
Router so it can adjust the component tree accordingly. You can jump around in
state, rewinding, replaying, and resetting as much as you'd like, and this library will
ensure the two stay in sync at all times.

Create the Project and Install the react js related plugins
1. Command for `npm` is `npm install -g create-react-app`
and Command for `yarn` is `yarn add global create-react-
app`
1. Command for create project `create-react-app react-redux-
sample` and go to the `cd react-redux-sample`
1. Then install the plugins for react redux by `npm install --save
redux react-redux react-router-dom react-router-
redux redux-thunk redux-promise axios history`

Create Combine Reducer for Redux Store
You can get full source code in Github:
`https://github.com/tariqulislam/react-redux-sample`
For Modular application and Large scale application we need multiple
reducer to which are later combine by `combineReducer` redux function,
this function consolidate the all the module wise reducer or seperate
reducer to one.
In this project, i have create file at `src/core/` named `rootReducer.js`
which will combine or consolidate separate module wise `reducer`.
import { combineReducers } from 'redux'
const rootReducer = combineReducers({ })
export default rootReducer

Create Redux Store with Combine Reducer
Create redux store using redux, react redux, react router redux, redux
promise, history. I have create the file at `src/core` named `store.js` which will contains
code for `redux store`
import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import promise from 'redux-promise'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './rootReducer'
export const history = createHistory()
const initialState = {}
const enhancers = []
const middleware = [thunk, promise, routerMiddleware(history)]
if(process.env.NODE_ENV === 'development') {
const devToolExtension = window.__REDUX_DEVTOOLS_EXTENSION__
if(typeof devToolExtension === 'function') { enhancers.push(devToolExtension())}
}
const composedEnhancers = compose(applyMiddleware(...middleware),...enhancers)
const store = createStore(rootReducer,initialState,composedEnhancers)
export default store

Create the Reducers For Home Component
Then I have create file named `home.reducer.js` file at `src/reducers` directory at project which
will contains àction constraint`, àctions`, `reducer` for `Home Component`, `state` for
1. Add the àction constraint` to `home.reducer.js` which will show and hide the
paragraph of home page
export const HIDE_HOME_INFO = 'HIDE_HOME_INFO'
export const SHOW_HOME_INFO = 'SHOW_HOME_INFO'
1. Initialize the `state` of the `reducer` by:
const initialState = {
showInfo: false
}
1. Then add the action those action constraint.
export const showParagraphInfo = () => {
return dispatch => { dispatch({ type: SHOW_HOME_INFO })}
}
export const hideParagraphInfo = () => {
return dispatch => { dispatch({ type: HIDE_HOME_INFO })}
}

Create the Reducers For Home Component
4. Create the Reducer for `Home Component` at `home.reducer.js` file
export default (state= initialState, action) => {
switch (action.type) {
case SHOW_HOME_INFO:
return {
...state,
showInfo: true
}
case HIDE_HOME_INFO:
return {
...state,
showInfo: false
}
default:
return state
}
}
5. Then change the code at `src/core/rootReducer.js` file and add `home.reducer`
for combine and resolve the `home module reducer` to `redux store`
import { combineReducers } from 'redux'
import home from '../reducers/Home/home.reducer'
const rootReducer = combineReducers({ home})
export default rootReducer

Pass the Redux store and history to Main
Component of Project
1. I use `{ Provider}` from `react-redux` , Using the `{ Router`}` from `react-
router-dom` and also using `{ store }`, `history` from `src/core/store.js` file
to connect and pass `redux store`, `redux reducer` to main `component`
named `App` to `src/index.js` file. Change the ` change the `Dom Element`
of the `ReactDOM` `render` function
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { Router } from 'react-router-dom'
import store, {history} from './core/store';
import './assets/index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<div>
<App />
</div>
</Router>
</Provider>
, document.getElementById('root'));
registerServiceWorker();

Create `Home` Component for `Resolve Home
Reducers`
1. Create `Home` component at `src/components/Home.js` file at project
2. Import all dependency and reducer to connect with `redux` with `Home`
react component
import React, {Component} from 'react'
import { push } from 'react-router-redux'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
● `{Component}` and `React` of `react` package help us to build the `React Component`.
● `{ push }` of `react-router-redux` package help to `route` from one component to another component
● `{ bindActionCreators }` of `redux` package provide the feature to mapping action with any UI `event` and also
tigger the `redux` action which are `declare` at `redux action`
● `{ connect}` is curry function of `react-redux` package, which will make connect with `reducer` of this component
● `connect(mapStateToProps, mapDispatchToProps)(<Component name>)`
● ` mapStateToProps`: which will map all the state between `redux reducer` and `component`
What is `mapStateToProps`?
1. `mapStateToProps` should be function which contains the ` component’s
state` related to `redux store`
2. This function connect the state from the store to corresponding props of the
element.

About Smart Component With Redux
3. So `React` component can access the reducer state object
4. This function also subscribe to the redux store and update all the props
automatically.
5. This function must return object where key of the props name to be used in the
react app and value is the key wise current state.
● `mapDispatchToProps`: which will map all the `dispatch` action with `component`
UI’s èvent`
What is `mapDispatchToProps`?
1. `mapDispatchToProps` can either be a function or an object
2. It will return Object, which key is the name of functions, which are used in
`React Component`, `key` name must be same as `React Component`,
otherwise action will no work.
3. The `value` of the `key` must be same as àction creator` name. Otherwise
this function or object can not sync the àction creator` with `react
component function`.
4. `bindActionCreator` function will helps `mapDispatchToProps` to bind the
àction creator` with React UI component function.

Home Component Design
class Home extends Component {
componentWillMount () {
this.props.hideParagraphInfo()
}
render () {
return (
<div>
Home Page
</div>
)
}
}
● I have extends the `React` `Component` Class to create `Home`
Component
● `React Component` , we need `constructor` ,
`componentWillMount` , `componentDidMount` and `render`
function
● `constructor`: constructor() If you don't initialize state and you
don't bind methods, you don't need to implement a constructor for
your React component. The constructor for aReact component is
called before it is mounted

About Smart Component With Redux
● `componentWillMount`: when the props and state are set, we
finally enter the realm of Life Cycle methods. The first true life cycle
method called is componentWillMount(). This method is only called
one time, which is before the initial render. Since this method is
called before render() function., we can declare any `redux` `action`
when component is loading.
● `componentDidMount`: componentDidMount() is invoked
immediately after a component is mounted (inserted into the tree).
Initialization that requires DOM nodes should go here. If you need to
load data from a remote endpoint, this is a good place to instantiate
the network request.
● To Render element using `render()` function. The render() function
should be pure, meaning that it does not modify component state, it
returns the same result each time it’s invoked, and it does not directly
interact with the browser.

Handle Ajax Request By React Redux
1. For ajax request handling, we have to create `home.async.js` file at
`src/components/Home` directory
1. For learning purpose, we have to create function named `getAllPosts`
which is async function to get all post from sample json web api site
named `https://jsonplaceholder.typicode.com`
1. We are using `axios` package to get the data from json api.
import axios from 'axios'
export const getAllPosts = async () => {
const getAllPosts = await axios.get(
"https://jsonplaceholder.typicode.com/posts",
{
headers: {'Content-Type': 'application/json'}
}
)
return getAllPosts;
}

Home Component Connect to Redux Store
1. Add code for connect to redux store to Home Component
const mapStateToProps = (state) => ({
showInfo: state.home.showInfo
})
const mapDispatchToProps = dispatch => bindActionCreators({
showParagraphInfo,
hideParagraphInfo,
goToAboutPage: () => push('/about-us')
}, dispatch)
export default connect(
mapStateToProps,
mapDispatchToProps
)(Home)
● `mapStateToPorps`: contains `showInfo` redux `state` which
create the `mapping` through React Component to Redux Store

Home Component Connect to Redux Store
● `mapStateToProps`: which will contains `showParagraphInfo` ,
`hideParagraphInfo` and `goToAboutPage` redux function, which
create mapping between `home.reducer` with `Home` component
● Then `connect` function connect `Home` component with Redux
Store.
● `goToAboutPage1: () => push(‘/about-us’)` function change
the route of the `component` and it will effect the `redux store` of
the `home` component and `about` component also.

Add the Action and Redux Store State to
`Home` Component at `render` function
componentWillMount () {
this.props.hideParagraphInfo()
}
● `this.props.hideParagraphInfo()` redux `action` call in
`componentWilMount` to hide the paragraph of Home Page.
render () {
return ( <div>
<h1> Home Page</h1>
{!this.props.showInfo && <button onClick={() =>
this.props.showParagraphInfo()}> Show Paragraph </button>}
   
{this.props.showInfo && <button onClick={() =>
this.props.hideParagraphInfo()}>Hide Paragraph</button>}
{ this.props.showInfo && <p> this is paragraph</p>}
<button onClick={() => this.props.goToAboutPage()}> Go To About
Page</button>
</div>
)
}

Create the About Element to Check the Route
of ‘react router` and `react router dom`
● `this.props.showParagraphInfo()` redux `action` added in
<button> `onClick` event to show the paragraph
● `!this.props.showInfo` will check the `redux store` provide the
`showInfo` false, it will hide `Show Paragraph` button and
`this.props.showInfo` is `redux store state` which helps react
component to shows the paragraph at `Home component`
import React from 'react'
const About = () => (
<div>
<h1> About Us</h1>
<p> Hello World</p>
</div>
)
export default About

Add the `React Router` to `React Router Dom`
route through `React Component`
import React, { Component } from 'react'
import { Route, Link } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import './assets/App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className='App-header'>
<Link to="/"> Home</Link>
<Link to="/about-us"> About </Link>
</header>
<main>
<Route exact path="/" component={Home} />
<Route exact path="/about-us" component={About} />
</main>
</div>
); }
}
export default App;

Add the `React Router` to `React Router Dom`
route through `React Component`
● Add the `{ Route, Link }` of `react-router-dom` package which has
`React Router 4` functionality to router through the `react
component` and make navigation of the application
● `<Link to="/"> Home</Link>` create the link option like <a>
tag at `DOM`
● `<Route exact path="/" component={Home} /> ` this will
create the route and `navigation` to `Home` component
● `<Route exact path="/about-us" component={About} />`
this will create route and `navigation to `About` component.

Ajax Request Handling with Redux
1. For ajax request handling, we have to create home.async.js file at
src/components/Home directory
1. For learning purpose, we have to create function named getAllPosts
which is async function to get all post from sample json web api site
named https://jsonplaceholder.typicode.com
1. We are using axios package to get the data from json api.
import axios from 'axios'
export const getAllPosts = async () => {
const getAllPosts = await axios.get(
"https://jsonplaceholder.typicode.com/posts",
{
headers: {'Content-Type': 'application/json'}
}
)
return getAllPosts;
}

Run the Application and Test
● Run the application by `Yarn` or `npm` . For `Yarn` command `yarn start`
and for `npm` command `npm start`
Output:
● Home page output
● Click to Show Paragraph
● Click to Hide Paragraph

React js programming concept

More Related Content

What's hot

Similar to React js programming concept

Recently uploaded

In this document

React js programming concept