Introduction to React

In this 3-day class, students learn the fundamental ideas behind React and then quickly move on to hands-on problem solving and some of the most advanced and up-to-date techniques in React development, including: Redux, Redux thunk, Redux Saga, and server-side react.

SKU: WTITR Categories: , Tags: , ,

Description

In this 3-day class, students learn the fundamental ideas behind React and then quickly move on to hands-on problem solving and some of the most advanced and up-to-date techniques in React development, including: Redux, Redux thunk, Redux Saga, and server-side react. 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 ecommerce shopping cart application. An optional introduction to modern JavaScript syntax (ES6+) and best practices is included and can be used for self-study or in-class lecture and demonstrations.

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.

PRICING

This course is available for lease on a per seat / per day rate by trainers and training companies. The courseware includes slides, notes, assignments, and complete source code for all assignments.

OBJECTIVES

All students will:

  • Use Create-React-App to get started quickly with React
  • Learn to write unit tests for React, using Jest and Enzyme
  • 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
  • Use Redux for maintaining state in a React.js application
  • Use Redux middleware
  • Make AJAX requests with React
  • Use server-side rendering
  • Learn React best practices

OUTLINE

  1. Introduction
    1. What is React.js?
    2. What is React NOT?
    3. When can you use React?
    4. Who Uses React?
    5. React Quick Start
    6. What is Create React App
    7. Lab 01: Get Started with Create React App
  2. Advanced JavaScript
    1. Variable Scoping with const and let
    2. let vs. var
    3. Block-scoped Functions
    4. Arrow Functions
    5. Default Parameter Handling
    6. Rest Parameter
    7. Spread Operator
    8. Template Literals
    9. Enhanced Object Properties
    10. Array Matching
    11. Object Matching
    12. Symbol Primitive
    13. User-defined Iterators
    14. For-Of Operator
    15. Creating and Consuming Generator Functions
    16. Class Definition
      1. Class Declaration
      2. Class Expressions
      3. Class Inheritance
    17. Understanding this
      1. What is this?
      2. Implicit Binding
      3. Explicit Binding
      4. new Binding
      5. window Binding
    18. map()
    19.  Promises
      1. What Are Promises?
      2. Promises vs. Event Listeners
      3. Why Use Promises?
      4. Demo: Callback vs. Promise
  3. Introduction to React.js
    1. Imperative API vs. Declarative API
    2. Imperative vs. Declarative Screen Updates
    3. Lab 02: Your First Component
    4. One-way Data Flow
    5. Virtual DOM
    6. Virtual DOM vs. HTML DOM
    7. State Machines
    8. render()
    9. Lab 03: Create More Components
    10. ReactDOM
      1. ReactDOM.findDOMNode
      2. ReactDOM.unmountComponentAtNode
    11. ReactDOM.render
    12. Lab 04: Testing React
  4. React Development Process
    1. What is JSX?
    2. Using JSX
    3. Using React with JSX
    4. createElement
    5. Using React without JSX
    6. Expressions in JSX
  5. React Component Best Practices
    1. Single Responsibility
    2. Pure Functions
    3. Benefits of Pure Functions
    4. Function Comparison
    5. Stateless Functional Components
    6. Lab 05: Static Version
    7. Styles in React
      1. Lab 06: Styling React
    8. Composition
      1. Reusable Components
      2. Container Components
      3. Presentational Components
    9. props
    10. Lab 07: Props and Containers
    11. Props vs. State
      1. Setting Initial State
      2. super()
    12. Lab 08: Adding State
    13.  Forms
      1. Form Events
      2. Events
      3. Controlled Components
      4. Uncontrolled Components
      5. Lab 09: Interactions, Events, Callbacks
    14. Component Life-Cycle
      1. Life-Cycle Methods
        1. Mount/Unmount Life-Cycle Methods
        2. Data Life-Cycle Methods
      2. Lab 10: Component Life-Cycle
  6. Testing React Components
    1. What to Test in a React Component
    2. PropType
      1. Using PropTypes
      2. Lab 11: PropTypes
    3. Jest
      1. Mocking
      2. Mock Function
      3. Manual Mock
      4. Automocking
      5. Snapshot Testing
    4. TestUtils
    5. Enzyme
      1. Shallow Rendering
    6. Lab 12: Testing with Jest and Enzyme
  7. Flux and Redux
    1. Flux
      1. Flux Flow
      2. Flux Action
      3. Flux Dispatcher
      4. Flux Stores
      5. EventEmitter
    2.  Redux
      1. Stores & Immutable State Tree
      2. Redux Actions
      3. Reducers
        1. Things You Should Never do in a Reducer
        2. Reducer Composition
        3. Redux Store
      4. Redux Pros and Cons
      5. Lab 13: Implementing Redux
    3. Redux Middleware
      1. What is Redux Middleware?
      2. What is Middleware Good For?
  1. React AJAX Best Practices
    1. Using React with Other Libraries
    2. Redux Thunk
      1. How is Thunk Useful?
      2. How does Thunk work?
      3. Lab 14: Thunk
    3. Redux Saga
      1. Using Sagas
  2. Advanced Topics
    1. React Router
    2. Server-side React
    3. Relay and GraphQL
      1. What is Relay?
      2. GraphQL
      3. GraphQL Example
      4. Relay Pros and Cons
    4. Performance Optimization
      1. Development vs. Production
      2. Perf Object
      3. Optimization Techniques