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.

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.
Preparing for 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

Great instructor. I highly recommend this course for anyone who is looking to understand SQL.
Cassandra Garza
MarkWest Energy Partners, L.P.
Perfect instructor for a complicated course.
ie ting tan
Enova
Great class and very intuitive. I will definitely apply the tools learned towards improving the efficiency of my daily work. I highly recommend the course.
Tae Chang
Samsung SDI
I liked that the class was extremely hands-on and helped to cement the ideas with the exercises following each area. It was great to get the knowledge I needed without having to take time off of work or be out of the office.
Megan Robertson
Indiana Republican Party

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

61,268

Students who have taken Instructor-led Training

11,739

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,151 reviews

Contact Us or call 1-877-932-8228