Master React: Build Real-World React Project from scratch

Learn the basics of React, a popular JavaScript library for building user interfaces and single page applications with components, virtual DOM, and unidirectional data flow.

Explore the virtual dom, a memory-resident representation of the real dom, and learn how reconciliation and diffing update only changed parts for faster, more efficient React apps.

Master React's jsx by learning how it writes HTML-like code inside JavaScript, how it compiles to React.createElement calls, and how to build dynamic UIs with components and conditional rendering.

Explore how functional and class components in React manage state, props, and lifecycle with nesting and JSX to build modular, reusable UIs.

Learn how to manage local component state with the useState hook and handle lifecycle events with the useEffect hook in functional React components, with practical examples.

Master React teaches conditional rendering to display content from state and props. Use if statements, ternary operators, and the logical and to render based on login status and editing state.

Learn to handle React events with onClick, onChange, and onSubmit to build interactive interfaces. Manage input state with useState, prevent default form submissions, and attach multiple event handlers on components.

Install and customize the news content section of the news and blogs app, creating a visually appealing grid that displays headlines and six articles using JSX and CSS grid.

Fetch news from the GNews api with axios in a React app, managing headline and articles via useState and useEffect, and render a dynamic headline with a six-article grid.

Create a dynamic news app that fetches articles by category, using a categories array and selected category state, updating content when users click a category.

Make the modal box functional by managing show and selected article state, opening on article click, and dynamically rendering image, title, source, and publication date.

Enable users to bookmark articles, view them in a modal, and manage bookmarks with state, icons, and interactions within a real-world React project.

Learn to save bookmarks in the local storage to persist articles across refreshes and browser restarts by using JSON stringify, JSON parse, and local storage APIs in a React project.

Build the weather widget by creating the JSX structure for the weather component and displaying dynamic data from openweathermap. Integrate the box icons library and a location input.

Transform a static weather widget into a React component by fetching data from Open Weather Map API, managing state with useState and useEffect, and handling not-found errors and enter-key searches.

Build and customize a calendar component in JSX and CSS, including month navigation, weekdays, day cells, and a highlighted current date, ready to integrate into the React project.

Create and customize a blog post form in the blog section, allowing users to add posts with a title, text, and image, styled to integrate with the app.

Create a blog submission feature in React. Manage posts with a blogs array, handle image uploads, and render posts dynamically in the news component with a no-image placeholder.

Learn to display a submission message and validate blog post forms in a React app, using state to control visibility and navigate back to the news component after submission.

Learn to save and load blog posts with local storage, persisting data across sessions, update the blog list with set blocks, and load data on mount using useEffect.

Learn to edit and delete blog posts with local storage persistence, enforce a one megabyte image limit, and pre-fill editing forms for the selected post.

Discover react 19's new features, including a compiler that optimizes builds, server components and actions, suspense asset loading, built-in metadata, web components support, and improved hooks and async transitions.