Home About Courses Schedule Services Webinars Contact Search

Introduction to React

SEE SCHEDULE

Duration: 3 Days

Method: Instructor led, Hands-on workshops

Price: $1800.00

Course Code: RE1000


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.

Description

In this 3-day Introduction to React training 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.

Objectives

Upon successful completion of this course, the student will be able to:

  • Use Create-React-App to get started quickly with React
  • Learn / review Advanced JavaScript concepts and syntax
  • 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
  • Learn best practices for using and composing React components
  • 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 about React performance optimization

Prerequisites

Experience in any programming language.

Topics

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