In this PPT you will learn some of the features and tips on react and redux.

1. Getting Started with React and Redux

2. 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

3. ● 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

4. 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

5. ▪ 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

6. ● 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

7. Component Example
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);

8. Page Components

9. 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

10. 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

11. 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;
}

12. 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

13. 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).

14. 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());
});

15. 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

16. 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

17. 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

18. 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-develop
ment-tutorial-using-react-and-redux

19. Thank You