Ppt on react and redux

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.