In-Class exercise: Getting Started with React

  1. Create a new React project. Run it in Chrome.
  2. Deploy this new React project to GitHub Pages.
    1. Follow the instructions for doing so (instructions using WebStorm, instructions using command-line)
    2. Verify the react application is running at your GitHub Pages URL.
  3. In index.js change the render call so that it renders, on a single line, a name (in bold), an email address (in a monospace font like Courier), and a phone number. The name, email and phone number can be hardcoded. It should look something like:
    screendump: header saying people, and then bold name, courier email and plain phone number, separated from each other with space
  4. Now, create a constant with the data: 
    	const data = {
	  name: "Neil Rhodes,
	  email: "rhodes@hmc.edu,
	  phone: "(909) 555-1212"
	};
    and modify the render call so that it fills in the information from the data.
  5. Modify the data so that is an array of people information: 
    	const data = [
			{
			  id: 512,
		 	  name: "Neil Rhodes",
		 	  email: "rhodes@hmc.edu",
		 	  phone: "(909) 555-1212"
		 	},
			{
			  id: 787,
		 	  name: "Barack Obama",
		 	  email: "ex-prez@whitehouse.gov",
		 	  phone: "(312) 555-1212"
		 	}
		];
    Adjust the render call so that it loops through the array generating something like:
    screendump: header saying people, and then two rows of bold name, courier email and plain phone number, separated from each other with space
  6. Look at the JavaScript console in your web browser. Fix any warnings you see when you display the page.

    Hint: the id field would make a good unique value for each list child.

Hints