ALAB 320H.1.1 - React Page Layout

Learning Objectives

After completing this lab, learners will be able to:

• Create a page from a mockup using React.
• Style React components to create a desired layout.

 CodeSandbox

This lab uses CodeSandbox as one of its tools.

If you are unfamiliar with CodeSandbox, or need a refresher, please visit our reference page on CodeSandbox for instructions on:

• Creating an Account
• Making a Sandbox
• Navigating your Sandbox
• Submitting a link to your Sandbox to Canvas

Instructions

1. Create a React CodeSandbox and name it "React Page Layout Lab."

2. Build a page that looks like the mockup below.

   • You should create an App, Homepage, Header, SearchBar, EmployeeList and EmployeeListItem.
   • Style your components to accurately match the given layout. You do not need to include images, but can if you have time.
   • No functionality is needed, just arrange the layout with with React components.
3. Submit the link to your CodeSandbox on Canvas when you are finished.

Deliverables

• A link to a CodeSandbox that contains your completed lab with no errors (comment things out if they do not work).