The complete React 19 course, incl. Next JS & Express

Learn to create a React app with vite, and explore Next.js options for full-stack use; then run npm install and npm run dev to start the server on localhost:5173.

Learn how a react project organizes files from src to dist, manage dependencies in node_modules, and build for production with vite and npm scripts.

Create a src directory with main.js and run npm run dev to view it on localhost 5173. Render the App component with jsx into the route.

Explain how JSX becomes React elements behind the scenes using createElement, fragments, and single-element returns. Master key JSX rules, including className and modern render patterns in React 19.

Plan your React app by modularly splitting into components—app wrapper, header, news container, and news items—and shift from single-file code to a dynamic, file-per-component structure.

Create a components directory, build and export header and news list components, then import and render them in the main JSX to connect the app.

Learn how a React component renders inline dynamic JavaScript using curly braces, returns a single expression, and wraps complex logic in functions for clean, reusable code.

Explore styling a React app by embedding Google fonts like Anton, using inline styles or a CSS file, and importing styles into the source for header and logo.

Explore how to handle user events in React, using onClick and onChange listeners, camelCase handlers, and synthetic events to access input values and log interactions.

Split code to reuse components and build a clean header and navigation bar in React. Export, import, and map nav items from a data file for dynamic navigation.

Learn how component state, via useState, powers a counter with an initial value zero and a setter function to update count on button clicks, including naming conventions and destructuring.

Explore the useState hook and how to access the previous state to update counters, reset to the initial value, and handle increments or decrements with functional updates.

Master complex state in React by managing objects with useState, updating from the previous state, and learning when to use useReducer.

Use React state to control the header by capturing user input into a keywords state with setKeywords, updating on each change, and sharing data via props across components.

Learn to share data from a parent to a child component using props in a React setup, using data.js and useState to render a news list.

Explore how to render dynamic news feeds in React by mapping props data, using keys, and creating reusable NewsList and NewsItem components with prop destructuring.

Explore how React children use props.children to pass content into a component, access it in the child, and render it in multiple places, highlighting props and component composition.

Learn to apply dynamic inline styles and CSS classes in React using useState, template strings, and ternary expressions to toggle active states and visualize color changes.

Share data from child to parent in React by passing a function through props, invoking it from the child, and handling input change events to update the parent state.

Explore filtering news data with a keyword-driven search, update state, and render filtered results using a JavaScript filter, with plans to fetch from MongoDB and introduce hooks and React Router.

Explore core React hooks and fundamentals, set up a project, and build a simple counter to demonstrate use state and the use effect.

Learn how to use the React useEffect hook to synchronize a component with an external system, understand dependency arrays, control when effects run, and perform cleanup.

Learn how the cleanup effect works in useEffect by mounting and unmounting a red block component, logging creation and removal, and toggling visibility with state.

Create a React component that demonstrates the useRef hook to access a dom input and log its current value when a trigger button is pressed.

Learn how to pass a ref as a prop to a child input component in React 19, and access the input's value through the ref.

Explore how use context enables sharing data across components to avoid prop drilling, using use state, use effect, and use ref, and contrast it with Redux's centralized store.

Learn to create a React context and provider, wrap the app, share a centralized users state via value, and access it in components with useContext (and the new use API).

Explore building a complex React context value with active state, a users array, and setter functions; toggle visibility, map users, and immutably add users from the provider to child components.

Learn to build a tiny 'who pays the bill' game in a React app, with more than one player input, validation, two stages, toasts, and context API and Bootstrap integration.

Create a React context by building a context directory, using createContext and provider, managing stage, players, and result with useState, and wrap the app to share state.

Display stage two or stage one by consuming a React context with useContext and conditional rendering. Build an input with validation and refs to populate the players array.

Set up a React Bootstrap form with a text input bound to a useRef, connect to context, and handle submit to add players to a list, with validation planned.

Add and show players by handling form submission, preventing page reload, updating a context-based players list, rendering the list, and enabling removal with a next-step validation flow.

Master React input validation by building a validation function, managing error state, and showing Bootstrap alerts for empty fields or a three-character minimum before advancing.

Remove a player using a context-based remove handler. Copy the players array, splice the target index, and update state with setPlayers, wiring onClick and toasts for the loser flow.

Show how to display toasts when fewer than two players, including a top-left toast container and two-second auto close, then advance to stage two and reveal the loser.

Create a simple React app that generates a random loser from a users list, uses context to display the result, and includes reset and get new loser actions.

Explore how React Router enables multi-view navigation in a single-page app, install the library, set up a React project, and run the dev server with npm commands.

Explore how the router process differs between traditional server reloads and a single-page application using React Router, where history changes map URLs to components without full page reloads.

Set up react router v7 with a high-level browser router, create home, posts, and profile components, and define routes for home, posts, and profile with a persistent header.

Learn to link in a React Router app using Link instead of the A tag for home, posts, and profile. Use useNavigate for programmatic navigation and useSearchParams for query data.

learn how to transform a plain header into a cleaner, responsive navigation bar using Bootstrap CSS, a container wrapper, and nav pills for home, posts, and profile.

Explore building dynamic routes for posts using React Router by turning the post id into a dynamic path parameter, accessing it with useParams, and inspecting route data with useLocation.

Explore router types in react router, including browser, hash, and memory routers, and learn when to use each. Implement nav link with active state to apply styles.

Learn how to redirect users in React Router using the navigate component and the useNavigate hook, including replace behavior, redirecting to home, and handling 404 not found routes.

Learn how to implement a 404 not found route with React Router by using the wildcard path, creating a not found component, and rendering a fallback when no routes match.

Explore nested routes by creating a parent route and rendering child routes with an outlet to display users, guests, and admins.

Learn to implement transitions in React using React Transition Group, from installing the library to building a red div with state, ref, and CSS transitions.

Learn transition basics in React 19 by applying CSS classes to animate enter and exit states, using square elements, state-driven classes, and on enter and on exit callbacks.

Explore how to implement css transitions with react transitions group by wiring state, a node ref, and the in prop to animate a div with enter and exit states.

Learn to implement React transition group for list animations by using an array of objects with numbers and nodeRef, adding and removing items, and applying CSS transitions.

Learn form handling in React using formic, with components, hooks, and schema validation, then download a three-page form template, install npm packages, and run the dev server at port 5175.

Learn to build controlled forms with formic in React by wiring initial values, values, handleChange, handleSubmit, onSubmit, and applying basic validation.

Apply Formik validation with a validate function, manage errors via an errors object, and show messages using touched for first name, last name, and email. Introduce Yup later.

learn to validate forms with a yup validation schema, using formik, applying string, required, max, min, and email rules with custom error messages.

Learn to implement the Formik hook with useFormik, define initial values and onSubmit, apply a Yup validation schema, and simplify input handling with getFieldProps, touched, and errors.

Learn to replace plain forms with Formik components, wrap with a Formik instance, and use Field, ErrorMessage, initial values, validation schema, and onSubmit to manage inputs and errors.

Create a custom field component and connect it to formic to handle value, placeholder, onChange, onBlur, and errors, enabling a reusable last name input.

Discover how to manage complex React state with Redux or useReducer with context and the global store, and learn when to scale with Redux versus simpler solutions.

Create a react app, install redux toolkit and react-redux, configure a store with reducers, wrap the app in the react-redux provider, and create a slice for state management.

Create a redux toolkit slice to manage state, name it meaningfully (movies), define initial state and reducers, export the slice and reducer, then wire them into the store and provider.

Access the centralized Redux store to manage a default movie list, view state with Redux devtools, and render movies using useSelector to read state.movies and map them.

Mutate state with actions in reducers using dispatch and payloads, exporting add movie, and building a users slice with set type to switch between guest and admin.

Extend extra reducers by mastering the async thunk flow with thunk API, dispatch, and getState; pass arguments, manage loading with pending and fulfilled states, and handle errors.

Master reject and fulfill using the thunk API, with rejectWithValue and fulfilled payloads, inspect action payloads, and transition from error to success, then compare context and useReducer as Redux alternatives.

Explore dispatching thunks as promises, access the response payload via unwrap, handle success and error paths, and fetch users on app load with useEffect.

Create a React context to replace Redux for state management using useReducer, build a provider, and wire it into the app to share values across components.

Explore the useReducer hook to manage state with a reducer, dispatch actions, and handle async data fetching for users, using a context provider and a Redux-like pattern.

Build a daily news app that loads posts from a local json server on demand with async loading and masonry, plus newsletter signup and a contact form.

Create routes in a React course, set up a routes file, build home and contact components, configure React Router with BrowserRouter, and apply Bootstrap styling.

learn to configure a redux store with posts and users reducers, create thunks for async actions, wire react-redux provider, and scaffold a header for navigation.

Fetch home posts with a new home posts component, wiring a Redux thunk to request paginated data from the local json-server using Axios, then append six posts on load more.

Fetch the initial six posts and then load more with a thunk that uses get state to merge new data into existing items and manage pages.

Learn to implement responsive masonry cards with the React Masonry library, displaying posts with images, titles, excerpts, read more links, and a loading spinner while data loads.

Set up a posts route and post item component, register a dynamic id route, fetch the post by id with a thunk, and format the date using moment.js.

Fetch a post by id with Redux thunk, useEffect, and useParams, then render title, image background, author, date, and content via dangerously set inner HTML; cleanup clears post by id.

Implement a useEffect cleanup that dispatches clear post by ID on unmount to reset post by ID to an empty object via the posts slice.

Create a React contact form with Formik and Yup, using React Bootstrap alerts and toasts, and dispatch the new contact to the server on submit.

Validate a contact form with yup in a React workflow, defining a schema for email, first name, last name, and message; enforce required fields and a 500-character limit.

Submit contact explains building a thunk to post contact data to a json server, dispatching actions with unwrap, handling errors, and showing toasts for success or failure.

Master building a reusable newsletter form in a React, Next.js, and Express app, including a simple input, toast feedback, basic validation, and Redux dispatch to post emails to the database.

Finish the app by implementing a redux async thunk to post newsletter signups via axios to a json-server, handle success and failure with toasts, and clear state after each attempt.

Explore how Next.js extends React to build SEO friendly, server-rendered pages with a file-based routing system, pre-rendering, and built-in caching, enabling full-stack apps with API and authentication.

Create a Next.js app with npx create-next-app, opt into the latest, explore source routes and the app router, then run the dev server on localhost 3000.

Learn how Next.js uses a file-system routing model with the app router as the current standard, contrasting it with the pages router and directory-based routes like /users and /users/profile.

Learn how to create static routes in Next.js by building pages with page.js, structuring directories for home and contact, and exploring nested routes for simple, fast routing.

Explore nested routes in a react and next.js project by using directories, trees, and subtrees, creating users and profile pages with page.js to establish root routes.

Learn how to implement dynamic routes in Next.js by creating folders with square bracket names to capture id and name params from the URL, using page.js to render them.

Access dynamic route values with props.params to get the id and name, then use search params for queries. Await the promise in an async function, noting server routes.

Discover catch-all routes with app routing and slug parameters, using cars/[...slug] and optional [[...slug]]; decide between single-page slug handling and nested routes.

Discover how the root layout wraps the entire app, provides html and body, and configures metadata and google fonts via next font, with nested layout.js routes cascading across pages.

Learn linking and navigation in Next.js by using the next/link component with hrefs to build a seamless single-page app, including params, useRouter, and client versus server components and redirects.

Create a standard react component in a dedicated components folder, export it, and import it into a page using next/link, enabling reusable navigation in a Next.js app.

Explore styling in Next.js by creating a styles directory with a global.css imported in the root layout and using CSS modules for page-specific styles via imports.

Explore parallel routes in Next.js by building a dashboard with analytics and posts, using an @ prefix to render multiple pages within a shared dashboard layout.

Explore route groups and root groups in Next.js to organize guitars, brands, and models with layouts and direct routes, then learn rendering and pre rendering strategies.