React for Beginners - From HTML CSS & JavaScript to React.js

Learn how to transform a traditional HTML, CSS, and JavaScript site into a React application, render components, and integrate JSX, events, and images.

Create a single, lowercase, dash-separated course folder in VS Code, run it with live server, and learn the traditional HTML, CSS, and JavaScript workflow before React.

Learn how to render a React component by using functional components, wrapping multiple elements with a fragment, and mounting the component to the DOM with the render method.

Learn how JSX blends HTML-like syntax with JavaScript in React, using Babel to compile, embedding expressions with curly braces, and applying camelCase attributes (className, htmlFor) to render dynamic components.

Learn to define and invoke functions in JSX using function keywords or arrow functions, and trigger them with onClick events and callbacks.

Learn how to add images in React by using a header image variable and an image tag in JSX with a relative path to an images folder.

Install React locally, create a React app, and explore the file structure; learn to start, run, and stop apps on a personal server with different ports.

Learn to set up a React development environment by verifying NodeJS and NPM, installing when needed, and creating your first app with create-react-app, using proper naming conventions and terminal navigation.

Discover the standard React project structure, including package.json, node_modules, public and src folders, and learn to install dependencies, run with npm start, and render to the root div.

Apply the style attribute in React by passing a camelCase CSS properties object to elements, including color and fontSize, and learn when to use variables or className with external CSS.

Explore components, props, and children in React; build reusable card and button components, use function props (event handlers), and install and use the React icon library with Bootstrap icons.

Learn how to build reusable React components, including functional components and the shift away from class components, with proper naming, importing, and composing components to render UI.

Learn how props pass data from a parent to a child in React, enabling reusable functional components; use curly braces for props, manage class names, defaults, and other component properties.

Create a reusable React card component with header, body, and children, styled via CSS or inline styles; customize with background color, padding, shadow, and borders for flexible, reusable UI cards.

Discover how to use icons in React by adding Font Awesome via CDN or installing React Icons, importing icons from multiple providers, and styling their size and color.

Learn to integrate bootstrap in a react app as an alternative to styling, via CDN or npm, apply bootstrap classes to cards and buttons, then create a custom button component.

Explore function props and event handlers in React, pass callback functions from a parent to child components to handle clicks with camelCase event handlers.

Create a title component to practice building React RFC functional components, passing text and classes as props, importing from a components folder, and rendering within a single page application.

Create a reusable header component in React that accepts children as props to render a title, text, image, and two buttons, and integrate it into the app.

Create a reusable React button component with props for classes, text, type, style, and onClick; include a default alert when no handler is provided and optional icon support via react-icons.

Create a React component demonstrating the useState hook to manage a counter with plus and minus buttons, showing state-driven UI updates.

Create a modal component and use state to control visibility, prompting users to log in to access content. Pass title and text, and provide login and close actions with handlers.

Learn to extend and compose reusable components in React by building a configurable card with header, body, and footer, using props, icons, and state to render category cards.

Learn how to render offers as cards in React using useState and map, building an offers container and list, and toggle more or fewer items with a show offers control.

Learn to build a testimonial section in React by creating a testimonial card component, a testimonial list, and wiring props for name, title, text, image, and social icons.

Create a JSON database of testimonials, import it into a React component, store it with useState, and render testimonial cards by mapping over image, full name, job title, and text.

Learn how to use the useEffect hook to perform side effects after rendering in React functional components. Understand dependency arrays, cleanup, and how to fetch data and sync state.

Explore the dependency array in useeffect, an optional argument that watches values. See how an empty array runs once on mount and how changes trigger re-execution.

Create an interactive five-star rating in a testimonial card by using useState and map, giving each card its own rating state and click-to-rate functionality.

Explore useRef in React to reference DOM elements, build page navigation, and create a scroll-to-top button that appears on specific window actions.

Learn to navigate to the offers section using the useRef hook, wiring a header button with an onClick handler to scroll the offers into view with smooth behavior.

Create a scroll-back-to-top button in React by using useEffect, useState, and useRef to track scroll position, show a top arrow, and scroll to top via click.

Explore how to build and validate forms in React using controlled components, including login and registration forms, with form submission, validation, and focus management via useRef.

Create a login form inside a modal in a React app, controlled by state to show and hide, with email and password inputs and handling submit by preventing default.

Explore building a form group component in React to simplify login and registration forms, passing label, type, placeholder, and disabled props while preserving a consistent theme.

Submit the login form with email and password, prevent default, trigger an alert, generate an id with Math.floor and Math.random, and reset the email and password fields.

Learn to implement client-side login validation in React by building a validate-and-submit form that checks email and password, shows alerts for empty fields, and toggles the login modal.

Create a registration form component in a React app, toggle between login and registration within a modal, and implement form groups with state, refs, on submit, and basic validation.

Register form data by preventing the default submit and capturing full name, email, password, and confirm password, then validate, reset on success, and show appropriate alerts.