React - Beginner to Advanced (+ Redux & Ecommerce App)

Identify and install Node.js, Visual Studio Code, Chrome browser, and the React Developer Tools extension to follow this React course.

Explore map and filter in React by transforming an array of numbers and filtering ages to adults, using arrow functions and concise syntax.

Explore destructuring in JavaScript and React, turning arrays and objects into individual variables for cleaner access to name, age, and job.

Explore ES6 classes, understand objects, object constructors, and the this keyword, with quick refreshers on JavaScript object oriented programming for beginners.

Create a components folder and a HelloWorld component, export it, import it where used, and refresh to fix undefined component errors, illustrating how React components are organized in separate files.

This lecture explains JSX, a JavaScript syntax extension, and how React converts JSX into React.createElement calls, with rules like a single root element, curly braces, and className.

Install react icons via npm or yarn, copy the icon name from the library page, import the icon from react-icons, and use Font Awesome icons in your app.

Show how to use the React icon context to set a shared color and size for icons by wrapping them in IconContext.Provider with a value.

Build a card component for the profile, wrap the content in it, and apply classic card styles (border, border-radius, overflow hidden, margin, box-shadow) via css, then import and use it.

Explore state in React using comparative programming, starting with vanilla DOM changes and showing how the useState hook controls text content in a simple demo.

Learn to manage array state in React with useState, map a data array to render items with unique keys, and implement clear-all and per-item delete actions using a trash icon.

Learn to remove a person from a list using useState in React by filtering by id and updating state with setPeople via a trash icon click.