React JS Masterclass: Zero To Job Ready With 10 Projects

Discover that React is a JavaScript library, not a framework, built for component-based UI in a single-page application, with prerequisites in HTML, CSS, and JavaScript and developed by Facebook.

Set up your React environment by installing Node.js LTS and Visual Studio Code, create a desktop practice folder, verify Node is active, and install essential extensions.

Explore how to start a React project using Create React App, Set React App, or Veet, compare their setup and folder structure, and learn essential npm scripts for development.

See how a React app's folder structure works behind the scenes, with node_modules, public, and src, and how bundling and index.html render the app to the root.

learn to build a react boilerplate from scratch by cleaning default files, setting up index and app components, rendering with react-dom, enabling strict mode in development, and importing global css.

Explore the difference between class-based and function-based components in React, including practical project setup, common errors, and the modern approach with no React import required in React 18.

Learn what JSX is and why we use it to write HTML-like markup inside JavaScript, including rules for a single root element, closing tags, and camelCase naming.

Create header and footer components in a React app components folder and import them. Store images in an assets folder and organize CSS across index.css, app.css, and component styles.

Explore why states matter by building a counter app, updating a count with add and subtract buttons, and understanding how state triggers re-renders in React.

Learn to use the useState hook to manage state in React, initialize the state value, access the current state, and update it with the set count function, triggering re-renders.

Explore how useState updates are batched, why count plus one can yield only a single increment, and how passing a function to setCount applies updates sequentially.

Explore useState with an array of task objects, render a dynamic task list using map, destructure task properties, and resolve the unique key warning by using a task id.

Learn to delete a task in React by passing the task id to a delete handler, filtering the task list, and re-rendering the updated list.

Learn to implement conditional templates in React using true/false conditions, useState toggles, and ternary operators to show, hide, and color completed tasks green.

Declare and initialize hooks at the top of your component before dynamic expressions. Do not use hooks outside the component scope; use them within the component or in custom hooks.

Explore building a React component tree by creating and composing header, task list, and card components, using props to pass title and subtitle and rendering with fragments.

Convert each task into a reusable task card component and pass dynamic props. Destructure props, pass a delete handler, and manage keys to solidify a scalable component architecture.

Learn to build reusable box components with children in React, pass content as children, and control independent state with conditional rendering and the ternary operator.

Learn how prop drilling passes data from one component to another through props, how renaming props affects access, and why centralized state management becomes necessary as apps grow.

Explore how to structure stylesheets in a React app with a global indexed stylesheet and component styles, including fonts, icons, variables, common pre settings, and element-level rules for cascading overrides.

Explore structuring a React app with header, main sections, and footer as components, and style them with per-component CSS for task cards, lists, and boxes.

Apply inline css in react by passing a style object using style and dynamic expressions, use camelCase keys like color, border, fontSize, and organize styles in a constant object.

Explore dynamic CSS and dynamic class names in React, using ternary operators to conditionally apply inline styles and colors based on a show toggle.

Learn how CSS modules restrict styling to a component by using a task card module CSS and importing it as styles for local scope.

Learn to build a forms-based interface that captures user input with text fields, checkboxes, and selects, and submit new tasks while controlling form fields in React.

Master the onChange event in React by updating input state with event.target.value and reflecting changes in the UI. Use named or inline handlers, and optionally check length.

learn to implement controlled inputs in react by using a reset trigger to clear task state, demonstrating on click, on change, and resetting multiple fields.

Master the on submit form flow in React by building a submit handler, generating a random id, creating a task with name and completed status, and resetting fields after submission.

Learn to add new tasks in a React app by lifting state up, passing task and setTask to the add task component, and updating the list with spread.

Explore the useRef hook to create a non-rendered reference to an input, accessed via current, with an initial value; attach, log, and note that current cannot be rewritten or rendered.

Learn to set up a json server to create a fake api for your React frontend, define endpoints, test crud operations, and simulate search and sort with query parameters.

Learn to fetch product data with the native fetch API inside a useEffect hook, store it in state, and render a product list while mastering mounting and dependency arrays.

Explore why React StrictMode in development renders components and runs use effect twice, causing duplicate console logs as state transitions from empty to filled.

Design a responsive React user interface by mapping over products in state, rendering dynamic details, and centralizing css while exploring fetch patterns with async/await and url updates.

Learn how to use the useCallback hook to memoize external functions, preventing infinite useEffect loops when the URL changes, and manage dependencies with the dependency array.

Create a reusable custom hook useFetch to fetch data from any endpoint, using useState and useEffect, and return a generic data object for reuse across pages.

Implement a loading state in a React component. Display a loading indicator during API fetch with loading true on start and false on completion, optionally using a loading.gif.

Learn to handle fetch errors with try/catch, validate response.ok, and throw status text errors such as 404. Manage loading and error state to display server issues clearly.

Learn to abort an in-flight fetch with an abort controller, pass its signal to fetch, and clean up in useEffect on unmount to stop rendering during mounting.

Learn how passing objects and arrays can trigger infinite loops, and how to use useCallback for functions and useRef for values to stabilize renders and manage dependencies.

Build a full-fledged task app with add, edit, delete, and show task components in a single demo. Leverage local storage to persist tasks and team priority, and prepare for deployment.

Discover how to structure a React project from setup to static assets, including creating with npx create-react-app, organizing folders, configuring public assets, fonts, CSS, and a hello world UI.

Build a modular ui for a to-do app with header, add task, and show task components, import assets, and render tasks with map while planning state and local host storage.

Learn to build a task list with React state, add and delete tasks, pass task list and setTaskList between components, and generate unique ids.

Master editing and deleting tasks in a React app by sharing state, filtering and mapping the task list, and pre-filling inputs for edits.

Resolve undefined input values by defaulting to empty in a task management app, clearing the input after add or update, and updating tasks via map with edit and add modes.

Add an update button that toggles between update and add actions based on the task ID, showing how editing sets the ID and clears it in a simple task list.

Store and persist your task list across sessions using local storage, reading with getItem, parsing JSON, saving updates with useEffect and JSON.stringify. On first run, initialize with an empty array.

Learn to build a React theme switcher that toggles dark, light, and medium themes by updating the html class with useEffect, onClick handlers, and local storage persistence.

Compare two deployment methods for your React project: git-based deployment via GitHub to the server, or a manual build upload to net file; automate future deployments with the first approach.

Explore how React Router augments React to enable a single-page application with routes for home, product list, and product details, keeping headers and footers persistent.

Wrap your app with browser router, define root with path and element, and map home, product list, product detail, and contact pages, plus header and footer for consistent navigation.

Improve project structure by turning header and footer into components, using react router dom's Link and NavLink for seamless single-page navigation with active states and exact matching.

Master navigation in React Router by using the useNavigate hook and the Navigate component to programmatically route to home, admin, or product pages, including conditional redirects based on user status.

Master dynamic route parameters with useParams to fetch product ids and render a single detail page. Use useSearchParams for query filters and useLocation for full routing context and 404 handling.

Create robust routing in React by configuring a catch-all 404 page, mapping top-to-bottom routes, and passing props to components, including nested routes for admin and product pages.

Explore nested routes and outlets to share common content across country pages like India, EU, and US. Implement 404 fallbacks and plan scalable structure for growing React apps.

Master project restructuring in React by organizing into pages and components, creating index exports, and consolidating routes in a dedicated routes folder to improve import paths and routing clarity.

Explore Tailwind CSS fundamentals through a crash course, learning atomic CSS, installation, responsive basics, and two modes—conceptual and project—as you build a landing page with Tailwind and IntelliSense.

Install Tailwind CSS via CDN or npm, and explore Tailwind utilities for font size, color, background color, padding, margin, borders, and border radius.

Explore how to apply CSS properties with Tailwind using hover, focus, and other states. Learn to override defaults and apply hover, focus, and disabled states across buttons and forms.

Explore responsive design with Tailwind breakpoints from sm to 2xl, applying default styles and overriding them at each breakpoint. Learn mobile-first ranges and min-max width controls.

Explore enabling dark mode in a tailwind project by configuring dark mode, applying the dark class to the html element, and using light and dark properties for background and text.

Explore how to configure Tailwind in React projects, including file inclusion, theme colors, and extending or overwriting settings. Learn to add colors, shades, spacing, and border radius, and screen sizes.

Build a responsive landing page—sound mate—by applying tailwind utilities to a structured header, navigation, logo, and footer, then implement flex layouts, hover effects, and responsive sizing.

Designs a hero section and product cards with a heading, subtitle, and hover button, plus flexible, bordered product cards with images, titles, and descriptions, using Tailwind utilities.

Implement and style a footer in React, center align text, apply height, padding, and a top border using utility classes, and explore responsive adjustments across breakpoints.

Explore responsive screen design with breakpoints, adjusting flex direction, height, borders, gaps, padding, and typography using Tailwind classes and Flowbite components.