React and Redux

React and Redux (RCTRDX)

Course Length: 5 days
Delivery Methods: Available as private class only
Course Overview

React 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 makes the management of web data extremely controllable. The combination of the two is powerful!

Using short, to-the-point TED-style lectures, this course leads you through both of these JavaScript libraries 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!

Course Benefits
  • 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 Redux 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 the best way to apply React hooks
  • Work with React props and state
  • Use forms with React
  • Configure and use the React Router to create robust navigation schemes
Course Outline
  1. Course Overview
  2. 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
  3. 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. Ejecting
  4. Redux intro
    1. The single responsibility principle
    2. Why Redux?
    3. Why Redux with React?
    4. The 4 concepts of Redux
    5. Composition
    6. Immutability
    7. The parts of Redux
    8. The big picture of Redux
  5. Creating the store
    1. Installing and including Redux
    2. The createStore() method
    3. The simplest possible store
    4. Redux ducks
  6. 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
  7. 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
  8. Actions and Reducers
    1. Action Creators in a React Application
    2. Dispatching Actions
    3. Mapping Actions to prop Names
  9. Advanced Actions
    1. Action constants
    2. Action type enumerations
    3. Action creators
    4. Action creator enumerations
  10. 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
  11. 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
  12. 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
  13. 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
  14. Redux-saga (Time permitting)
    1. Why Redux-saga?
    2. Saga vs. Thunk
    3. Handling side effects with saga
  15. How to create components
    1. 3 simple steps to creating a component
    2. Hosting a component
  16. How to display HTML
    1. A gentle intro to JSX
    2. The 7 rules of JSX
    3. When JSX deviates from the W3C standards
  17. How to display images
    1. Dynamic images for flexibility
    2. Bundling images for performance
  18. How to handle events
    1. React's synthetic events
    2. Passing values to the handler
    3. Creating your own custom events
  19. How to style with CSS
    1. Styling with CSS
    2. Bundling CSS files for speed
    3. Using npm libraries
  20. How to work with JS libraries
    1. How JS module loading works
    2. The two ways of importing JS libraries - when to use each
  21. How to display data
    1. Demystifying expressions - how to think about them
    2. Nesting JSX in expressions and vice-versa
  22. How to style with inline styles
    1. Specifying inline styles
    2. Importing external styles
  23. How to use state
    1. Defining state in React
    2. React state != Redux state
    3. the useState() hook
    4. Single values vs. Objects
    5. Lazy initial state
    6. Using spread to append
  24. How to run tasks around render
    1. The useEffect() hook
    2. Simulating lifecycle events
    3. Component loading, rendering, and unloading events
  25. How to conditionally display
    1. Why we need conditionals
    2. Using short-circuiting
    3. Using && and ||
    4. Ternaries
  26. How to display arrays
    1. Iterating collections
    2. Array.prototype methods
    3. .map()
    4. .filter()
    5. What does key do for me?
  27. How to compose and decompose
    1. Composition deep dive
    2. The reason for composition
  28. How to pass data down
    1. Data flowing down - props
    2. Why not 2-way binding?
    3. State vs props
    4. The useContext() hook
  29. How to lift state up
    1. Why lift state up? What it is.
    2. Examples of lifting state up
    3. Data flowing up by emitting an event
    4. Passing data between sibling and cousin components
    5. All the ways to communicate and the cleanest solution
  30. How to run functions in JSX
    1. Rules for calling functions in JSX
    2. The right time to run a function
  31. How to handle forms
    1. Forms in React
    2. Controlled vs. Uncontrolled forms
    3. How to solve the update problem
    4. The tricks handling <select>s and <textarea>s.
  32. How to do simple routing
    1. How to create a SPA in React
    2. Where React Router came from
    3. 4 easy steps to routing
    4. How to define the domain of a router
    5. How to create routes
  33. How to read route parameters
    1. The useParams() hook
    2. Creating route parameters
    3. Reading parameters
    4. How to make them optional
    5. How to process querystrings
  34. How to create hyperlinks
    1. How to route users via a link
    2. Why not us <a>?
    3. The <Link> component
  35. How to navigate imperatively
    1. How to route users via JavaScript
    2. The useHistory() hook
    3. The push() and replace() methods
    4. Using the <Navigate> component
Class Materials

Each student will receive a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this React class:

  • A very strong grasp of advanced JavaScript.

Experience in the following would be useful for this React class:

  • Solid HTML5 and CSS knowledge is helpful.
Live Private Class
  • Private Class for your Team
  • Live training
  • Online or On-location
  • Customizable
  • Expert Instructors
Request Proposal