6. Styling React Apps

Activity 6.1: Providing Input Validity Feedback upon Form Submission

In this activity, you will build a basic form that allows users to enter an email address and a password. The provided input of each input field is validated, and the validation result is stored (for each individual input field).

The aim of this activity is to add some general form styling and some conditional styling that becomes active once an invalid form has been submitted. The exact styles are up to you, but for highlighting invalid input fields, the background color of the affected input field must be changed, as well as its border color and the text color of the related label.

Perform the following steps to complete this activity:

1. Create a new React project and add a Form component function in a components/Form.js file in the project.
2. Export the component and import it into App.js.
3. Output the <Form /> component as part of App's JSX code.
4. In the...