/events-hub

This is an events hub project based in React with React Query.

Primary LanguageJavaScript

events-hub

📣 Overview:

  • Intro
  • Tech Stack
  • Techniques
  • Additional Link

🔎 Intro:

This is an events hub project based in React, mainly focused on working with React Query.

🧰 Tech Stack:

  • React & React Query
  • Tanstack Query - A library that helps with sending HTTP requests & keeping the frontend in sync.
  • React Router Dom v6
  • JavaScript
  • CSS3
  • ViteJS
  • NodeJS
  • ExpressJS

🛠️ Techniques:

  • Tanstack/React Query:

    • useQuery: Is a hook that used to send an API request and handle the result of that request.
    • QueryClient: Is the core instance for managing caching, fetching, synchronizing, and updating server data. It configures global settings, handles queries/mutations, and manages their states and lifecycle events across the app.
    • QueryClientProvider: Is a component that provides a QueryClient to our React application. It enables React components to use hooks like useQuery and useMutation for data fetching, caching, synchronization, and state management. It must wrap your app to function.
    • useMutation: Is a powerful hook for managing data-altering operations like creating, updating, or deleting data. It simplifies handling asynchronous mutations, providing features like automatic retries, caching, and error handling to streamline API interactions in React application.

  • React Hooks:

    • useParams: This hook gives an access to multiple contents in the same URL path, then it enables each parameter to have a unique identification.

  • React Router Dom Hooks:

    • useNavigate: Is a hook that returns a function that lets you navigate programmatically.
    • useSubmit: Is a hook that enables form submission programmatically. It returns a function that mimics a form submission without needing a form element.

  • React Router Dom Components:

    • Outlet: Is a component provided by React Router that serves as a placeholder for child routes within a parent route.

  • loader: loader function can be define in each route to provide data to the route element before it renders.

  • redirect: When returning or throwing responses in loaders and actions, we can use redirect to redirect to another route.

    Note: It's recommended to use redirect in loaders and actions rather than useNavigate in your components when the redirect is in response to data.

🔗 Additional Link:

If you want to strengthen your knowledge and skills of React, Redux, and more... along the Best Practices, Feel free to check this course on Udemy by Maximilian Schwarzmüller:

Visit the Course 👉🏽 HERE !

Shoutout to Maximilian Schwarzmüller for this practice project design, all the lectures, the exercises, and the React course in Udemy. Mahalo, Thank you! 🌺

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available: