Introduction to React

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.

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.

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. Use Create-React-App to get started quickly with React
  2. Learn / review Advanced JavaScript concepts and syntax
  3. Learn to write unit tests for React, using Jest and Enzyme
  4. Understand what React is and what problem it solves
  5. Explore the basic architecture of a React application
  6. Gain a deep knowledge of React components and JSX
  7. Learn best practices for using and composing React components
  8. Build a working application that uses React components
  9. Use Redux for maintaining state in a React.js application
  10. Use Redux middleware
  11. Make AJAX requests with React
  12. Use server-side rendering
  13. Learn about React performance optimization
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: Get Started with Create React App
  2. Introduction to React.js
    1. Imperative API vs. Declarative API
    2. Imperative vs. Declarative Screen Updates
    3. Lab: Your First Component
    4. One-way Data Flow
    5. Virtual DOM
    6. Virtual DOM vs. HTML DOM
    7. State Machines
    8. React.render()
    9. Lab: Create More Components
    10. ReactDOM
    11. ReactDOM.findDOMNode
      1. ReactDOM.unmountComponentAtNode
      2. ReactDOM.render
    12. Lab: Testing React
  3. React Development Process
    1. What is JSX?
    2. Using JSX
    3. Using React with JSX
    4. React.createElement
    5. Using React without JSX
    6. Expressions in JSX
  4. React Component Best Practices
    1. Single Responsibility
    2. Pure Functions
    3. Benefits of Pure Functions
    4. Function Comparison
    5. Stateless Functional Components
    6. Lab: Static Version
    7. Styles in React
    8. Lab: Styling React
    9. Composition
    10. Reusable Components
      1. Container Components
      2. Presentational Components
      3. props
    11. Lab 07: Props and Containers
    12. Props vs. State
    13. Setting Initial State
    14. super()
    15. Lab: Adding State
  5. Forms
    1. Form Events
    2. Events
    3. Controlled Components
    4. Uncontrolled Components
    5. Lab: Interactions, Events, Callbacks
  6. Component Life-Cycle
    1. Life-Cycle Methods
    2. Mount/Unmount Life-Cycle Methods
      1. Data Life-Cycle Methods
      2. Component Life Cycle
      3. Lab: Component Life-Cycle
  7. Testing React Components
    1. What to Test in a React Component
    2. PropType
    3. Using PropTypes
      1. Lab: PropTypes
    4. Jest
    5. Mocking
      1. Mock Function
      2. Manual Mock
      3. Automocking
    6. Snapshot Testing
    7. TestUtils
    8. Enzyme
    9. Shallow Rendering
    10. Lab: Testing with Jest and Enzyme
  8. 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
      4. Things You Should Never do in a Reducer
      5. Reducer Composition
      6. vi. Redux Store
      7. vii. Redux Pros and Cons
    3. Lab: Implementing Redux
    4. Redux Middleware
      1. What is Redux Middleware?
      2. What is Middleware Good For?
      3. React AJAX Best Practices
      4. Using React with Other Libraries
      5. Redux Thunk
        1. How is Thunk Useful?
        2. How does Thunk work?
        3. Lab: Thunk
    5. Redux Saga
      1. Using Sagas
  9. Advanced Topics
    1. React Router
    2. Server-side React
    3. Relay and GraphQL
    4. What is Relay?
      1. GraphQL
      2. GraphQL Example
      3. Relay Pros and Cons
    5. Performance Optimization
    6. Development vs. Production
      1. Perf Object
      2. Optimization Techniques
  10. Optional Advanced JavaScript Review
    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
    17. Class Declaration
      1. Class Expressions
      2. Class Inheritance
    18. Understanding this
    19. What is this?
      1. Implicit Binding
      2. Explicit Binding
      3. new Binding
    20. window Binding
    21. Array.map()
    22. Promises
    23. What Are Promises?
      1. Promises vs. Event Listeners
      2. Why Use Promises?
      3. Demo: Callback vs. Promise
    24. Using Promises
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:

  • Experience in any programming language.

Training for Yourself

$1,725.00 or 3 vouchers

Upcoming Live Online Classes

  • See More Classes

Please select a class.

Training for your Team

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

What people say about our training

Very incisive and detailed overview of React JS and how to get up and running and developing with it. Highly recommend this class.
Nick Mogielnicki
OSUHP
I highly recommend taking a class this way. I loved the one on one interaction I received in this setting. Great Instructor! Thanks, Webucator!
Dana Crum
Bright House Networks
Webucator definitely made a great impression on not only myself but the owner of the company I work for. The instructor was fantastic and I definitely would use Webucator and for any future training!
Alisha Zachariah
Mr. Electric of Red Deer
I would most definitely consider Webucator for future software training. It was very convenient, totally comprehensible, and absolutely great at getting me up to speed with the basics of a brand new program.
Erin Swanson
IDL Worldwide

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

63,446

Students who have taken Instructor-led Training

11,895

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

10.00

Students rated our Introduction to React trainers 10.00 out of 10 based on 1 reviews

Contact Us or call 1-877-932-8228