Learn how to install the React package with npm, create a React project using create-react-app, and run a hello world app locally on localhost.

Start a React application with npm start and stop it with ctrl-c, then verify the server runs in the project directory and handle localhost errors.

Explore the React project's folder structure, including node_modules, public, and the src directory. Learn which files to edit in the main app while avoiding changes to node_modules.

Learn what JSX is—a JavaScript and XML-like syntax for building React components—and how Babel translates JSX into plain JavaScript and HTML, with markup as a hierarchical structure.

Demonstrate how JSX streamlines React development by comparing it with React.createElement, building elements like divs with content and attributes, and showing how JSX compiles to browser-rendered elements.

Explore how Babel, the JavaScript compiler, converts JSX and ES features from ECMAScript standards into backward-compatible code for browsers, with examples of div, section, and h1 transforming into React elements.

Explore how JSX differs from HTML in styling, using a style object. Learn why className replaces class and how to embed JavaScript variables and objects in JSX.

Discover how React builds web interfaces from reusable components, using functional and class components, and how hooks, state, and the virtual DOM drive updates.

Explore building class components in react by importing libraries, extending React.Component, returning jsx inside render, and exporting default in a create-react-app project.

Explore functional components in React, compare them with class components, and learn how to create, export, and render them within a components folder.

discover the benefits of using components in React, build reusable cards with images and text using functional components and subcomponents, and learn about props for passing data.

Learn inline styling in React by building a file-specific style object, applying it with the style prop, using camel case keys such as background color and padding.

Move styling to an external stylesheet in a React project by creating and importing a CSS file, then applying styles with className for headings and buttons, including background and padding.

Explore styling React with four approaches—inline, internal, external, and the styled-components JavaScript library—covering npm installation, import, and creating a styled component like Box for CSS-in-JS.

Learn how to reuse a class component by passing props to render multiple profiles with different names, contact numbers, and countries, using this.props in a React project.

Learn to use props in functional components to pass data and render dynamic content, and destructure props in the function signature for clearer code.

Learn to use props with both functional and class components to pass name and rating properties, replacing hard-coded values with dynamic props for Iron Man, Spider-Man, Batman, and Superman.

Explore how state in a class component drives interactivity by using a constructor, this.state, and setState to update a message when a button is clicked.

Build a pizza counter app in React by managing state in a class component, incrementing and canceling orders with two buttons to track live counts from zero.

Explore the React class component life cycle, focusing on component will mount and component did mount, how they fire during mounting, and practical data-fetching patterns.

Learn event handling in React by implementing onClick handlers in both functional and class components, defining handleClick, and logging messages to the console while managing this in class components.

Explore conditional rendering in React, showing different interfaces for logged in versus guest users. Learn to implement if/else, ternary operators, and short-circuit patterns in class components.

Learn to build a class-based form in React that uses state, controlled components, onChange, and onSubmit to capture user input, manage language selection, and prevent page reload.

Learn to loop through data with the map function, replacing hardcoded iterations and rendering arrays of objects in React functional components.

Learn to render lists in React using a unique key prop, assign a unique identifier to each map item, and fix warnings by ensuring every item has a stable key.