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.

Install essential extensions for Visual Studio Code, including iOS seven, prettier, and brackets per polarizer, to accelerate React development and enforce consistent formatting.

Kick off the JavaScript refresher introduction by setting up a Visual Studio Code project, creating index.html and script.js, linking the script, and launching a live server to view hello world.

Learn how to declare and use variables in JavaScript with var, let, and const, including when to assign, reassignment rules, and avoiding redeclaration for reliable code.

Learn how to write cleaner, shorter JavaScript with arrow functions, replacing function expressions, using implicit returns for single-line bodies, and handling single versus multiple parameters.

Explore conditionals in JavaScript by mastering if statements and the ternary operator, with syntax insights and React examples for age-based access logic.

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

Explore the spread operator, using three dots to unpack arrays and objects into new contexts. Compare it with the rest parameter to handle a variable number of function arguments.

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.

Explore ES6 classes as a cleaner, template-based way to create objects with a constructor, properties, and methods like greet, and see how new instances share prototypes.

Master ES6 modules with import and export, export variables and functions, and import with braces or alias; run in a local server for modular JavaScript.

Explore default exports in modules, showing how to export a single default value, import it with any name, and combine with named exports to access multiple values in React apps.

Learn to create a React app with Create React App by using the terminal, naming the project, meeting node version requirements, and opening the app in Visual Studio Code.

Explore the public and source folders, review key files like index.html, app.js, index.js, and package.json, and learn how npm start launches the development server on port 3000.

Learn to build a basic React hello world app by wiring index.html, index.js, and the app component, rendering into the root div and updating live.

Clean up the project by removing unused files and folders, fix a compile error caused by a deleted logo, and simplify imports to keep a neat source folder.

Discover how React uses a component-based system by building a function component named App, exporting it by default, and rendering it into the root div via ReactDOM.

Master a code-extension shortcut to quickly create React function components with export, choosing arrow or regular function syntax, and note that importing React is now optional.

Learn to create a custom React component with an arrow function that returns content on a single line and a self-closing tag, then reference it from the app component.

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.

Output dynamic values in React by rendering variables inside curly braces; perform calculations and use random values, and set dynamic attributes like links, while avoiding objects or booleans.

Explore styling React components with inline styles using the style attribute and style objects, practice camelCase CSS properties, and manage global versus component-specific styles with index.css and individual CSS files.

Scope CSS with modules by renaming the CSS file to a module and importing it, then apply styles via a styles object to isolate component styles.

Explore styling options in React, including inline styles, CSS-in-JS, and external CSS files like index.css, with CSS modules or styled components for larger apps.

Learn how props in React pass information between components, enabling dynamic rendering of multiple user cards by setting name and job props on each component instance.

Define default props for a React component to avoid empty name or job. Use a default props object or an inline approach to set default name and default job.

Destructure props in a React component by moving from props.prop to { prop, jobProp } in the parameter list. Compare this with the classic access and observe default props behavior.

Learn how the children props work in React by wrapping content in opening and closing tags and passing it to a Card component as its children.

Render a list of users in React by mapping data from a file, passing name and job as props, and using a unique id as the key for each item.

Learn how to handle events in React by wiring onClick handlers to a button, using named and inline arrow functions to trigger alerts.

Build a responsive profile app by creating team member cards with name, job, company, and a clickable view profile link, showcasing card effects and a real person profile.

Create a React app and build three components: profile, profile list, and card, showing image, name, job, company, and link, then map data from profile data file into the list.

Create a new React app using create-react-app in a chosen directory, then navigate into the project folder and open it in Visual Studio Code to begin building.

Prepare the profile app by building a folder structure in React, creating components for profile, profile lists, and card, adding assets, and cleaning up unused files.

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.

Configure global styles in the index file by importing the Google font Poppins, setting colors and box sizing, and applying a dark background for the profile app.

Build the profile list in jsx and css, import the profile component, and configure stores for a centered, responsive profile grid using flex wrap.

Design a single profile component in React, importing an image, structuring name, job, and company fields, integrating react-icons, and styling a view-profile button to create a profile skeleton.

Style the profile component by setting a 300px wide image, a white background, and responsive typography; align content with flex, add padding, a decorative underline, and a gradient, hoverable button.

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.

Learn how to build a multi-profile card component in React using props for image, name, job, company, and link, then render a profile list with mapping to scale.

Map a profiles data array to render a profile list in a React app, accessing image, name, job, company, and link, and assign a unique key for each item.

Explore hooks in React, introduced in 16.8, and learn how useState and useEffect let you hook into core React features to build web applications.

Explore how React uses a single-page architecture, where a single HTML index loads components and renders updates without full page reloads, and understand state as component-specific memory.

Set up a hooks folder and clone a React starter template into it, then run npm install to fetch dependencies and explore the project in Visual Studio.

Discover how to leverage css utility classes to speed up development in React projects, featuring a dedicated utility file with flex center, spacing, colors, and button styles.

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.

Build a React page with a function component and useState to update text on click, and learn how this differs from direct dom manipulation via the virtual dome.

Explore how the virtual dom provides a fast representation of the ui and syncs with the real dom via react dom. React reconciles changes by updating altered parts, improving performance.

Implement a counter app in vanilla JavaScript, then rebuild it in React to compare approaches, using a html structure, dom manipulation, and add, subtract, reset buttons.

Learn to build a counter component in React using useState, with increment, decrement, and reset controls, including converting class to className and integrating into an app.

Learn how to use a state updater function in React to reliably increment counters, understand how React queues updates, and avoid stale state with functional updates.

Learn when not to use useState in a React counter. Use a simple variable for color that changes with count, showing red for negative, black for zero, and blue for positive.

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.

Learn to manage an object in React state using useState, initialize a profile with name, job, and company, and update the company with the spread operator to keep fields intact.

Explore conditionals in React by applying vanilla JavaScript concepts like if statements, the logical and operator, and the ternary operator. Also cover conditional props and conditional CSS classes.

Explore how to use if-else statements to conditionally render content in React. Build a conditionals component that shows welcome messages based on login state, using useState and basic styling.

Learn to use the logical and operator to conditionally render content in React, checking is logged in and true, and explore displaying alternate messages when the condition isn’t met.

Apply the ternary operator to conditionally render content based on is logged in, showing welcome when true and welcome guests when false. Learn how to conditionally add classes to elements.

Learn how to conditionally add CSS classes in React using the ternary operator, toggle login state to switch user and guest styles, and apply color changes through class names.

Build a mini React project to solidify conditionals with props by rendering a task list, showing a checkmark and line-through for completed items, using props and conditional rendering.

Learn a general project setup workflow for React projects, including using a starter template, cloning from GitHub, organizing folders, installing dependencies with npm install, and launching with npm start.