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