React Pets Front-End
About
Welcome to Reactville, a constantly evolving virtual metropolis. Let’s build this digital town together, one component at a time.
The Reactville Animal Shelter is seeking a solution to keep track of all the animals currently available for adoption. You will help them build an interactive dashboard where shelter staff can add, update, and remove animals throughout the adoption process. Let’s help these pets find their fur-ever home!
By the end of this lab, students will have a front end that consumes a RESTful API, allowing users to create, read, update, and delete data. This lesson is a basic introduction to consuming APIs with React and does not include React Router to change views; instead, students will use conditional rendering to display different components in a dashboard layout.
Content
| Lesson | Skills |
|---|---|
| Setup | Setting up the development environment. |
| Environment Variables in Vite | Using environment variables in a Vite project. |
| Intro | Scoping minimum requirements and building component hierarchy. |
| Read - Index | Connect a React application to an API to fetch and display a list of items. |
| Read - Show | Use React components to display details about an individual item from API data. |
| Build the Create Form | Create and manage forms in React to add new pet entries to a database. |
| Create and Display a New Pet | Handle the form submission call to the API and display the new pet in the UI. |
| Update | Make update calls to an API and refresh the app state to reflect those changes. |
| Delete | Make delete requests to an API and remove items from the user interface. |
| Add CSS | Applying CSS Styles to your pet dashboard. |
References
Internal
Prerequisites
- Controlled Forms in React
- Lifting State in React
- Fetching Data in React
- Express API - Pets Back-End
Starter code
This module requires an existing API to perform CRUD operations on the resource pets.
Solution code
Course landing pages
Resources
Find a 👾 bug 👾 or have suggestions? Let us know!