Description

In this class, students learn the fundamental ideas behind React and TypeScript and then quickly move on to hands-on problem-solving and some of the most advanced and up-to-date techniques and tools in React development using TypeScript. The course teaches just enough about testing and tools for students to be productive but is primarily focused on hands-on exercises in which students will build a real-world e-commerce shopping cart application.

TARGET AUDIENCE

This course is designed for experienced professional developers (in any language) who want to learn how to quickly become productive with the latest version of React.ABOUT THE AUTHORChris Minnick has been a full-stack developer for over 25 years, and a professional author and trainer for 15 years. He has been the lead front-end React developer for several startup companies and has been building web and mobile user interfaces with React since 2015. Chris has produced online video courses for Pluralsight and O’Reilly Media and is the author of JavaScript All-In-One For Dummies and Beginning React JS Foundations.

OBJECTIVES

All students will:

• Get started quickly with React
• Learn to write unit tests for React using Jest
• Understand what React is and what problem it solves
• Explore the basic architecture of a React application
• Gain a deep knowledge of React components and JSX
• Build a working application that uses React components
• Learn about the Hooks API
• Use Redux for maintaining state in a React.js application
• Use the Context API to pass data in a component tree
• Use Redux middleware
• Make AJAX requests with React
• Use server-side rendering
• Learn React best practices

DURATION

This course can be taught as a 3-day course or a 5-day course. The 3-day version has reduced Redux, JavaScript, and Testing coverage.

OUTLINE

1. Introduction
   1. What is React?
   2. What is React not?
   3. What can you use React for?
2. React Quick Start
   1. Test and Run a React App
   2. Lab 01: Get Started with a React toolkit
3. Introduction to ReactJS
   1. Explore the Virtual DOM
   2. React Philosophy
   3. Understanding Components
   4. Composition vs. Inheritance
   5. React is Idiomatic
   6. Lab 02: Your First Component
   7. How React Works
   8. Virtual DOM
   9. State Machines
   10. React.render()
4. Lab 03: Writing tests and more components
5.  ReactDOM
   1. Other Rendering Engines
   2. React Native
   3. ReactDOMServer
   4. React Konsul
   5. react-pdf
6. Advanced JavaScript
   1. Use arrow functions and block-scoped variables
   2. Use classes and modules
   3. Variable Scoping with const and let
   4. Arrow Functions
   5. Rest Parameter
   6. Template Literals
   7. Enhanced Object Properties
   8. Method notation in
      object property definitions
   9. Array Matching
   10. Object Matching
   11. For-Of Operator
   12. Class Definition
   13. Class Inheritance
   14. Understanding this
   15. Array.map()
   16. Array.filter()
   17.  Array.reduce()
   18. Promises
   19. Async / Await
7.  Modularity
   1. Why is Modularity Important?
   2. CommonJS
   3. ES Modules
8. The Document Object Model
   1. What is the DOM?
   2. Understanding Nodes
   3. EventTarget
   4. DOM Events
   5. Manipulating HTML with the DOM
   6. Manipulating HTML with JQuery
   7. Manipulating HTML with React
   8. Lab 4: DOM Manipulations and Modern JS
9. Using JSX
   1. What is JSX?
   2. Children in JSX
   3. Using Literal JavaScript in JSX
   4. Using React with JSX
   5. Conditional Rendering with Element Variables
   6. Conditional Rendering with the && Logical Operator
   7. Conditional Rendering with the Conditional Operator
   8. React.Fragment
   9. Props
   10. React Development Process
   11. Creating a Component Hierarchy
   12. Goals of a Static Version
   13. Lab 5: Creating a Static UI
10. React Components
    1. What are components?
    2. Single Responsibility
    3. Pure Functions
    4. super()
    5. React.PureComponent
    6. Function Components
    7. Component Children
11. Styles in React
    1. Inline Styles
    2. Style Objects
    3. Style Modules
    4. CSS-in-JS
    5. Styled Components
    6. Lab 06: Styling React
12. React Data Flow
    1. One-way Data Flow
    2. props vs state
    3. Lab 07: Props and Containers
    4. State
    5. What is State?
    6. How State Affects render()
    7. How to Know if it Should Be State
    8. Props vs. State
    9. Setting Initial State
    10. Updating State
    11. setState
    12. useState setter function
    13. What to Put in State
    14. Where Should Your State Live?
    15. Context API
    16. Lab 08: Adding State
13. Events
    1. SyntheticEvent
    2. Event Listener Attributes
    3. The Event Object
    4. Binding Event Handlers
    5. Passing Data to Event Handlers
    6. Important Event Properties
14.  Forms
    1. What is “Inverse Data Flow”?
    2. Properties of Form components
    3. Form Events
    4. Controlled Inputs
    5. Uncontrolled Inputs
    6. Preventing Default Actions
    7. Form validation
15. Using refs
    1. When to Use Refs
16. Lab 09: Interactions, Events, Callbacks
17. Component Life-Cycle Events
    1. Life-Cycle Methods
    2. Mount/Unmount
    3. Data Life-Cycle Methods
    4. Implementing error boundaries
18. AJAX
    1. Fetch vs. Axios
    2. AJAX in class components
    3. AJAX in function components
    4. Fetch vs. Axios
    5. Suspense
    6. Working with CORS
    7. Lab 10: Component Life-Cycle and AJAX
19.  Hooks
    1. What are Hooks?
    2. Built-in Hooks
    3. useState
    4. useEffect
    5. Rules of Hooks
    6. useContext
    7. useReducer
    8. useCallback
    9. useMemo
    10. useRef
    11. useImperativeHandle
    12. useLayoutEffect
    13. useDebugValue
    14. Custom Hooks
    15. Why Use Custom Hooks
    16. Making Custom Hooks
    17. Lab 11: Converting a Class Component to a Function Component
20.  PropTypes
    1. Using PropTypes
    2. Default Props
    3. Lab 12: PropTypes and Default Props
21. React with TypeScript
    1. TypeScript basics
    2. Why TypeScript?
    3. Type inference
    4. Union types
    5. Type aliases
    6. Interfaces
    7. Lab 13: Converting to TypeScript
22. React Patterns and Best Practices
    1. Single Responsibility
    2. Composition
    3. Container Components
    4. Presentational Components
    5. Pure components
    6. React.memo
    7. Higher Order Functions
    8. Higher Order Components
    9. Render Props
    10. Reusable Components
    11. Communication Between Components
23. Test-Driven Development
    1. Goal of TDD
    2. The TDD Cycle
    3. TDD Steps
    4. Assertions
    5. Assertion Libraries
    6. Jest
    7. Jest Overview
    8. Write test suites
    9. Create specs
    10. Use matchers
    11. How Jest Works
    12. Mocking
    13. Manual Mock
    14. Automocking
    15. Snapshot Testing
    16. Lab 14: Testing with React Testing Library
24. Flux and Redux
    1. Flux Flow
    2. Redux
    3. Stores & Immutable State Tree
    4. Redux Actions
    5. Reducers
    6. Reducer Composition
    7. Reducer Composition Example
    8. Higher Order Reducer
    9. Redux Store
    10. Redux Store Design
    11. Benefits of Normalizing Store
    12. Redux Pros and Cons
    13. Lab 15: Implementing Redux with Redux Toolkit
    14. What is Redux Middleware?
    15. React AJAX Best Practices
    16. Redux Middleware
    17. Using React with Other Libraries
    18. Redux Thunk
    19. Lab 16: Redux Thunk
    20. Lab 17: Persisting Data in localStorage with Redux
25.  Routing
    1. React Router
    2. Using React Router
    3. Router Rendering Example
    4. Route Matching
    5. Lab 18: React Router
26. Deploying React
    1. Development vs. Production
    2. Optimization Techniques
    3. Building Your Project
    4. Deploying React
    5. Render Caching
27. Advanced Topics
    1. Relay and GraphQL
    2. Micro Frontends
    3. Shared State in React Micro Frontends
    4. Bonus Lab: Converting an App to a Micro Frontend