Projects›Pro· 180 min read
Project: Connect React to Express
Wire your React front-end to your Express API — a real, working full-stack app (just add MongoDB next).
What you will learn
- Connect a React app to an Express API
- Perform create, read and delete from the UI
- Handle loading and errors across the stack
The brief
Take your React to-do (or data) app and connect it to your Express CRUD API, so the front-end and back-end work together over HTTP.
Requirements
- Express API with CORS enabled and full CRUD.
- React app that
fetch-es the list on load (useEffect). - Add an item from a React form →
POSTto the API → update the UI. - Delete an item in React →
DELETEon the API → update the UI. - Loading and error states on the React side.
Tip: Run both at once: the Express server on one port, the Vite dev server on another. Use the API URL in your React fetch calls. CORS makes it work.
Note: You now have a real two-tier app: React ⇄ Express. The only missing piece is a real database so data survives restarts — that is the MongoDB unit, the final piece of MERN.
✍️ Practice
- Connect your React app to your Express API for listing, creating and deleting items.
- Add loading and error handling on the React side.
🏠 Homework
- Write down what each layer (React, Express) is responsible for in your app.