React JS Masterclass: Zero To Job Ready With 10 Projects

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.