• Online, Self-Paced
Course Description

Although React has no opinion about how routes are handled, and you can manually wire up routes in a React app. A much more coherent, configurable, and manageable approach is to use React Router, which was specifically designed for the task. Creating forms with validation and logic attached is a perennial challenge for web app developers. This course covers basic routing with React Router, and techniques for building reusable forms and form components.

Learning Objectives

React Router

  • start the course
  • configure routes in React Router
  • configure a RouteHandler in React Router
  • use params and querystrings for a component in React Router
  • use the JSX link tag with React Router to reference routes
  • configure a page for not found 404 errors in React Router
  • configure redirects in React Router
  • configure transitions between components and pages using the willTransitionTo and willTransitionFrom functions in React Router
  • configure hash location and history location routing with React Router
  • configure the built-in Router.Navigation mixin with React Router

React Forms

  • configure a basic form in React
  • build a controller view for a form page in React
  • build controlled form components in React
  • create a reusable text input component
  • consume a reusable text input component
  • configure buttons in a React form
  • configure redirects programmatically in React
  • use the toastr library to configure simple toast notifications in a React application
  • configure form validation in React
  • configure PropTypes on components to enforce passed data types
  • use transitions in a form to prevent form data loss when moving away from a form page
  • configure form hydration using a URL in React

Practice: Forms and Routes

  • create a form and routes in React and React Router

Framework Connections

The materials within this course focus on the Knowledge Skills and Abilities (KSAs) identified within the Specialty Areas listed below. Click to view Specialty Area details within the interactive National Cybersecurity Workforce Framework.