Comprehensive React and Redux with TypeScript Training

This 5-day Comprehensive React and Redux with TypeScript training course gets students up to speed with React and Redux.

Location

Public Classes: Delivered live online via WebEx and guaranteed to run . Join from anywhere!

Private Classes: Delivered at your offices , or any other location of your choice.

Goals
  1. Learn how to get started with React and TypeScript
  2. Work with components.
  3. Learn about the React component lifecycle
  4. Work with forms.
  5. Understand routing.
  6. Learn to understand the purpose of Redux.
  7. Learn to build a real-world Redux-React component.
  8. Learn routing methods.
  9. Learn to apply async methods.
Outline
  1. Setup
    1. Verifying Node.js and either NPM or yarn
    2. Verifying class libraries
    3. Verifying class files
    4. Verifying TypeScript setup
    5. IDE (WebStorm or Visual Studio Code preferred)
  2. Introduction to React
    1. What problem(s) does React solve?
      1. Traditional, pre-JS web applications
      2. Late-model, MV* and JS web applications
    2. React’s solutions
      1. Single-page apps
      2. View libraries
      3. Helper libraries
    3. React and TypeScript development environment
      1. Simplicity: create-react-app and react-scripts-ts
      2. Build-your-own: an overview
      3. Configuring TypeScript
        1. Solving TSLint issues
        2. Development vs Production
    4. Hello world
      1. Your first React component
      2. Using React within a page
      3. Making some basic changes
      4. React and JSX and TypeScript
  3. Components
    1. Two types of components
      1. Functional components
        1. Functional component types
      2. Class-based components
        1. Class component types
      3. Why use one or the other?
        1. Class-based components for state and lifecycle
        2. Functional components for simplicity and purity
      4. Testing basic components
    2. Props and state
      1. Properties and types
      2. Passing in properties
      3. Limitations of properties
      4. State and types
      5. Using state
      6. When to use state, when to use props
      7. Testing components with Enzyme
    3. Event handling
      1. React event handling
      2. Event types
      3. Synthetic events
      4. React vs DOM event handling
      5. Testing events
    4. Children
      1. Component types
      2. Components within components
      3. Known children and unknown children
      4. Testing child components
    5. Parent-child component communication
      1. Communication from parent to child
      2. Communication from child to parent
      3. Container vs presentational components
      4. Using types to validate communication
  4. React Component Lifecycle
    1. Overview
    2. Startup and mounting
      1. Deprecated methods
    3. Updating
      1. Deprecated methods
    4. Unmounting
    5. Calling lifecycle methods in tests
    6. Error handling and error boundaries
  5. Intermediate component usage
    1. Asynchronous data
      1. When should asynchronous fetching be done?
      2. What challenges does async offer?
      3. Working with Promises and generic types
      4. Asynchronous best practices
      5. Testing against async fetches
    2. Lists of data
      1. Iterating over a list
      2. The key property
      3. Sorting data
    3. Testing component interactions
  6. Forms
    1. Controlled vs uncontrolled components
      1. Form field types
      2. What does React know about your form field?
      3. Does React control your form field?
      4. When does React find out about changes to your form field?
    2. Form field types
      1. Controlling a text field
      2. Other form fields
    3. Getting data out of a form
    4. Working with form data in tests
  7. Introduction to routing
    1. What problem is routing trying to solve?
    2. How does routing solve this problem?
      1. Tying components to URLs
      2. Passing parameters via the URL
    3. Routing software
      1. React-router
      2. Other routers
    4. Simple router example
    5. Routing types
    6. Testing routing
  8. More complex routing
    1. Top-level routing
      1. Routing at the top of your application
      2. Allowing other parts of the application to manage routing
    2. Redirects
    3. React-router objects and their types
      1. match
      2. history
      3. location
    4. Routing organizational techniques
    5. Testing advanced routing
  9. Advanced React
    1. Understanding and optimizing reconciliation
      1. Best practices for React reconciliation
      2. Recognizing common issues
      3. Making improvements
    2. Refs
      1. What’s a ref?
      2. What problem does it solve?
      3. Ref types
      4. How can I use refs?
      5. Testing refs
    3. Context
      1. What is the context API?
      2. Is the context API public?
      3. How to use the context API
      4. Context API types
      5. Testing the context API
  10. Render props
    1. Rendering in depth
    2. Rendering a function instead of a prop
    3. Using the render prop pattern
    4. Render props, function signatures, and types
    5. Testing render props
  11. Setup
    1. Verifying Node.js and NPM or Yarn
    2. Verifying class libraries
    3. Verifying class files
    4. Verifying TypeScript Setup
      1. Configuring TypeScript
      2. Solving TSLint issues
      3. Development vs Production
    5. IDE (WebStorm or Visual Studio Code preferred)
  12. Introduction to Redux
    1. What problems does Redux solve?
    2. How does it solve them?
    3. Basic Redux pattern
      1. Store
      2. Reducers
      3. Actions
    4. A basic Redux example
    5. Testing Redux
    6. Complex actions with Redux
  13. React and Redux
    1. Plugging into React
      1. State as props
      2. Events as dispatch
      3. Introducing higher-order components
    2. Turning standalone Redux into a component
    3. Middleware
      1. The logger
      2. The devtools
      3. Other middleware
    4. Building a real-world React-Redux component
    5. Testing React-Redux components
    6. Higher-order components in detail
      1. What do higher-order components do?
      2. Why would I use a higher-order component?
  14. Asynchronous Redux
    1. The difficulties of asynchronous Redux
    2. Asynchronous middleware
      1. Thunks, sagas, or survey both techniques for asynchronous interactions
    3. Dispatching async actions
    4. Catching results
    5. Handling errors
    6. Testing asynchronous Redux
  15. Advanced Redux
    1. Using reselect to minimize re-rendering
    2. Normalizing state
    3. Higher-order reducers
    4. Helper libraries
  16. React, Redux, and routing
    1. The tools
      1. React, Redux, React-router and an adapter
    2. Routing without Redux
    3. Storing routing state in Redux
    4. Pulling routing state from Redux
    5. Testing Redux and the router
Class Materials

Each student in our Live Online and our Onsite classes receives 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:

  • 1-2 years of JavaScript experience.
  • Advanced understanding of JavaScript, including prototypes and functions as first class citizens.

Training for your Team

Length: 5 Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors

This course is composed of the following classes, which you can sign up for individually.

What people say about our training

Best online (or attended) class experience! By the end of this 1 day class, I felt confident, efficient and ready to translate my Excel training to the office!
Leigh Vavrik
ORBIS Corporation
Webucator's iOS development course is great for experienced programmers looking to get their feet wet with iOS dev.
Nick Leach
Chico's FAS
Webucator was a great training program! I truly received one-on-one instruction and attention from the instructor! Would definitely take another course here again. Thank you!
Michelle Brauner
The MITRE Corporation
The class was very good. Excellent teacher and participation among the classmates.
Esteban Lopez
Inter-American Investment Corporation (IIC)

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

63,434

Students who have taken Instructor-led Training

11,890

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

9.29

Students rated our trainers 9.29 out of 10 based on 29,908 reviews

Contact Us or call 1-877-932-8228