Let us help you find the training program you are looking for.

If you can't find what you are looking for, contact us, we'll help you find it. We have over 800 training programs to choose from.

React and Redux

  • Course Code: Programming & Development - React and Redux
  • Course Dates: Contact us to schedule.
  • Course Category: Programming and Development Duration: 5 Days Audience: Experienced web developers who want to be equipped to handle large-scale web applications.

React is a JavaScript library that makes creation of beautiful and capable web applications possible with much less work. It allows software developers to write ultra-modern web-based programs as part of large teams. Redux is also a JavaScript library. Redux makes the management of web data extremely controllable. The combination of the two is powerful! 

In this course you’ll learn both topics from scratch. We’ll lay a foundation of the tooling for both libraries. Then we launch into an understanding of Redux from the ground-up, moving all the way into advanced topics like middleware and asynchronous Ajax calls through dispatchers. Finally, we’ll learn how React works and how to integrate Redux into it. 

We will get you up and running rapidly, preparing you for real-world application development with a deep understanding of React components and well-structured applications. If you are new to React and Redux, or if you’ve been working with it but not quite getting how it really works, this is the course for you! 

Audience: Experienced web developers who want to be equipped to handle large-scale web applications. 

Prerequisites: A very strong grasp of advanced JavaScript.  Please ask about our 5-day JavaScript course which will prepare you for the high-level of JavaScript fluency needed for this course. Very solid HTML5 and CSS knowledge is helpful. 

Length: 5 days 

Objectives 

Upon completion of this course, the student should be able to: 

  • Create a new React application from scratch. 
  • Use the tooling to run and debug that application 
  • Simplify complex state management with the Redux library 
  • Use best practices for reducers, dispatchers, and action creators 
  • Explain and leverage reducer composition 
  • Understand when, how, and why to use Redux middleware 
  • Handle asynchronous operations with Redux — including Ajax 
  • Understand React’s custom markup language, JSX 
  • Design and create custom React components using the best practices 
  • Know when to use stateless functional components versus class-based components 
  • Work with React props and state 
  • Use forms with React 
  • Configure and use the React Router to create navigation schemes 

Course Outline 

This outline will be adjusted based on the students’ needs and updated software versions 

  1.  
  2. Course Overview 
  3. React Introduction 
    1. What is React? 
    2. Its origins WRT Angular 
    3. React’s 3 design principles 
    4. Composition of components 
    5. How is React so darned fast? 
    6. The virtual DOM 
    7. One-way data flow 
    8. How a React app works – a peak under the covers 
    9. Transpiling, bundling, minifying with webpack 
  4. create-react-app 
    1. The need for CRA – webpack, npm, babel, JSX, eslint, es2015, jest, etc 
    2. Using npx 
    3. The only build dependency needed 
    4. Watch mode 
    5. Linting code 
    6. Ejecting 
    7. Running unit tests  
  5. Redux intro 
    1. It’s a library 
    2. The single responsibility principle 
    3. Why Redux? 
    4. Why Redux with React? 
    5. Its history and growth 
    6. The 4 concepts of Redux 
    7. State 
    8. Pure functions 
    9. Composition 
    10. Immutability 
    11. The parts of Redux 
    12. The big picture of Redux 
  6. Creating the store 
    1. Installing and including Redux 
    2. The createStore() method 
    3. The simplest possible store 
    4. Redux ducks 
  7. State and Subscriptions 
    1. Single source of truth 
    2. Initializing state 
    3. What goes in state and what should not 
    4. Why subscriptions 
    5. How to subscribe in Redux 
  8. Actions and Reducers 101 
    1. Actions are objects 
    2. The shape of actions 
    3. Type and payload 
    4. Reducers are functions 
    5. Why we have them 
    6. The shape of a reducer 
    7. Avoiding the worst Redux rookie mistakes 
  9. Actions 
    1. Action Creators in a React Application 
    2. Dispatching Actions 
    3. Mapping Actions to prop Names 
  10. Advanced Actions 
    1. Action constants 
    2. Action type enumerations 
    3. Action creators 
    4. Action creator enumerations 
  11. Reducer composition 
    1. The problem: complex state => complex reducers
    2. The solution: Create state slices 
    3. Creating reducers to handle slices 
    4. Combining reducers with Redux’s built-in combineReducers 
    5. Doing it manually 
    6. Why manually is the right way 
  12. Redux Middleware 
    1. The Open-Closed Principle 
    2. Introduction to middleware 
    3. The next() function 
    4. The required shape of middleware 
    5. Middleware’s super-powers 
    6. Recipes and examples 
    7. Why you must register middleware and how to do it 
  13. Ajax with Redux 
    1. The problem with async calls in Redux 
    2. The trick to making a good middleware function 
    3. Registering the middleware 
    4. Dispatching an Ajax call 
    5. Making RESTful API calls 
    6. How to process them into redux and then into React 
  14. Redux-thunk (Time permitting) 
    1. The need for a thunk 
    2. How redux-thunk fits that need 
    3. Installing and using redux-thunk properly 
    4. Dispatching Ajax calls with redux-thunk 
  15. Stateless Functional Components 
    1. Why less is more 
    2. A gentle intro to JSX 
    3. The 7 rules of JSX 
    4. When JSX deviates from the W3C standards 
    5. 3 simple steps to creating a component 
    6. Hosting a component 
  16. Styling React components 
    1. Styling with CSS 
    2. Specifying Inline Styles 
    3. Importing styles 
    4. Using npm libraries 
    5. The trick to importing images 
  17. Events in React 
    1. React’s synthetic events 
    2. Why do they need to add events? 
    3. The quick way to tell the difference 
    4. The event object is reused! 
    5. Passing values to the handler 
    6. Creating your own custom events 
  18. Composition with React 
    1. How to compose 
    2. Data flowing down – props 
    3. Why not 2-way binding? 
    4. Data flowing up by emitting an event 
    5. Passing data between sibling and cousin components 
    6. All the ways to communicate and the the cleanest solution 
  19. React router 
    1. How to create a SPA in React 
    2. What React router is and where it came from 
    3. 4 easy steps to routing 
    4. How to define the domain of a router 
    5. How to create routes 
    6. How to route users via a link 
    7. How to route users via a url 
    8. How to route users via JavaScript 
    9. How to read route parameters 
  1. Expressions 
    1. Demystifying expressions – how to think about them 
    2. Nesting JSX in expressions and vice-versa 
    3. Conditional rendering 
    4. Iterating collections 
    5. What does key do for me? 
    6. Calling functions that return JSX 
  2. Managing state 
    1. Defining state in React 
    2. React state != Redux state 
    3. Stateful components are classes 
    4. How to initialize state in the constructor and when not to 
    5. Updating state with this.setState() 
    6. Asynchronous updates 
    7. The secrets of upserting state 
    8. Forms in React 
    9. Controlled vs. Uncontrolled forms 
    10. How to solve the update problem 
    11. Insider tips for state in React 
  3. React Hooks 
    1. The case for Hooks 
    2. History of Hooks 
    3. useState() (Multiple vs Single) 
    4. useEffect()  
    5. useContext() 
    6. useReducer() 
    7. How to enable them 
    8. Tips and tricks with hooks 
  4. PropTypes (Time permitting) 
    1. Why propTypes? 
    2. All the types that can be used 
    3. Using in class-based components 
    4. Using in functional components 
    5. How to handle extra props 
View All Courses

    Course Inquiry

    Fill in the details below and we will get back to you as quickly as we can.

    Interested in any of these related courses?