ReactJS Bootcamp - Zero to Hero- v2026

Discover what react is, a JavaScript library for building user interfaces, why we use it, and how it focuses on the view layer of the model-view-controller design pattern.

Discover the core philosophies of React, including its declarative, component-based approach that enables encapsulation and reusability across web, mobile with React Native, and Next.js.

Discover how React boosts performance with the virtual DOM, enables reusable components, and benefits from a strong community and debugging tools, while improving SEO through SSR/SSG with Next.js.

Explore React use cases across single-page applications, progressive web apps, React Native mobile apps, and Electron desktop apps, with responsive design via CSS, media queries, or Tailwind CSS.

Explore how the virtual dom uses two in-memory copies—current changes and all changes—to update only the changed parts of the real dom.

Explore React's reconciliation algorithm that diffs virtual trees with heuristics, updates only changed parts, and uses keys to optimize dynamic list rendering.

Explore the React fiber architecture, enabling incremental rendering, prioritization of urgent updates, and concurrent features with suspense for data fetching and smooth transitions.

Set up a development environment for React by installing Node.js and npm, selecting a package manager, verifying versions with node -v and npm -v, and preparing VSCode editor with extensions.

Set up VSCode as the course editor, install ESLint and Prettier, and use React code snippets to speed up component creation.

Learn to install and use Chrome React Developer Tools to inspect component trees, view props and states, and profile rendering for performance and memory usage.

Compare Vite and Create React App as build tools for React, and learn how Vite enables faster startup and hot module replacement for modern projects.

Explore standard Vite/Next.js project structure and scalable architectures best practices for building React apps. Organize public and src folders, with components, pages, hooks, utils, services, layouts, maintaining separation of concerns.

Explore the feature-first, domain-driven approach to React architecture, organizing code by business features with isolated folders, clear domain ownership, and scalable, maintainable structures ideal for a micro-frontend.

Apply atomic design to build a highly usable, consistent UI with reusable components like buttons, date pickers, input fields, and search bars, so a single change updates across the app.

Explore layered architecture for React apps, emphasizing separation of concerns. Organize components, hooks, services, and pages into dedicated layers to improve readability, reuse, and ease for beginners.

Launch your first React project with TypeScript, install dependencies, and run the development server. Build for production with V8 rollup and deploy to static hosting.

Explore the fundamentals of JSX in React, including what JSX is, embedding JavaScript with curly braces, camelCase attributes, and nesting under a single root element.

Explore differences between JSX and HTML, including attribute names like className and htmlFor, the use of self-closing tags, and embedding expressions with curly braces to render dynamic content.

Learn to write clean JSX by keeping it readable and minimal, use fragments over extra divs for parent element, and split components into smaller ones with meaningful names and formatting.

Learn how components are the building blocks of a react application, encapsulating logic and user interface for reusable, multi-place use. We explore functional components now, with class components coming next.

Explore functional components in modern React, learn to declare function components, pass props, manage state with hooks, and build a counter to illustrate dynamic UI without class components.

Learn class-based components in React, defined by extending React.Component with a state object and a render function. Discover lifecycle methods such as componentDidMount, componentDidUpdate, componentWillUnmount, shouldComponentUpdate, and getDerivedStateFromProps.

Compare functional and class components in React, showing that functional components with hooks are simpler, more readable, and future-proof for modern apps.

Learn how props pass data from a parent to child component in ReactJS, with props as immutable read-only attributes you can reuse to welcome users by passing a username.

Access props in function and class components by receiving a props object, render values like name and age, and enable parent to child communication and reuse.

Explore how props differ from state, with props being immutable and used for configuration. Validate props using PropTypes or TypeScript and apply these rules to greetings and a user card.

Learn to build a reusable user card component in tsx with name, avatar, and email props, styled inline, and enforce type safety with prop types and default values for robustness.

Explore the prop drilling problem in React, where props pass through unnecessary intermediate components in a multi-layer hierarchy, causing tight coupling and maintenance challenges, with solutions to avoid it.

Discover how the context API eliminates prop drilling by creating a user context and provider, enabling useContext to share username, theme, and authentication across components.

Utilize composition for isolated UI customization and prop passing to child components while avoiding prop drilling. Use context API for shared data; Redux for complex state and scalable clean architectures.

Learn to handle react events with camel case like on click, on change, and on submit. Update input state using the use state hook and observe real-time updates.

Build a React counter using useState for count and add increment, decrement, and reset buttons with proper event handlers, observing rerenders as state changes.

Master conditional rendering in React by using the ternary operator, the logical and operator, and element variables to show or hide UI based on authentication, loading states, and themes.

Learn to render lists in React using arrays and the map function, creating ul and li elements, and understand keys and React's reconciliation algorithm.

Explore inline styles in React, using a style object for quick, conditional styling on small components, and learn limitations like no hover, no media queries, and reduced reusability.

Discover how global CSS stylesheets in React apps are imported and shared, the risk of conflicts from non-scoped class names, and remedies like naming conventions and CSS modules.

Discover css modules and their local scope to prevent class name conflicts across components; learn to convert styles to module files, import them, and use styles.card and styles.avatar.

Learn how CSS in JavaScript libraries enable styling within JavaScript files, and create styled components like buttons and cards using template literals, then apply them in JSX.

Explore theming support in style components, using a theme provider and a theme file to define colors, font sizes, and typography for dynamic, consistent styling.

Explore the emotion css-in-js library, compare it with styled components, and learn to apply CSS props for dynamic styling in React components.

Explore Tailwind CSS, a utility-first framework for building modern responsive UIs in HTML or JSX with predefined classes; enable mobile-first design, design tokens, and config via tailwind.config.js.

Learn to set up Tailwind CSS in a React app using Vite, install and configure Tailwind, import it in the main CSS, and verify Tailwind is working.

Master tailwind utility classes for layout, spacing, typography, and color, learn responsive breakpoints, and configure theming in tailwind.config.js to create cohesive design systems.

Explore responsive design in React using Tailwind CSS to implement mobile-first grids and flex layouts with breakpoints like sm, md, lg, and xl.

Explore mobile-first best practices in the ReactJS Bootcamp, focusing on Tailwind optimization, minimal CSS, and responsive layouts for menus and cards across screens.

Build a responsive user card component in React with Tailwind CSS showing a profile picture, name, title, and a follow or message button, stacking on mobile and horizontal on desktop.

Develop a responsive user card component in a React app using Tailwind, organized in a components folder and integrated into app.tsx with a two-button action panel.

Explore react hooks in depth, comparing use state, use effect, and use context to replace wrapper hell from class components and simplify complex lifecycles with custom hooks.

Master complex lifecycle logic in class components, coordinating data fetching, timers, and cleanup with multiple lifecycle methods, and see how useEffect simplifies this into a single, tidy block.

Learn how to use the useState hook, implement functional updates with the updater function, apply lazy initialization for expensive state, and manage objects and arrays in our useState hook.

Apply lazy initialization to useState by passing an arrow function that computes the initial value once, avoiding repeated expensive computations and render blocking.

Learn to manage objects in a React useState hook by updating with the setter and the spread operator, preserving existing fields while changing only the name.

Master immutable array management in React by adding, removing, and updating items with viewstate. Use updater functions, lazy initialization, and spread operators to preserve existing data.

Master the useEffect hook for data fetching by observing how it runs once on mount, using an empty dependency array to avoid unnecessary rerenders, and handling API calls safely.

Explore useEffect dependency arrays, including empty, specific dependencies, and no dependency options, learn to fetch data with async/await, handle errors with try/catch, and trigger refetch via UI.

Master useEffect cleanup to prevent memory leaks on unmount, manage multiple effects, and handle subscriptions, timers, and document title changes with proper dependency management.

Master the useContext hook to avoid prop drilling by creating a theme context with a provider, consume it in header, and implement a theme switcher.

Implement a theme context and provider in a hooks app, set up a header and a theme switcher, and enable tailwind css dark and light themes with a toggle.

Implement a header component with dynamic styling from a theme context, and add a theme switcher button to toggle between light and dark themes, including error handling for missing context.

Explore how the useContext hook eliminates prop drilling by enabling data access from any depth, with use cases for theme, authentication, language switching, and role-based permissions, plus memoizing context values.

Explore how the useRef hook references values across rerenders without causing DOM updates, access DOM elements via ref.current, and focus an input with a button in two practical examples.

Learn to use the useRef hook to store mutable values that don’t trigger re-renders, with a timer example updating a count every second via useEffect and cleanup.

Learn how the useReducer hook manages complex state in functional components, handling multiple sub values and transitions from previous states with a Redux-like structure.

Compare the useReducer and useState hooks through practical scenarios, showing when useState suffices and how useReducer handles complex state, previous state dependencies, and multiple actions.

Use lazy initialization with an init function in useReducer to compute initial state once, and compare useReducer with Redux as component-level state versus app-wide state with boilerplate and dev tools.

Master the useMemo hook to memoize expensive computations, cache results, and optimize re-renders by dependency arrays, improving performance in React applications.

Use useMemo to optimize performance by memorizing pure function results, not for correctness; profile first, and reserve useMemo for expensive calculations with stable dependencies, using useEffect for data loading.

Use the useCallback hook to create a memoized callback that doesn’t recreate unless dependencies change, reducing unnecessary rerenders of child components and preserving a stable function identity.

Learn how useCallback memoizes the increment function in a parent and child React setup to prevent unnecessary child rerenders, using React.memo and a dependency array.

Explore the useImperativeHandle hook with forward refs to expose only specific child methods to a parent, using a game controller analogy to illustrate limited access.

Demonstrate how useImperativeHandle with forwardRef exposes two parent-accessible methods—focus input and clear input—while preserving encapsulation and delivering controlled interaction between parent and child components.

Expose only minimal APIs from child components using useImperativeHandle for imperative behavior when needed, and wrap with forwardRef for focusing inputs, scrolling, or triggering animations.

Discover how custom hooks provide reusable, stateful logic to keep components clean, separate concerns, and enable form handling, API calls, animations, and timers.

Create a use counter hook to encapsulate counter logic with useState and a default value of zero. Use this reusable hook across components to manage increment, decrement, and reset.

Explore design principles for custom hooks, led by the single responsibility principle, with a clear api design and encapsulation, including use fetch, use form, and use dark mode examples.

Learn to handle forms in React by binding inputs to state with useState using control components. Compare control and uncontrolled components and implement validations before submitting data to an API.

Build a React text input component by binding its value to state with useState and onChange, style with Tailwind, and display the live name as you type.

Bind a text area to bio state and update on change, mirroring a text input. Explore a select example with a fruits array, capturing and displaying the chosen fruit.

Demonstrate creating a React checkbox with a boolean checked state, updating on change, and labeling the control 'Accept terms and services' in a tsx component.

Learn to implement radio buttons in React by binding radio inputs to state, with default male, handling on change to update the selected gender, and displaying the chosen value.

Explain controlled versus uncontrolled React components, detailing useState for input value and onChange handling, and using refs for non-state inputs with validation and conditional UI examples.

Assess controlled versus uncontrolled components in react forms. Controlled components enable validation and debugging with state; uncontrolled components offer simpler code and better performance for large forms.

Explore how to handle form inputs with React Hook Form, install the library, and use the useForm hook to create performant, built-in validated, declarative forms that integrate with UI libraries.

Register inputs with the use form hook to bind name and email, then use handle submit to submit with optional validation and watch to monitor values during rendering.

Learn how to watch input values with the watch function in a form to enable real-time validation, conditional rendering, and debugging for the name field.

Discover React hook form, a lightweight, fast library with a smaller bundle size that enables forms in seconds using TypeScript friendly code, reduces rerendering, and supports Zod and Yap validation.

Explore schema based validation with Yup and Zod to centralize and declaratively enforce form validation across large React apps, enabling reusable components, strong types, and better error handling.

Install and use the Yup validation library with react hook form, build a TypeScript login form schema, and enforce required name and valid email with custom messages.

Integrate the Zod library with React Hook Form in a TypeScript project, using a Zod schema and resolver to validate and handle errors.

Build a signup and login form in react using react hook form for state and validations, with zord-based schemas, real-time validation, loading and error handling, plus TypeScript support.

Install dependencies such as react-hook-form, zod, and @hookform/resolvers, then define a signup schema with email validation and a minimum eight-character password, and infer signup form data type from the schema.

Build a signup form in React using react-hook-form and zod resolver, manage a loading state, simulate a 1.5 second API call, and show a signup success alert.

Design and validate a signup form in JSX with email and password fields, labels, and inline errors, wired through a useForm hook's onSubmit to handle submission and loading state.

Learn client-side routing in React apps using React Router to build single-page applications that update content without full-page reloads, delivering fast, dynamic, server-efficient user experiences.

Install and set up the React Router library in a React project using declarative mode, and learn installation, routing, and navigation with npm install and react-router-dom.

Wrap your app in a browser router to enable client-side routing with HTML5 history API, define routes with a routes component, and map paths to home, about, and contact.

Explore the core components of React Router, including route and Link, and learn how to navigate without full page refresh using the Link component and the history API.

Learn how the nav link component extends the link component to provide active link styling that highlights the current page in navigation menus, using the className prop and isActive function.

Learn to implement nested routes in a React Router app by building a dashboard with a dedicated layout, profile and settings pages, and Tailwind integration.

Explore the outlet component as a placeholder that renders nested route content inside a parent layout, using React Router to swap dashboard content like profile or settings.

Explore React 19 routing enhancements, including server components and server actions with redirects. Learn how server-side data fetching and pre-loading assets enable hybrid client-server routing for faster loads.

Access dynamic route parameters with the useParams hook from React Router to read URL values in your product detail. Use the same route key to access the value.

Explore dynamic routing with a product details component, using useParams to read a string product id and display the matching product’s image, name, and price.

useNavigate returns a function to navigate to a target path after authentication. define the route in main.tsx to avoid blank screens and enable redirects or errors.

Master programmatic navigation in React Router using the useNavigate hook to redirect users after a login form, guiding them from login to the dashboard via code.

Explore how root loaders and loader functions in React Router fetch data before rendering, replacing in-component loading logic with an asynchronous, data-driven flow.

Learn to build a products component fed by React Router's use loader data, simulate an API with a loader, and map products before rendering.

Finalize product loading with a centralized route layout using createBrowserRouter and loader functions, and use the navigation hook to show a loader during loading, rendering via outlet.

Explore protected routes in React by gating routes like dashboard behind authentication, using a wrapper component and isAuthenticated stored in local storage to redirect unauthenticated users to login.

Build a protected route wrapper in React Router that checks localStorage for isAuthenticated and redirects to login with navigate, rendering children via outlet when authenticated.

Examine advanced state management in React, contrasting local state and use context with global libraries like Redux; learn when to lift state, avoid prop drilling, and scale across apps.

Recap how useState handles local state and how useContext enables shared state, warn against prop drilling, rerenders, and provider hell, and mention Redux and Zustand for larger apps.

Explore how global state management libraries update the cart across components, triggering precise rerenders. Avoid duplicated logic and inconsistent states, and recognize how a single source of truth improves debugging.

Master advanced scenarios for lifting the state up, recap the concept, and move state to the common ancestor to share a single source of truth across parent and child components.

Derive the derived state total in the cart parent and pass it to the cart list and summary to avoid redundant calculations, centralizing logic in a simulated e-commerce cart.

Learn how lifting up the state keeps siblings in sync, prevents duplication and inconsistent states, and enables a single source of truth with Redux or Zustand for global state management.

Recap the Context API and its role in lightweight global state management, showing how to handle authentication data, themes, and language settings.

Apply best practices with the context API by using multiple small contexts (authentication, theme, app configuration, language) and store rarely changing values while avoiding frequent transactional data to optimize performance.

Explore performance considerations when using React context, minimize the number of consumers, and use useMemo to stabilize context values, splitting contexts as the app grows to prevent unnecessary rerenders.

Explore Redux core principles by building a counter with a single source of truth store, read-only state, dispatching actions, and pure-function reducers, then transition from plain Redux to Redux Toolkit.

Create a new React and TypeScript project, install Tailwind and Redux, configure Tailwind in the project, and prepare the counter Redux app for defining types in the next video.

Define and implement Redux actions for a counter by creating a strongly typed action class with increment, decrement, and reset, then connect to a reducer for centralized state management.

Define a counter state and an initial zero value, then implement a counter reducer with increment, decrement, and reset actions in Redux, wiring actions and store for React apps.

Set up a Redux store for a counter app by defining a root reducer and counter reducer, creating the store, and wrapping the app with a provider in main.tsx.

Create a Redux-based counter component using useSelector and useDispatch to read and update a central counter state, with increment, decrement, and reset actions.

Explore redux toolkit basics: slices, reducers, actions, and stores, while learning why redux toolkit reduces boilerplate and improves debugging with immer, thunks, and devtools.

Understand Redux Toolkit concepts, differentiate it from Redux, and learn store, slice, action, and reducer through real world analogies.

Convert the counter Redux base to a Redux Toolkit based setup by configuring the store with configureStore, installing Redux Toolkit, and exporting typed store state and dispatch in TypeScript.

Learn to structure redux state with slices using redux toolkit, define initial state and reducers in a counter slice, and export actions and reducer for store integration.

Compare slice-based actions with a separate action file using createAction, and implement a reducer with a builder, while introducing custom hooks useAppDispatch and useAppSelector for a type-safe counter example.

Plug a redux toolkit based store in place of the redux store by updating main.ts and app.tsx, test the counter with the redux toolkit component, and inspect state changes.

Learn how to manage async actions with Redux Toolkit's create async thunk, enabling API calls, data fetching, and handling pending, fulfilled, and rejected states for loading and error management.

Explore how to create an async thunk with Redux Toolkit to fetch users, manage pending, fulfilled, and rejected states in a slice, and render results with dispatch and selectors.

Create a Redux Toolkit user slice using createAsyncThunk to fetch users from JSON placeholder, define user and user state interfaces, and manage items, loading, and error in state.

Set up a user slice with thunk-based fetch users, handle pending, fulfilled, and rejected cases, and connect to the store to render users from the api.

Create a Redux Toolkit powered 'users' component that fetches and displays a user list via an async thunk, showing loading and error states in a responsive grid.

Learn Arctic query for data fetching and caching in Redux Toolkit, which eliminates boilerplate and auto-generates hooks for get, create, and delete user endpoints.

Leverage the reselect createSelector hook to memoize filtered user results until inputs change. Implement a selector to fetch users, filter by search term, and toggle active and inactive views.

Learn how Arctic Query automatically caches get requests, refreshes on remount or mutation invalidation, and uses tag-based invalidation to refresh lists after adding a user, reducing unnecessary network calls.

Learn how redux selectors and the reselect library optimize data access, decouple components from state shape, and prevent unnecessary rerenders when filtering data with useSelector.

Learn how reselect reduces unnecessary rerenders compared to the use selector hook, enables efficient derived state for sorting, filtering, and aggregations, and helps diagnose performance issues.

Structure Redux stores for large applications to avoid a wall of reducers and make feature logic easier to locate. Use a domain-based, feature-focused project structure to boost team collaboration.

Group by business domains, using a domains folder and reducers for each domain like accounts and orders, then configure a multi-slice store with toolkit.

Discover how structured stores enable easier scaling, clear team ownership, and maintainable code, with domain-based organization, code splitting, and lazy loading to support growing applications.

Compare Redux alternatives like Zustand, Jodai, Recoil, and Zeus ten, emphasizing simplicity and business logic, with a Zustand store created via create and actions.

Create a zustand powered counter in a plain React TypeScript project, defining a counter store with count, increment, decrement, and reset, then build a counter component wired to the store.

Create a Jotai atom for a count and manage it with the useAtom hook to read and update state, using increase, decrease, and reset actions in a counter.

Explore the recoil library by modeling global state with derived selectors and single-file atoms, then implement counter actions (increase, decrease, reset) using useRecoilState to manage state in a React app.

Compare Redux, Zustand, Jyoti, and Recoil on boilerplate, learning curve, and performance to guide choosing the right state management for enterprise-scale and small to medium applications with derived states.

Explore server state management with stack query (react query) and swr, compare benefits over local state, and learn how caching, auto refresh, and optimistic updates keep server data in sync.

Explore TanStack React Query concepts like fetching data, server caching, mutations, and query invalidation to keep a React app synchronized with API updates.

Explore swr, a server state management library by vercel, featuring auto revalidation, focus refresh, and caching; implement with axios and use swr to fetch data and handle loading and errors.

Build a real-world shopping cart app using Redux Toolkit and Stack Query to fetch products, manage the cart, and auto-calculate totals.

Kick off a shopping cart project with tailwind, connect to a self-hosted mock API for product data, install zeus, tanstack query, and redux toolkit, and define product and cart types.

Develop a product card component in TSX with product props, connect to the cart slice via app dispatch to add items, and render image, name, and description with polished styling.

Create a cart slice with an initial state, implement add item and remove item reducers, update item quantities, and build selectors for cart items and total.

Plug the card reducer into the store, define the card type, and implement product and cart components to add or remove items with dispatch, while showing price and cart total.

Build and render the app component with a header, product list, and a cart powered by Redux Toolkit, using ten stack query for products and quantity-aware totals.

Master server side sync with ten stack query through mutations and API-driven updates. See how UI stays in sync after deletes and additions, while managing state with Redux Toolkit.

Explore fetch API and axios integration in React by comparing their pros and cons, setting up axios base URL interceptors, and implementing production-ready server communication with practical tailwind CSS examples.

Learn how axios streamlines http requests with automatic json handling, interceptors, base URL, headers, and get, post, put, patch, delete methods, installed via npm and used with async/await or promises.

Set up a production-ready Axios client in a React app with a single, configurable API module centralizing the base URL and default headers, plus interceptors for request headers.

Set up an Axios client with a base url and default headers, and use request interceptors to auto attach authorization headers to requests. Handle responses and errors with response interceptors.

Compare fetch and Axios to choose the right HTTP client for your project, noting fetch's native simplicity and Axios's interceptors, timeouts, and automatic JSON handling.

Master get requests with fetch and axios to retrieve posts, a post by id, and comments from jsonplaceholder api, then use an api client to create, update, and delete posts.

Explore how to handle loading and error states in get requests, compare fetch with axios, and implement interceptors for automated headers.

Learn how to handle loading and error states in front-end apps by showing loaders, skeletons, or loading text during API calls, and delivering friendly error messages with a retry option.

Enhance the loading state by building a reusable loader component with a Tailwind spinner, replacing the loading text in the Axios client base.

Learn to handle error states gracefully with a user-friendly error component that shows a general message and includes a retry button to reload the window.

Discover how tailwind css styles loaders, including the spinner with animate spin and a skeleton loader with animate dash pulse, to show five skeleton cards while data loads.

Master graceful loading and error handling in React apps by using spinners and skeletons for smooth feedback, delivering friendly error messages with retry options, so users feel in control.

Learn to manage api data with useEffect by using a thoughtful dependency array, refetching only on relevant changes like user id, and using cleanup to prevent stale data.

Learn to prevent race conditions in React by canceling prior requests with an abort controller or mounted flags, using useEffect safely and cleaning up to avoid memory leaks.

Identify useEffect mistakes, such as missing dependencies that cause stale data or memory leaks. Use cleanup functions and is mounted flags to prevent race conditions and ensure safe API calls.

Learn crud operations with a back end API in a React app using axios, performing create, read, update, and delete on a products resource.

Set up a Tailwind CSS project with an api client, configure a base url via a dot env file using read_ prefix, and render a product list with type-safe components.

Fetches products with Axios in a professional product list component, using state and useEffect to call the API client's get method and display name, description, and price.

Learn how to add a product using an http post in a ReactJS app. Build a form for name, quantity, description, and price, then post payload to the products resource.

Learn how to update a product using a put request that replaces the entire product, or a patch request to update specific fields, via an update product form.

Delete a product using the http delete method by clicking a delete button that passes the product id to the api delete call, removing the item from the list.

Combine all components into a single page app by toggling add and edit forms in the product list. Manage state and IDs to add, edit, and reflect api updates.

Identify common React API mistakes, implement proper error handling, and ensure UI updates after post or delete, while applying centralized Axios logic, try-catch, input validation, and optimistic UI updates.

Compare Arctic query and query, explain when to use each with Redux or from scratch projects, and demonstrate useQuery setup, query keys, Axios-based data fetching, and a product listing flow.

Discover the benefits of tensor query and query libraries, including caching, optimistic updates, automatic refreshing, and built-in retry and fallback error handling for scalable apps.

Build a blog manager app with create, view, edit, and delete post blocks using React with TypeScript, Tailwind CSS, Axios, and React Query, including project setup and routing.

Set up the api client and wrap the app in a tenstrike query provider. Build hooks for get all posts, create, update, and delete post via a blog api module.

Fetch posts using a use post hook powered by useQuery, calling the blog API's get all post method, then display them in a post list with loading and error states.

Create a new post in a React app using a create post hook with mutation, a post form for title and content, and navigate back after submission.

Learn to update a post using an update post hook and mutation function, invalidate queries to refresh data, and fetch the post by id to populate the update form.

Delete posts using a stack query mutation, updating cached data on mutate and invalidating queries on settle while handling errors and confirming deletions.

Explore authentication vs authorization in React apps, including JWT basics and tokens versus sessions, and how login dictates access to routes.

Learn how session-based authentication creates server-stored sessions with a client-side session ID cookie, validates each request, and why scalability and mobile/api architectures push toward token-based authentication.

Token based authentication issues a token after login, stores it on the client in browser storage or http-only cookies, and validates it on each request to grant access.

Explore how jwt enables token-based authentication by encoding user data and claims in a compact, base64 url encoded, signed token with header, payload, and signature.

Learn how JWT tokens are signed with a server secret to verify authenticity, prevent tampering, and grant access after server validation when sent as bearer authorization.

Learn the jwt lifecycle and storage options, including exp claim and token expiration, using short-lived access tokens, long-lived refresh tokens, and storage via local storage, session storage, or http-only cookies.

Implement sign up and login forms using JWT tokens for authentication in a React app, using React hooks and axios to call sign up and sign in endpoints.

Build a login form with email and password, mirror signup flow, handle errors, call the API to receive a token, and store it in local storage to grant access.

Display user details from local storage, send a bearer token with API requests, and highlight security practices like http-only cookies, https, and front end and server side validation.

Explore managing global authentication state with context API and Redux Toolkit, storing essential user data and token, and choosing the right approach for access control and redirects in apps.

Set up an auth context and provider, storing user data and token. Wrap the app and use the useAuth hook to manage login and logout via local storage.

Master Redux Toolkit to manage auth state, persist tokens in local storage, and refresh tokens when needed. Implement an auth slice, configure store, and use dispatch and selector in components.

Install React Redux and Redux Toolkit, then configure a store with an auth slice to manage user state via login and logout, persisting data in local storage.

Explore secure handling of JWT tokens, compare local storage, session storage, and HTTP-only cookies, and evaluate XSS and CSRF risks to ensure safe transmission via HTTPS.

Explore how http-only cookies, secure flags, and same-site settings secure JWT tokens, contrasting localStorage and sessionStorage for token handling and their XSS/CSRF trade-offs.

Secure your app with HttpOnly cookies, HTTPS, and SameSite to prevent token theft and defend against XSS and CSRF attacks; use short-lived access tokens with refresh tokens and rotate them.

Implement protected routes with React Router DOM by creating a private route component that redirects unauthenticated users to login page, using the auth context to gate access to the dashboard.

Explore protecting multiple routes with a private root and outlet in React Router, implement hydration by reading local storage, and safeguard dashboard and profile pages from unauthorized access.

Implement protected routes by validating auth state on page load and redirecting unauthorized users. Validate JWT on the backend with a current user route and hydrate from local storage.

Learn how role based access control (RBAC) works and why it matters for authorization, and protect routes and UI elements with user roles in a React, TypeScript, and Tailwind project.

Implement role-based access control by extracting the role from the jwt payload and enforcing allowed roles on dashboard and profile routes with an unauthorized page.

Test role-based access control by simulating admin and normal user logins, verify protected routes, route to unauthorized pages, and dynamic navbar visibility based on user roles.

Learn how to integrate a React app with OAuth providers, understand OAuth 2.0, implement Google and GitHub logins, and handle tokens while connecting backend APIs.

Implement Google authentication in a React frontend by following the OAuth 2.0 flow, creating a Google OAuth client ID, and handling the Google token to issue a backend JWT.

Configure Google OAuth by creating a client ID in Google Cloud Console for a web app, set authorize JavaScript origins and redirect URLs, and implement frontend to backend JWT login.

Implement GitHub oauth login with a combined frontend and backend flow, including client ID/secret, redirect and callback, code exchange to obtain a jwt, and fetching user name and email.

Compare Google and GitHub OAuth, noting Google uses a JWT and GitHub uses an authorization code, and apply backend verification with HTTPS, validated redirect URLs, and short-lived tokens.

Learn to secure a ReactJS app by sending a JWT in the Authorization header for protected backend routes, implementing token hydration, role-based access control, and robust logout behavior.