React and JavaScript Training

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

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

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

Courses that can help you meet these prerequisites:

Preparing for Class
Follow-on Courses

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

The Rapid Introduction to HTML, CSS and Javascript class is great for beginners who have had some exposure to editing website content. I definitely got my money's worth! The instructor was very knowledgeable.
Keisha Rivers
HyperCube
Had a wonderful experience with Webucator. Definitely recommend it to others that want to learn about programs in greater detail.
Jonathan Jacob
n/a
Instructor, Manual, Hand-Out CDs with Exercises - ALL EXCELLENT! Thank you for the extra time spent on relating AscendantOne examples to discussion topics.
Gina Swetland
AscendantOne
Class started at the beginner level and went through tips and tricks to use Excel and gradually went to advance concepts. Over all, a great learning opportunity. Highly recommended!
John Neary
U.S. Army - CERDEC

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

61,184

Students who have taken Instructor-led Training

11,736

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

Contact Us or call 1-877-932-8228