Home About Courses Schedule Services Webinars Contact Search

React and JavaScript

SEE SCHEDULE

Duration: 3 Days

Method: Instructor led, Hands-on workshops

Price: $1800.00

Course Code: RE1010


Description

This course teaches students introductory to advanced topics of React with JavaScript.

Objectives

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

  • Learn how to get started with React and JavaScript
  • Work with components
  • Learn about the React component lifecycle
  • Work with forms
  • Understand routing

Prerequisites

1-2 years of JavaScript experience. Advanced understanding of JavaScript, including prototypes and functions as first class citizens.

Topics

  • I. Setup
    • Verifying Node.js and either NPM or yarn
    • Verifying class libraries
    • Verifying class files
    • IDE (WebStorm or Visual Studio Code preferred)
  • II. Introduction to React
    • What problem(s) does React solve?
      • Traditional, pre-JS web applications
      • Late-model, MV* and JS web applications
    • React's solutions
      • Single-page apps
      • View libraries
      • Helper libraries
    • React development environment
      • Simplicity: create-react-app
      • Build-your-own: an overview
    • Hello world
      • Your first React component
      • Using React within a page
      • Making some basic changes
      • React and JSX
  • III. Components
    • Two types of components
      • Functional components
      • Class-based components
      • Why use one or the other?
    • Testing basic components
      • Props and state
      • Passing in properties
      • Limitations of properties
      • Using state
      • When to use state, when to use props
      • Testing components with Enzyme
    • Event handling
      • React event handling
      • Synthetic events
      • React vs DOM event handling
      • Testing events
    • Children
      • Components within components
      • Known children and unknown children
      • Testing child components
    • Parent-child component communication
      • Communication from parent to child
      • Communication from child to parent
      • Container vs presentational components
  • IV. React Component Lifecycle
    • Overview
    • Startup and mounting
      • Deprecated methods
    • Updating
      • Deprecated methods
    • Unmounting
    • Calling lifecycle methods in tests
    • Error handling and error boundaries
  • V. Intermediate component usage
    • PropTypes
      • Typing and React
      • Using PropTypes
      • PropTypes in production
    • Asynchronous data
      • When should asynchronous fetching be done?
      • What challenges does async offer?
      • Asynchronous best practices
      • Testing against async fetches
    • Lists of data
      • Iterating over a list
      • The key property
      • Sorting data
    • Testing component interactions
  • VI. Forms
    • Controlled vs uncontrolled components
      • What does React know about your form field?
      • Does React control your form field?
      • When does React find out about changes to your form field?
    • Form field types
      • Controlling a text field
      • Other form fields
    • Getting data out of a form
    • Working with form data in tests
  • VII. Introduction to routing
    • What problem is routing trying to solve?
    • How does routing solve this problem?
      • Tying components to URLs
      • Passing parameters via the URL
    • Routing software
      • React-router
      • Other routers
    • Simple router example
    • Testing routing
  • VIII. More complex routing
    • Top-level routing
      • Routing at the top of your application
      • Allowing other parts of the application to manage routing
    • Redirects
    • React-router objects
      • match
      • history
      • location
    • Routing organizational techniques
    • Testing advanced routing
  • IX. Advanced React
    • Understanding and optimizing reconciliation
      • Best practices for React reconciliation
      • Recognizing common issues
      • Making improvements
    • Refs
      • What’s a ref?
      • What problem does it solve?
      • How can I use refs?
      • The challenges of testing refs
    • Context
      • What is the context API?
      • Is the context API public?
      • How to use the context API
      • Testing the context API
    • Render props
      • Rendering in depth
      • Rendering a function instead of a prop
      • Using the render prop pattern
      • Testing render props