Complete guide to React.js (new version19) (Inc. Next.js 14)

Learn how to download and install the VSCode editor across Windows, Linux, and Mac, customize with essential extensions like Babel JavaScript, ES6 JavaScript, and VS Code icons, and organize projects.

Install node.js and npm, verify installations, then install create-react-app globally, and scaffold a new react app, checking the project folder in VS Code.

Explore the React folder structure and the hello world program, including node_modules, package.json, index.js, and the public/index.html with React DOM integration.

Explore what JSX is in React.js, how it resembles HTML, and how Babel translates JSX into JavaScript to render content into the root element.

Master rendering multiple elements in ReactDOM by wrapping JSX in a single enclosing tag, using div wrappers, arrays, and JSX fragments, with version guidance from React 16 to 18.

Learn how to render multiple elements in React without extra wrapper divs by using React Fragment, eliminating unnecessary DOM nodes and CSS issues while keeping output intact.

Create a React app from scratch, add h1 and p, and render an ordered list of five Netflix series using JSX and React DOM.

Explore how JavaScript expressions power JSX in React.js, using variables, curly braces, and simple operations to render dynamic content and even random elements.

Learn to build a React app from scratch, add a header, display the current date and time using JSX and React DOM, including fragments and dynamic date strings.

Learn how JSX attributes work in React, including HTML attribute mapping, camelCase naming, using curly braces for expressions, and practical examples with images and content editable.

Import index.css and style React components with className, then apply color, capitalize, bold weight, and text shadow in a flex layout for images at 200px.

Learn how to add Google fonts to a React.js app by obtaining the embed code from fonts.google.com, inserting it into index.html, and applying font-family in index.css.

Explore internal and inline CSS in React.js, including creating a style object, converting kebab-case to camelCase, and applying text align and font weight.

Create a React app from scratch to display a dynamic greeting that changes with time of day, using conditional logic and a style object to color-code morning, afternoon, night.

Learn how React components enable reusability by building small, reusable components with JSX, importing React, exporting defaults, and composing them across a page.

Turn the time-based greetings code into reusable React components, switching from app.js to app.jsx, exporting a single component, and wiring it through index.js for dynamic rendering.

Learn how import and export work in React, including default vs named exports, curly brace syntax, and importing multiple variables and functions into components.

Build a simple React.js calculator that adds, subtracts, multiplies, and divides two numbers with two decimal points, using import/export and React components to compose and export functions.

Learn how props power reusable React components by building a Netflix series card interface, using props for image source, name, and links to create unique cards.

Define an array of objects containing name, image source, and link, and render it with a reusable card component using props to keep code organized and scalable in React.js.

Render a Netflix series app's car cards with the array map method and fat arrow functions in React.js, turning sprawling code into concise, scalable data-driven UI.

Explore if-else conditions in React.js through a Netflix-inspired example, using arrays, index access, and fat arrow functions to render comedy or romantic movies and other options as components.

Master the ternary operator as a compact replacement for if-else, using condition, question mark, and colon. See how it selects comedy movies versus others from an array efficiently.

Discover why hooks, especially useState, were introduced in React to manage local state, demonstrated through a practical example with a counter in a functional component.

Learn to build a React component that updates a local time on button click using hooks and useState, with the time refreshing on page reload.

Create a digital watch that displays and auto-updates the local system time using a React hook and setInterval, showing the time in an h1 element every second.

Run a React application directly in the VS Code terminal using the built-in terminal, npm start, and practical shortcuts to start and preview the app quickly.

Learn how React.js handles events from kebab-case to camelCase, using onClick, onMouseOver, onChange, and onLoad, with useState to increment and prevent decrement below zero.

Install and use Material UI icons in a React application by installing the npm package, importing icons like plus and delete, and rendering outlined, filled, and two-tone variants.

learn to use material ui components in a react app, including installing material ui with styled components and using buttons, checkboxes, sliders, switches, and text fields.

Learn to build a React.js counter with hooks, featuring increment and decrement functionality, initialized to zero and guarded against decrementing below zero.

Showcases building and using the React context API to share data across components with create context, provider, and consumer, and accessing it through use context and consumer.

Explore how the useEffect hook automatically runs when actions happen in a React app, using useState, onClick, and dependency control to trigger or suppress the effect.

Learn how react router dom enables client-side navigation and a single page application, install and configure browser router, routes, and route components for seamless react apps.

Install bootstrap in a react app via react-bootstrap, import bootstrap css, verify installation, then use container, row, and columns across breakpoints xs, sm, md, lg for a responsive layout.

Learn to build a React.js tic tac toe game from scratch using components, state management with useState, and implement winner, draw, and reset logic.

Explore building forms in React.js using React Bootstrap and Material UI, distinguishing controlled and uncontrolled forms, handling input with onChange, useState, and dynamic display of input value.

Create a login form with two text fields for username or ID and password, update state on change, and display submitted values with hello, all without a database.

Learn to manage multiple complex input fields in React with a single use state object, handling onChange via e.target.name, and updating with setData to keep inputs controlled.

Tackle a five-input form in React.js, capture first name, last name, id, password, and email, and display all entered data in an alert and on the page.

Learn how the spread operator, shown as three dots, expands arrays and merges data in React.js, explores ES6 destructuring, and prepares object and form handling using spread in React.

Turn hundreds of input lines into two concise lines by using a single data object and an ES6 spread operator inside a setState callback to update fields by name.

Create a React.js todo list using a controlled input and useState to add items, render the list with map and unique keys, and mark items with a line-through on delete.