Getting started with React and Redux
1 like442 views
React and Redux are JavaScript libraries used to build user interfaces and manage application state. React focuses on building reusable UI components and rendering views based on state changes. Redux helps manage state by using pure reducer functions to update state in a predictable way in response to actions. Together, React and Redux provide a declarative way to build component-based UIs and maintain consistent state across a JavaScript application.
Getting started with 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') );
- 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