React Wrap Up Lab
------------------

In this extra lab, you will practice the React techniques that
you learned in class this week. The goal is for you to prove
to yourself that you can create a simple, but complete React
project from scratch.

Your mission is to write a React app that displays a list of
students. Each student should have an ID, name, and a GPA.
For this exercise, you will hard-code the student list.

Before beginning to code, think about the component tree for
this simple app. How many components will you need? Where will
the student-list state live? You can design any hierarchy you
see fit, but a potential, simple tree might look like:

   App
    |
   StudentList (student-list lives here)
    |
   Student (display-only component that accepts props for
            a single student)

Here is some code you can use for the student-list:

[
   {
      name: "Joe",
      id:   12,
      gpa:  3.33
   },
   {
      name: "Sue",
      id:   13,
      gpa:  4.00
   },
   {
      name: "Sam",
      id:   14,
      gpa:  2.45
   }
];


1. Open a git-bash prompt and change to the professional-react
   directory.

	cd /c/professional-react

2. As you did in the first React lab, use npm and the "vite" tool
   to create a new React app named "react-wrapup". Then
   change to the react-wrapup directory and run:

	npm install
	npm run dev

   Open the website and ensure that it works so far.

3. Edit App.jsx and delete all the imports and text within the <> </>.
   Also delete the useState() line. 

4. Create the Student component as a functional component that
   accepts "props" as an argument (it will be a student object).
   The function should return JSX that:
	- Displays the student's properties in a string 
          inside of <li> and </li> tags

5. Create the StudentList component as a functional component that
   uses the useState hook to initialize the component's state to
   the studentList. This function doesn't accept any props.

   You will need to import the useState hook.

   The function should return JSX that:
	- Displays a starting <ul> tag
	- Iterates the studentList using Array.map()
	  For each array element, render a <Student> 
          child component, passing a student object
	  as "props"
	- Displays an ending </ul> tag

6. Update the App component to render the <StudentList>
   component.

7. Run and test in the browser. Use the browser console in
   the Developer Tools to help diagnose problems.