Getting started with 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

● 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')
);

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

Getting started with React and Redux

Recommended

More Related Content

What's hot (19)

Similar to Getting started with React and Redux (20)

More from Paddy Lock (13)

Recently uploaded (20)

Getting started with React and Redux