This demo shows React Query usage: fetching, caching, mutations, optimistic updates, and query invalidation — inspired by "Why you want React Query" by TkDodo.
Endpoints required (already created by you):
- GET http://localhost:3001/categories
- GET http://localhost:3001/bookmarks/:category
- POST http://localhost:3001/bookmarks/:category
- DELETE http://localhost:3001/bookmarks/:category/:id
How to run:
- Install dependencies
cd /path/to/react-fetching
npm install-
Start your backend (make sure it's running at http://localhost:3001)
-
Start the app
npm run devAlternative API helper
src/apiFetch.jsmirrorssrc/api.jsbut uses the native Fetch API (no axios). You can swap imports to demo differences between fetch and axios in your examples. Style: minimal and clean — the UI prioritizes learning concepts over cosmetics. You can style it further insrc/App.css.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.