• 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 NICE Framework Task, Knowledge, and Skill statements identified within the indicated NICE Framework component(s):

Specialty Areas

  • Software Development

Feedback

If you would like to provide feedback for this course, please e-mail the NICCS SO at NICCS@hq.dhs.gov.