Building Navigational Workflows Using React

Overview

Class Central Tips

Forms are an essential part of modern-day workflow. They are the primary medium of collecting, validating, and storing user data to provide great user experience. React library helps in developing forms using controlled components. Alternatively, open-source Libraries like Formik can be used for handling form input validations and form submissions efficiently. Additionally, React library is supported by React Router library which facilitates developers to rapidly enable routing between components. In this course, you will explore React forms, Formik library and React Router library for creating navigational workflows.

Syllabus

Building Forms in React

"Forms are an integral part of any modern-day workflow. They help in building interactive web applications that allow users to provide the required inputs. React uses two different approaches to capture and validate user inputs. In this learning sprint, you will learn to build simple forms using controlled and uncontrolled components. The practical experience gained will enable you to create forms using controlled components. These components allow React to fully control the element by setting and updating the input value directly. "

Building Forms in React using Formik

"When forms become large, they complicate the task of tracking and accessing control states. Formik library helps in getting the values in and out of the form state, performs validations on user inputs and handles form submissions. In this learning sprint, you will learn to build forms in a Single Page Application using the components provided by the Formik library. You will create form controls and validate the inputs captured using Yup schema validator."

Navigate between views using React Routers

"When users perform application tasks in Single Page Application (SPA), they are required to move between different views of the application. In SPA, the views corresponding to the components are shown or hidden to users instead of requesting the server for a new page. React library does not come with an inbuilt support for routing. Hence external React Router library is used to implement routing. In this learning sprint, you will explore various components provided by the react-router-dom package for building navigable workflows. The practice exercise of this sprint will require you to enhance the given application by providing route configurations and add navigation links to views to make the application navigable."