Upload
paddy-lock
View
398
Download
3
Embed Size (px)
Citation preview
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-development-tutorial-using-react-and-redux