For this project, we are going to work on developing some muscle memory in building out simple React components and passing data down as props.
You will see the difference between class components and function components and start getting a sense of when to use one over the other.
Get set up by cloning down this repo.
Follow the set up instructions outlined in the repo’s README!
Project Goals & Requirements:
- Write squeaky clean, well refactored code using ES6 syntax.
- Learn to pass information between components using props.
- Learn to write readable JSX (your render methods/return statements should be clean and simple).
Get set up (per the instructions above)!
We’ve provided a boilerplate for you to work with. Look through the file structure to get a sense of the app.
Notice that we have multiple stylesheets - one for each component. You are welcome to style this application however you’d like. We got you started with a little styling, but feel free to get creative. (Remember, though - most of your energy should be spent on learning React, not styling.)
Create a Cohort component, which will act as a container that renders each of our Person cards. For now, the Cohort being displayed will be “Staff”. Figure out how to pass information from
Create a Person component. Each Person card will display: the image, the name, the quote, and the superlative (see the screenshot above for an idea).
In your Cohort component, create Person cards that have the information each needs to display properly.
Iteration 3 (extension - do not attempt until iterations 0 - 2 are completed)
yearbook-data.js file, un-comment-out the “students” information. Get that information displaying, too. How can you reuse components?
Iteration 4 (extension - do not attempt until iterations 0 - 3 are completed)
Create a controlled component that allows people to add a new student.
Projects will be due on Monday of Week 2 by 8am. The instructors will go through projects that morning and then go over common mistakes we saw as a class.