Ppt on react and redux

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

React Is Declarative ●

Design simple views for each state in your application

●

Updates and renders ONLY the parts needed

●

More predictable and easier to debug

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 â–Ş 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

JSX – JavaScript Syntax Extension ●

●

●

Looks similar to XML Defines a familiar syntax for defining tree structures with attributes Isn’t required but makes things easier

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 });

const reducer = function(state, action){ // Make changes to state based on action if(action.type == 'INC'){ return state + action.payload;

store.dispatch({ type: â&#x20AC;&#x2DC;DEC', payload: 1 });

} 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 â&#x2013;Ş 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

Reference Link https://www.eduonix.com/courses/Web-Development/the-complete-web-develop ment-tutorial-using-react-and-redux

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

Connect with us on Social Platforms

Thank You