We are a family owned USA based Corporate Training Company determined to help professionals, teams, and organizations improve.

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.

banner-img
Home » Programming & Development » React and Redux

Course Skill Level:

Foundational to Intermediate

Course Duration:

5 day/s

  • Course Delivery Format:

    Live, instructor-led.

  • Course Category:

    Programming & Development

  • Course Code:

    REAREDR21S09

Who should attend & recommended skills:

Experienced web developers with advanced JavaScript experience

Who should attend & recommended skills

  • Experienced web developers who want to be equipped to handle large-scale web applications
  • JavaScript: Advanced (6+ years of experience) or ask about our 5-day JavaScript course which will prepare you for the high-level of JavaScript fluency needed for this course.
  • HTML5 and CSS knowledge (3+ years) helpful

About this course

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!

Skills acquired & topics covered

  • 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 breakdown / modules

  • What is React?
  • Its origins WRT Angular
  • React’s 3 design principles
  • Composition of components
  • How is React so darned fast?
  • The virtual DOM
  • One-way data flow
  • How a React app works – a peak under the covers
  • Transpiling, bundling, minifying with webpack

  • The need for CRA – webpack, npm, babel, JSX, eslint, es2015, jest, etc
  • Using npx
  • The only build dependency needed
  • Watch mode
  • Linting code
  • Ejecting
  • Running unit tests

  • It’s a library
  • The single responsibility principle
  • Why Redux?
  • Why Redux with React?
  • Its history and growth
  • The 4 concepts of Redux
  • State
  • Pure functions
  • Composition
  • Immutability
  • The parts of Redux
  • The big picture of Redux

  • Installing and including Redux
  • The createStore() method
  • The simplest possible store
  • Redux ducks

  • Single source of truth
  • Initializing state
  • What goes in state and what should not
  • Why subscriptions
  • How to subscribe in Redux

  • Actions are objects
  • The shape of actions
  • Type and payload
  • Reducers are functions
  • Why we have them
  • The shape of a reducer
  • Avoiding the worst Redux rookie mistakes

  • Action Creators in a React Application
  • Dispatching Actions
  • Mapping Actions to prop Names

  • Action constants
  • Action type enumerations
  • Action creators
  • Action creator enumerations

  • The problem: complex state => complex reducers
  • The solution: Create state slices
  • Creating reducers to handle slices
  • Combining reducers with Redux’s built-in combineReducers
  • Doing it manually
  • Why manually is the right way

  • The Open-Closed Principle
  • Introduction to middleware
  • The next() function
  • The required shape of middleware
  • Middleware’s super-powers
  • Recipes and examples
  • Why you must register middleware and how to do it

  • The problem with async calls in Redux
  • The trick to making a good middleware function
  • Registering the middleware
  • Dispatching an Ajax call
  • Making RESTful API calls
  • How to process them into redux and then into React

  • The need for a thunk
  • How redux-thunk fits that need
  • Installing and using redux-thunk properly
  • Dispatching Ajax calls with redux-thunk

  • Why less is more
  • A gentle intro to JSX
  • The 7 rules of JSX
  • When JSX deviates from the W3C standards
  • 3 simple steps to creating a component
  • Hosting a component

  • Styling with CSS
  • Specifying Inline Styles
  • Importing styles
  • Using npm libraries
  • The trick to importing images

  • React’s synthetic events
  • Why do they need to add events?
  • The quick way to tell the difference
  • The event object is reused!
  • Passing values to the handler
  • Creating your own custom events

  • How to compose
  • Data flowing down – props
  • Why not 2-way binding?
  • Data flowing up by emitting an event
  • Passing data between sibling and cousin components
  • All the ways to communicate and the cleanest solution

  • How to create a SPA in React
  • What React router is and where it came from
  • 4 easy steps to routing
  • How to define the domain of a router
  • How to create routes
  • How to route users via a link
  • How to route users via a url
  • How to route users via JavaScript
  • How to read route parameters

  • Demystifying expressions – how to think about them
  • Nesting JSX in expressions and vice-versa
  • Conditional rendering
  • Iterating collections
  • What does key do for me?
  • Calling functions that return JSX

  • Defining state in React
  • React state != Redux state
  • Stateful components are classes
  • How to initialize state in the constructor and when not to
  • Updating state with this.setState()
  • Asynchronous updates
  • The secrets of upserting state
  • Forms in React
  • Controlled vs. Uncontrolled forms
  • How to solve the update problem
  • Insider tips for state in React

  • The case for Hooks
  • History of Hooks
  • useState() (Multiple vs Single)
  • useEffect()
  • useContext()
  • useReducer()
  • How to enable them
  • Tips and tricks with hooks

Browse our programs to take the next step toward advancing yourself, your team, and organization.

Browse Courses