React Mega Course - Learn React and then build 6 projects

Create a React app with Vite by using npm create, selecting React in plain JavaScript, then install dependencies and run npm run dev to view the app.

Clean up a React app by simplifying the project, removing unused css, and updating index.html to include bootstrap via CDN, with a title change for beginners.

Explore the basics of JSX by building a functional React component, contrasting with class components, and mastering JSX syntax, fragments, and the use of className.

Learn how to create functions as components in React, including header and footer, using JSX and imports, and render JavaScript expressions inside components to build a cohesive app.

Extract functions into separate components by creating header, main body, and footer files, then import and assemble them in the app to become the parent component.

Learn how to use variables in JSX with curly braces, handle inputs with closing tags, and apply inline styles via a JavaScript style object with camelCase properties.

Learn how to compose React components using the children prop, conditionally render nested content, and enhance with react-icons like Font Awesome in a customer component.

Explore how state in React holds values that can change and trigger component rerenders, then use the useState hook to manage a counter with previous-state updates.

Discover a more efficient useState pattern by initializing state with a function that runs on the first render, avoiding re-evaluation on each rerender.

Learn to manage objects as state values by spreading the previous state in setCount, then incrementing or decrementing the count with handleIncrement and handleDecrement while preserving other fields.

Learn how to loop through an array in jsx using map, pass a customers prop to a CustomerList component, and ensure each item has a unique key for rendering.

Learn to add customers in a React app by converting the array to state, building an add customer form, handling onChange and onSubmit, and lifting state via props.

Explore how to implement if and else if in jsx using the ternary operator and simple if blocks, with a practical example showing subscribed status in a customer list.

Explore the useEffect hook to synchronize state, manage props, and clean up on unmount while building a counter with React state. Understand dependencies arrays and component unmount.

Start routing by creating header, home, products, product, details, and not found components. Copy a bootstrap nav, replace class with className, and wire links to home, products, and product details.

Install react-router-dom and wrap the app with browser router; define routes with paths, use Link for navigation without refresh, and nest routes for products and details, plus catch-all not-found route.

Learn to read url path segments with useParams and extract query strings with useSearchParams, enabling dynamic product details and filtered product lists.

Learn to set up a redux toolkit store and integrate it with react-redux to manage a centralized state; explore redux basics and note Arctic query is not used yet.

Create a counter slice in a slices folder, configure initial state with count zero, add the slice to the store, and read the count using useSelector.

Learn how to manipulate state with reducers and actions using Redux Toolkit’s mutable logic, export and dispatch increment and decrement actions, and wire them to UI buttons via useDispatch.

Create a Redux product slice to manage a products array, seed items like apples and a shirt, connect to the store, and render a products list with details buttons.

Click the details button to dispatch an action that sets the selected product and render its id, name, and category in the product details component.

Explore global actions with extra reducers in a React plus Redux setup, create an actions file, export reset all, and apply it in counter and product slices.

Build a beginner-friendly counter app in React, revisiting core concepts from the beginners section while adding a max of five with disabled buttons, a reset, and spacebar increment.

Set up a new React project by creating a folder, opening it in VS Code, installing dependencies with npm, cleaning defaults, and initializing a git repository.

Learn to split a React UI into reusable components by turning the card structure into a Card with children, and creating Title, Counter, ResetButton, and ButtonContainer components.

Refactor the card component to encapsulate content that used to live as children, moving it into the card itself and showing both approaches while preserving the same output.

Pass the counter value as a prop and manage state with useState(0). Wire setCount to count buttons to increment, using the previous value, and remove the redundant component.

Build a reusable button component in React that uses a type prop to increment or decrement, with a handleClick function and prev state, and export the component.

Limit the counter to five, switch the subtitle when locked, disable the buttons at the limit, and add a reset icon with React icons.

Learn to increment a counter with the spacebar in a React card component using useEffect, keydown handling, event listener cleanup, and blur on click to prevent spacebar issues with reset.

Create a new folder named word LaTeX, scaffold a React JavaScript project with npm, run the dev server, clean up files, and init a git repo with an initial commit.

Add jsx to the app component, set a header and container with a word latex style title, and include a text area and a stats section using custom css.

Discover how to separate a React app into header, text area, and stat components, wire them with props, and enforce quality with ESLint in a practical project.

Learn to create a controlled textarea in React with useState, handleChange, and basic validation that strips script tags and shows a warning.

Learn how to lift up state in a React app by tracking the typed characters in the app component, then passing text and character count as props to child components.

Count words by trimming text, splitting on spaces, and filtering empties with an arrow function. Compute Instagram and Pinterest character limits and show updates.

Apply a conditional class when a number is below zero, using curly braces and backticks, and create a constants.js exporting max limits (Instagram 2200, Pinterest 500) imported into the app.

Build a to-do list in React to master useRef, select lists, pass data through props, add tasks, and persist data with local storage while sorting or toggling completion.

Begin a React project by creating a todo list folder, installing dependencies with npm, and starting the dev server; clean up default files and add React prop types.

Learn to separate the UI into reusable React components, such as counter, select, and item, and compose containers, lists, and add task interactions for a scalable app.

Create a components folder and a lib file for initial items, then initialize the item list with useState and map items to render item components with title and completed.

Learn how to implement add task using useRef for focus, manage tasks with items state, and pass setItems as a prop to handle form submission and simple validation.

Hoist the add item logic to the top component and pass handleAddItem as a prop, enabling data to move top-down or from bottom to top through props.

Handle button events in a React app by implementing remove all, reset to initial, and mark all as incomplete. Map items to toggle completed and ensure checked and onChange handling.

Learn to toggle item completion in a React app by mapping items, identifying by title, flipping the completed flag with setItems, and using prop drilling for top-down and bottom-up communication.

Learn to implement delete functionality in a React app by using an arrow function handleDeleteItem, filtering the array to exclude the targeted title, and passing the handler to items.

Compute completed and total counts by filtering items and measuring lengths, pass them as props to the counter, and display a centered 'nothing to do' message when no items.

Learn how to persist data with localStorage in a React app by syncing state with localStorage using useEffect and setItem, including initializing from storage and efficient arrow function updates.

Learn how the useMemo hook enables memoization to recompute the memoized value only when dependencies change, keeping item lists efficient in a React project.

Fix the public path by switching to /bootstrap css and removing the public bootstrap reference, then perform a hard reload to verify it works.

Build a customer management app in React with CRUD operations and RTK Query, featuring listing, adding, editing, and deleting customers with confirmation.

Create a new folder for customer management and initialize npm for a React project. Install dependencies, run the dev server, clean boilerplate, and add bootstrap with an updated title.

create a customer list component that renders a table with id, name, email, and subscribed columns, includes add new, edit, and delete actions, and refines layout in a container.

Install redux toolkit and react redux, create an API slice with createApi and fetch base query for RTK query, then configure the store with middleware and provider.

Create an add customer form by initializing state for id, name, email, and subscribed, wiring inputs with onChange and value, and building a Bootstrap form for these fields.

Explore using Outlet from React Router Dom to render any component inside a wrapper, wiring routes in the app root, and swapping in add customer and customer list components.

Add customer functionality by posting to the /customers endpoint using a mutation, wiring the form submit with async/await and try/catch, and navigating back to the customer list.

Understand how RTK query caches data from queries, how keeping unused data for 60 seconds controls cache duration, and how tagging and invalidating on mutations keeps data fresh.

Implement edit and add customer features by wiring routes, creating an add customer component, and adding get single customer and update customer mutation endpoints in the API slice.

Enable editing a customer by extracting the id with useParams, populating the form with useEffect, and submitting via the update customer mutation.

Learn how loading states and throttling affect a React app, using loading messages for update and list, network throttling with slow 3G, and dev tools to inspect the component tree.

Implement a delete customer mutation in your api slice, using the /customer/{id} delete endpoint, invalidate tags, and refresh the list via the get customers query, with confirmation and toast feedback.

Learn styling in a React app by applying Bootstrap theme from boot swatch website, importing Bootstrap CSS, and refining table layouts with table light, table dark, hover effects, and margins.

Create a full-stack recipe app by building a Node/Express/MongoDB API and a React front end, featuring login, registration, JWT authentication, filters by name, category, and difficulty, and image handling.

Learn to create a full stack app by setting up frontend in React and backend with Express and MongoDB, building two folders, wiring routes, and running both servers.

Seed the database by importing categories and recipes from the data folder, linking recipes to a valid category with Mongoose, and running import or destroy commands via a node script.

Replace hard-coded URL with a dotenv environment variable by creating and configuring a .env file, then access it via process.env.DB and seed or destroy data with npm scripts.

Create a recipes controller and express router to expose a get /api/recipes endpoint for retrieving all recipes, and test it using the VSCode rest client.

Define and test API CRUD routes for recipes using Express, including get all, get by id, create, update, and delete, with proper status handling and error responses.

Build the front end by creating JSX elements: a header row with login and register links, and a filters row with a search input and recipe list. Include bootstrap links.

Set up routing by installing react-router-dom, create a components folder with a recipe list component, and configure browser router, routes, and outlet to render at root /.

Set up the store and the api slice with redux toolkit and react-redux. Configure fetchBaseQuery for the api and wrap the app in the provider.

build a dynamic recipe list in react by fetching from the api endpoint /api/recipes using a recipes api slice, and display each recipe with an image and details.

Create a category api route to fetch all categories and wire it into the recipe component, mapping categories to a select with ids as keys and names as options.

Implement adding a recipe with a create recipe mutation, handle form submission and image upload separately, validate category and difficulty, set a unique slug, and show toast feedback on success.

Implement image upload in a Node and Express backend with Multer, using timestamped storage, mime-type checks, and error handling, and connect a front-end form data upload to the API.

Preview an uploaded image in a React component by selecting a file, creating a preview URL with URL.createObjectURL, displaying a 200 by 200 image, and revoking the URL on unmount.

Create a loader component using bootstrap's spinner-border, center it with absolute positioning, and conditionally render it during file upload in the add recipe and recipe list views.

Create a recipe details component, configure the /recipe/:id route, fetch details with the use params hook and the get recipe details query, and display image, name, description, and body.

Explore error handling and dynamic searching in a React app by wiring a keyword query parameter to the recipes API, implementing regex matching, and displaying precise messages.

Create a search slice with createSlice to manage a redux search term and wire it to the store. Build a filters component using useSelector and useDispatch to update on input.

Refine the search feature in a React app by correcting the search term names, removing unnecessary useEffect, and wiring state with a selector to filter recipes in the list.

Implement a category filter in a React app by renaming search to filter, adding category state, and wiring RTK Query to fetch filtered recipes.

Build and refine a checkbox filter in a React filters component by managing a selected items state array, handling checkbox changes, and dynamically rendering difficulty options easy, medium, and hard.

Finish the checkbox filter by adding difficulty and empty category handling, updating filter state, and dispatching changes. Build a query that applies category and multiple difficulties to the recipe list.

Create a user model with a pre-save hook that hashes passwords using bcrypt and implement a register route via api/users/register, returning a success message.

Implement a login route using a user model method to compare passwords with bcrypt, returning 200 on success and 401 on invalid credentials, and test with email or name.

Implement login with JSON web tokens, sign a JWT with a user ID, store it in a HttpOnly cookie, and manage logout with expiry and same-site rules.

Create the auth slice and the users API slice, initialize user info from local storage, and define a login mutation that posts credentials to the users login endpoint.

Enable private routes in the front end by using a private route component that checks auth user state, renders the outlet for logged-in users, and navigates to /login otherwise.

Create a login component with name and password fields, connect it to a login mutation, dispatch credentials, and navigate to the root on success, with error handling.

Implement logout by adding an action in the auth slice and a logout mutation, clear user info and local storage, and toggle the logout button based on login state.

Build a register component using the register mutation to send name, email, and password to the users/register route, validating password confirmation and navigating to login on success.

Add a wysiwyg to the recipe creation form by integrating a React-based editor, wiring it with a ref and state, and enhancing the text area with rich text capabilities.

Attach a logged-in user to a recipe via backend handling and middleware, then render the recipe body with HTML React Parser in the frontend, ensuring proper login and data flow.

Style the React app with the Zephyr Bootstrap theme by adding Bootstrap CSS to public index.html, and refine the recipe list, including adding new recipe and visual tweaks.

Add an author field to the recipe model and display author and difficulty in both the recipe list and details view, using badges and styling tweaks.

Learn how to add and manage recipes in a React app by creating new entries, entering descriptions, images, categories, and difficulties, with login and multiple authors.

Build a full e-commerce and cms app with a React frontend and Express and MongoDB API, featuring pages, categories, products with pagination, cart, and admin content management.

Connect to MongoDB by configuring an env file for shirts and fruit, installing mongoose and dotenv, and wiring a db.js to establish connection with a database connection log.

Build and seed a MongoDB database by creating mongoose models for category, product, and page, defining their schemas, and running a seeding script with dotenv and env config.

Develop a categories API by building a categories controller, defining a get all categories route, and returning a JSON response with proper error handling.

Learn product crud routes for a rest api, including get all products, get by id, create with slug from name and optional image, update by id, and delete under /api/products.

Implement pages CRUD routes by cloning the products setup, adding API endpoints for get all pages, get by id, create, update, and delete, with drag-and-drop ordering.

Create the header and footer markup by organizing components and screens, adding a header nav, converting class to className, and updating links like features, pricing, login, and register.

Set up routing with react-router-dom and configure redux with redux toolkit, create an api slice with base query, and wire the store, provider, and router in the app.

Create a pages api slice, fetch pages with the get pages query, map pages to nav items, and hide the home link by slug with display none, ensuring unique keys.

Build a dynamic page display in React by using optional slugs, fetching a page by slug, and handling loading and errors in a page component.

Create a categories api slice and a categories component to fetch and display categories. Render them as bootstrap list group items with links to category slugs and integrate into app.js.

Display products by category slug and handle all versus specific categories, then implement an api slice to fetch products by category slug.

Create a category based product listing by using slug from the route, fetch products with Getproducts query, display images and names, and link to individual product details pages.

Build a product details screen that fetches a product by id via an endpoint, displaying image, name, description, and price with an add to cart button on the /product/:id route.

Define a user model with username, email, password, and is admin; seed an admin user with bcrypt-hashed password; implement a pre-save hook to hash passwords and apply slug capitalization.

Create a login component in a React app, wire the /login route, and manage a single form-data state for username, email, password, and confirm password with planned client-side validation.

Implement real-time validation for name, username, email, password, and confirm password, updating form data and clearing errors on change, then validate on submit and log data when valid.

Create a users controller and auth middleware to register and login users, issuing a JWT, and storing it in an http-only cookie, and protect routes with authentication and admin checks.

Merge login and register components into one form and require a two-character username. Create a users API slice with login, logout, and register mutations that handle credentials and local storage.

Build a complete login and registration flow using login and register mutations, dispatching credentials, handling errors with toasts, and navigating between login, register, and home routes.

Implement header logout by conditionally showing a user greeting and a danger-style log out button, call the logout mutation, and dispatch logout to reset user info and local storage.

Create an admin route that checks user info with a selector, renders the outlet if admin, or redirects to login; set up admin pages under /admin/pages and guard the area.

Explore admin pages by fetching pages with a get pages query, render a table of page id and name, and implement edit and delete actions with navigation to admin pages/edit/{id}.

Learn to reorder admin pages with the HTML5 drag and drop API, enabling dragging non-home pages to reflect a new order while updating state with use state and use effect.

Enable drag-and-drop reordering for admin pages with a post to /api/pages/reorder and an id array. Handle home slug as zero and reflect changes via a UI toast confirmation.

Add a wysiwyg editor to the admin add page using a React HTML parser, wire up onChange, sync content to form data, and address errors display.

Implement add page functionality by wiring a mutation in the pages API slice to post to api/pages, handle form data, unwrap the response, and display a toast success message.

Empower admins to edit pages using a slug-based get page query and a page edit mutation, wiring route params, API slice, and form state with useEffect.

Learn to implement a delete page action with an API slice mutation, wire up on-click delete handling, show confirmation and toast messages, and verify deletion by refreshing.

Build an admin products page in React that fetches products via the Getproducts query, displays a table with name, price, category, and image, and includes edit and delete actions.

Implement product validation by wiring handle change and submit, and populate an errors object. Enforce fields: product name (min four), description, price (regex), category, image extensions (jpg, jpeg, png).

Learn image validation and preview in the add product flow by handling file types, form data, and object url, with live previews and clear error messaging.

Add a product via the API by uploading an image with multer, constructing form data, and posting product details to create and view the new item in admin.

EditProduct guides fetching a product by id, populating an edit form, uploading an image, and submitting updates via an edit product mutation in a React admin panel.

Modify the seeder to create and remove gallery folders for each product in public/gallery using product IDs, looping over products, creating folders recursively, and cleaning up by deleting on destroy.

Learn to implement a multiple image upload component with client-side validation for image types, handle file selection, and display error messages within a React admin product flow.

Implement a multi image upload flow for products by creating an API route and a front-end mutation that sends form data with the product id; verify by displaying gallery updates.

Learn to display and upload product images in a React app by fetching images by product ID and rendering a gallery at gallery/ID/image.

Post to api/products delete image to delete a gallery image by sending id and image in the request body, remove the file with fs.unlink, and invalidate the product tag.

Execute a delete product flow by removing the product, its gallery folder and image, handling missing files, and validating the API endpoint while updating the admin UI.

Lock down routes by requiring logged in and admin for sensitive actions, sync cookie expiration with local storage, and add middleware to clear storage on 401s and redirect to login.

Build a ProductGallery component in React, fetch product images via the API, and display them with the React image gallery, including ID routing and basic authentication handling.

Create a cart slice with local storage persistence, add to cart, and a cart component that reads items via useSelector, displaying items or a 'your cart is empty' message.

Learn to implement a robust add to cart flow in React by dispatching actions to a cart slice, managing item quantity, and preventing duplicates with real-time totals and toast feedback.

Manage the cart state and compute the grand total for cart items by multiplying price and quantity, then display the results in an interactive table. Show each item's name and image with price, quantity, and total, and provide actions to add, remove, clear items, and check out.

Learn to implement cart actions in a React app by adding, removing, deleting, and clearing items in a cart slice, dispatching actions, syncing with local storage, and showing toast notifications.

Determine user login status to conditionally render the checkout button or a login link in the cart, using a redirect query string and navigation back to the cart after login.

Focus the username field on login and register using useRef and useEffect, ensuring autofocus and proper navigation initialization for smooth checkout.

Define an order schema linking to a user with items, quantities, images, prices, and a grand total, then implement a post route to create orders and an order placed screen.

Design and test the create order mutation in the orders API slice, pass cart items and user ID and grand total, then navigate to order placed after checkout.

Build a profile page as a private route, map the /profile path to the profile component, and add a header link while integrating an HTML parser for rendering content.

Create a profile page that shows the logged-in user's orders, enables product ratings, and fetches orders via a user-specific profile API, displaying order details and items with images.

Create a rating component in React that displays 0–5 stars using react-icons, accepts a product rating prop, handles full and half stars, and integrates with the product listing.

Create a rating model and routes to capture user ratings, enforce unique user-product ratings, update product's average rating, and provide an API to fetch a user's rating.

Create a rating feature by building a rating api slice and a user rating component, wiring post and get rating calls by user and product, and rendering interactive stars.

Fix the user rating issue by forcing a refetch after rating actions to see updates instantly. Learn caching behavior and how refreshes affect orders and ratings.

Teaches pagination for a product listing using a query string page parameter and category slug, computing total pages and integrating page size with the api slice.

Learn to build a bootstrap-based React pagination component, using AI like ChatGPT to generate code, switch to URL-based links, support first/last pages, and handle current and total pages.

Fix bugs in admin tasks by disabling delete for the home page and switching the products admin view to a simple get all products call via the products api slice.

Add proper data to pages and products by updating HTML, managing images and galleries, and creating new products and test pages in a React project.

Learn practical styling by integrating a flatlay theme via bootstrap css, applying a dark header, highlighting prices with badges, and refining layout for cart and checkout flows.