Getting Started with React and Redux

What is ReactJS?

● An open source JavaScript library used to

create dynamic UIs for web applications

● UI / View ONLY

● No Assumptions

● Component Based

● Isomorphic JavaScript

● Design simple views for each state in your

application

● Updates and renders ONLY the parts needed

● More predictable and easier to debug

React Is Declarative

Component-Based

● Encapsulated components that can work

together but make no assumptions

● Keep state out of the DOM and pass rich data

through your app

● Components can be nested and can pass state

and properties to one another

● Provides better readability and reusability

▪ Props (or properties) are a components configuration

or options

▪ Components can pass props to other components

▪ Props are received from above and are immutable as

far as the component receiving them are concerned

this.props.name

Props

● Looks similar to XML

● Defines a familiar syntax for defining tree structures with attributes

● Isn’t required but makes things easier

JSX – JavaScript Syntax Extension

Component Example

var Hello = React.createClass({

render: function() {

return <div>Hello {this.props.name}</div>;

}

});

ReactDOM.render(

<Hello name="World" />,

document.getElementById('container')

);

Page Components

What is Redux?● Redux is a predictable state container for JavaScript

applications

● It helps to write applications that behave consistently,

run on different environments and are easy to test

● Redux does NOT need React or any other library or

framework

Reducers

▪ Changes are made with pure functions called “Reducers”

▪ Reducers take the previous state and an action, and

return the next state

▪ You can start with a single reducer and then split and

combine multiple reducers as the app scales

Simple Example

store.dispatch({

type: 'INC',

payload: 1

});

store.dispatch({

type: ‘DEC',

payload: 1

});

const reducer = function(state, action){

// Make changes to state based on action

if(action.type == 'INC'){

return state + action.payload;

}

else if(action.type == 'DEC'){

return state - action.payload;

}

return state;

}

Flux

▪ Redux was inspired by Flux which is also an application

architecture that helps manage state

▪ Both Flux and Redux suggest keeping your model and

update logic in a certain layer of your application. In Redux,

these are “reducers” and in flux, these are “stores”

▪ Redux does not have the concept of a dispatcher

Store

Stores bring together actions and reducers. Stores have the following

responsibilities…

▪ Hold application state

▪ Allows access to state using getState();

▪ Allows actions to update state via dispatch

▪ Registers listeners via subscribe(listener);

▪ Handles unregistering of listeners via the function returned by subscribe(listener).

Creating a Store

▪ Redux uses single stores and uses reducers to split

data handling logic

import { createStore } from 'redux'

import todoApp from './reducers'

let store = createStore(todoApp)

store.subscribe(() => {

console.log('Store Changed...', store.getState());

});

Other Inspirations

▪ Elm – Functional Programming language which enforces a

model view update architecture

▪ Immutable – JS library implementing persistent data

structures

▪ Rx (Reactive Extensions) – Helps manage asynchronous

data

The Complete Web Development Tutorial Using React and Redux - Eduonix

Lectures: 29

Video: 4 hours of Content

Languages: English

Includes:

30 day money back guarantee! Lifetime Access. No Limits!

Certificate of Completion

In this Course you will learn

● What is React and Redux

● A brief introduction to JSX, the JavaScript extension

● A detailed breakdown of React and its core features including state & nested components, methods and PropTypes & Validation

● A detailed breakdown of Redux and its core features including state, store and reducers

● How to install and work with Webpack

● How to fetch data from an API

● Using React and Redux together to create a WeatherCheck Application

To Get this Course at $10 Use Coupon Code : OFFER10

Connect with us on Social Platforms

Reference Link

https://www.eduonix.com/courses/Web-Development/the-complete-web-development-tutorial-using-react-and-redux

Thank You