Lab: Sign up Form

Forms are something you will frequently use in React.js.

This lab uses what students have learned so far to create a sign up form using reactstrap. Alternatively, you may use another UI framework like Material UI.

In the starter code, you'll find a create-react-app project with reactstrap installed! If you'd like to use something other than reactstrap, simply install that one instead.

NOTE: reactstrap is different from react-bootstrap, make sure you're looking at the right docs!

---

Prerequisites

Students should be familiar with:

• React and React components
• File tree and component structure
• State
• Props
• Unidirectional data flow
• Using documentation

Instructions

1. Fork and Clone this repo
2. npm install (Hint! Same as npm i!)
3. npm start
4. Complete requirements and do bonus additions!
5. Make a pull request to submit your work.

Requirements

Build a sign up form using create-react-app and a UI Framework of your choice to collect the name, email, picture, and hidden password for a user. console.log what the user's inputs when they submit the form.

You should have:

• Three text input fields: Name, Email, Password
• File upload input
• One Button to Submit input
• Submit should have a listener event that triggers a function and console.logs the user's input and the blob for the image.

NOTE: This form doesn't actually do anything. It is for styling practice.

Bonus

• Add custom styles and a "logo" to personalize the site.
• Show custom error messages for incomplete fields
• Show a success alert when the form is submitted
• Implement icons to add to your from React Font Awesome 5
• Put your form into a modal
• Validate that the email is a valid email address

Hints!

• Check out reactstrap's documentation
• Check out Material UI
• React.js cheatsheet

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.