- Individual, stage 1 project
- To be completed in class, DATE. No pull request is required.
This project is designed to exercise the following skills:
- Reading and understanding a substantial amount of existing React code
- Lifting React state from a child component to a parent component
- Event handling in React across several levels of nested components
Ada Lovelace is starting a pet rescue service advertising pets in need of rescue online. This App should load the list of pets automatically and present a list of pets with thumbnail images. The user should be able to select a pet and see details, add new pets and remove a pet from the App once adopted.
- Fork and clone this repository
- run
npm install
to install dependencies - run
npm start
to start the dev server
Each of the waves includes a number of questions. Though you should write your own code, feel free to collaborate with other students as you work on these questions.
We have already implemented some parts of this application:
- Code to load JSON pet data in
App.js
- 3 functional stateless components:
PetList
,PetCard
andPetDetails
- CSS for all components. You shouldn't need to write any CSS for this project.
- All of our CSS uses BEM naming
Before you start writing code, read through what's already here and make sure you understand it by answering the following questions:
- How do the components relate to each other? Draw a diagram.
- How does data get from
App.js
toPetCard.js
?
When the user clicks the select
button the app should present the user with additional details on the selected pet. Read through the provided propTypes
attribute of the given components, what information does that provide?
Questions:
- How will you track which, if any Pet is the currently selected Pet? Which component will keep the state?
- Will you need to switch a functional component to a classical component?
- What events should you listen for?
- Draw a diagram of the flow of rendering and callbacks in your app so far, similar to the one we drew in class.
When the user clicks the X
button on a PetCard, that animal should be removed from the application, including if that animal is the currently selected pet. You should ensure that pets do not return when subsequent pets are removed.
Add a component to the application called NewPetForm
to add a new Pet. This should be a controlled form. New pets should not be added unless they have a name, an image link and a species.
Questions: (same as for wave 2)
- How will a new pet information arrive in a PetCard component?
- Will the new component be a functional stateless component or a class component.
- Draw a diagram of the flow of rendering and callbacks in your app so far, similar to the one we drew in class.
Add a component called SearchBar
. This component should consist of an input and when the user types in the input field, the list of pets should be filtered to only include pets whose about
, species
or name
fields match the text in the input. You can use JavaScript's match
function to assist.
Questions
- Should this component be a functional stateless component or a class component?
- Which component should track the filtered list of pets?
Don't even read this list until you've completed the core requirements.
- Notice that each pet in the application can have multiple images, add functionality to switch between images.
- Add functionality to change the pet order.