Modern React From The Beginning

Review essential JavaScript ideas used in React development, such as arrow functions, template literals, destructuring, spread/rest operators, array methods, optional chaining, promises, and immutability for reliable rendering.

Explore arrow functions in JavaScript for React, learn concise syntax, implicit return, using them as callbacks (e.g., map), and understand this binding versus regular functions.

Master template literals in JavaScript to build strings with backticks and ${} interpolation, replacing tedious concatenation and including dynamic values, expressions, and date formatting with arrow functions.

Explore conditional rendering in React using the ternary operator and short circuit evaluation, with practical examples like pinned notes and welcome messages.

Explore destructuring arrays and objects, rename properties, and apply the rest operator to gather remaining values, with practical examples from notes, user data, and react component props.

Master array methods in JavaScript for React development by learning map, filter, reduce, and foreach, plus optional chaining and nullish coalescing.

Master optional chaining and the nullish coalescing operator in JavaScript to safely access nested properties and provide default values without errors.

Master immutability in JavaScript and React, avoiding direct state mutations to ensure rerendering. Use the spread operator to copy arrays and objects immutably for reliable updates.

Master promises and async/await in JavaScript, covering pending, fulfilled, and rejected states. Learn practical fetch patterns with JSON placeholder API and error handling with then, catch, and try-catch.

Explore the fundamentals of React—components, props, and state—through a small rating feedback user interface. Learn setup options from CDN to vite, JSX, conditional rendering, and useState for dynamic user interface.

Explore multiple ways to boot a React app, from a browser CDN example to production tools like vite and Next.js, and learn the under-the-hood use of React createElement vs JSX.

Learn jsx (javascript xml) to write html inside javascript, compile with babel, and render dynamic content with variables, ternaries, and short-circuit expressions while respecting single parent elements and fragments.

Learn to create a scalable react app with vite, starting a small rating ui project, and understand vite's fast development server and production build using rollup.

Create reusable React components, embed them in apps, and organize them in separate files like rating.jsx, exporting and importing default components for reuse.

Explore styling options for react components, from inline styles to css modules. Learn how to add a favicon by placing favicon.ico in the public folder and updating index.html.

Render lists in React with map to output items like stars. Use a unique key for each item and generate stars dynamically with Array.from based on a chosen length.

Explore event handling in React from the basics, including onClick in JSX, passing arguments with arrow functions, and mouse enter/leave events to log interactions with star ratings.

Explore how state in React tracks data that changes over time, from component state to global state, and how the useState hook manages this data to trigger UI rerenders.

Build a rating component with rating and hover state using useState, updating on click and hover to rerender the UI.

Explore the useState hook by building a single-file counter component, initialize state (possibly with a function), and update it with a setter that can use the previous state.

Learn conditional rendering and dynamic styling in a rating component by applying an active class for hover and rating states, and implement feedback messages with short-circuit rendering and props.

Explore how props pass data from a parent to a child component, like HTML attributes, and use destructuring, defaults, and color and feedback props to build a dynamic rating UI.

Learn how to compose a modal as a separate, stateless component, using isOpen and onClose props with a rating state, showcasing unidirectional data flow where the parent manages state.

Learn to pass data using the children prop and build a reusable button that forwards className, disabled, and onClick to the native button; then preview forms and controlled components.

Learn to build a React notes app with controlled form inputs, state management, validation, and local storage, using Tailwind CSS for styling and exploring prop drilling and lifting up state.

Build a notes app using React fundamentals, add forms and controlled inputs, and style with Tailwind v4 while setting up Vite, installing dependencies, and configuring Tailwind and Veet plugin.

Learn to implement controlled inputs in React by binding inputs, selects, and textareas to state with useState, updating via onChange to reflect current values in real time.

Manage multiple form fields with a single form data object in React using a dynamic handleChange, name-based updates, and spread syntax to immutably map input names to properties.

Build a note list from the notes state, rendering each note's title, category, priority, and description. Add a collapsible form for a cleaner user interface.

Learn to make a collapsible note form in React app using isFormVisible state and a toggle button with conditional rendering. This illustrates wrapping elements and planning for reusable input components.

Create custom reusable input components for text, select, and text area to streamline forms. Pass dynamic props like label, name, value, on change, and options to render these inputs across forms.

Delete notes by removing them from state in a React app. Use a delete button that filters notes by id in app.jsx, with an optional confirm prompt.

practice a conditional rendering challenge in React by coloring a note's left border based on priority with inline styles using a double ternary for high, medium, and low.

Examine prop drilling, refactor into a dedicated note component, and consider using the context API or Redux for deeper component trees. Introduce local storage with useEffect and review component lifecycle.

Explore the React component life cycle, including mounting, updating, and unmounting, and learn to use the use effect hook for side effects like data fetching and local storage.

Explore the React component lifecycle, from mount to update and unmount, compare class lifecycle methods with useEffect, and learn how to manage data fetching and avoid unnecessary rerenders.

Convert a class lifecycle logger to a functional component using useState and useEffect, mastering mount, update, and unmount via dependency arrays and cleanup.

Explore the useRef hook to reference dom elements, access values, and persist data across renders without triggering rerenders, including uncontrolled components, a form with uncontrolled inputs, and a timer app.

Explore use ref in React, compare it to use state, and build a timer project using a mutable value and DOM access without triggering rerender, including controlled vs uncontrolled inputs.

Learn how useRef lets you access dom methods via inputRef.current, similar to vanilla JavaScript, enabling focus, blur, and reading value for uncontrolled inputs.

Explore component composition by refactoring a timer into dedicated timer, timer display, and timer controls components, with props and event handlers enabling clean, reusable React architecture.

Enable auto focus on the start button using useRef and useEffect to focus on mount, enabling start, pause, and keyboard navigation.

Persist the timer state by saving the time to local storage, initialize from local storage, and update it on time change so refresh keeps the timer where it left off.

build a responsive crypto dashboard by fetching data from the CoinGecko API, showing coins with name, symbol, price, market cap, and logo, with filters, sorting, and react router.

Fetch coin data from the CoinGecko API in a React app using useEffect and useState, handling loading and errors while retrieving a coins array with price in USD.

Refactor data fetching in useEffect to async/await with an inner fetchCoins function and try/catch for coins. Throw an error on non-ok responses, await res.json, and use finally to set loading.

Display coin data in a responsive grid with coin cards showing image, name, symbol, price, 24h change, and market cap, while handling loading and error states.

Learn to configure environment variables in a Vite React project with dot env files and access via import.meta.env, while noting frontend exposure and server-side alternatives.

Learn to build a real-time coin search in React by typing a filter input that matches coin names or symbols case-insensitively, with no-match messaging.

Develop a sort order selector in the app, enabling market cap, price, and 24 hour change sorting with high-to-low and low-to-high options, while ensuring immutability by copying the array.

Explore how client-side routing maps urls to components in single-page apps, enabling navigation without page reloads. Compare options like React Router v7, TanStack Router, and Next.js file-based routing.

Set up React Router using the BrowserRouter to create routes with path and element props, including home, about, contact, and dynamic post routes, while keeping app state and passing props.

Learn to implement routing with React Router in declarative mode, create home, about, and not found pages, and pass state via props while wrapping the app in BrowserRouter.

Create an about page and header with internal links, wire up routes in app.js, and swap anchor tags for the React Router Link component to enable instant client-side navigation.

Learn to build a 404 not found page in React by creating a NotFoundPage component with inline styles and a catch-all route that links back home.

Create a dynamic coin details page using useParams, fetch data from the CoinGecko API via an environment variable, and link the coin card to /coin/{id}.

Fetches and displays coin details with rank, price, market cap, highs and lows, and supply. Includes images, description, links to home and explorer, and a spinner for loading.

Replace loading text with a reusable bar spinner from the react-spinners package, customize color and size, add a CSS override for centering, and integrate it on details and home pages.

Install chart.js and react-chartjs-2, fetch coin market chart data for the last seven days, format it into chart-ready data with timestamps and prices, and render a responsive line chart.

Develop a crypto dashboard by rendering a responsive line chart with react-chartjs, configuring data, time-based x-axis for seven days, and dollar-formatted y values, with loading state handling.

Learn to push a front-end project to production with Vercel by integrating with GitHub, deploying to a provided domain, and building locally.

Create a production build with npm run build to produce a dist folder of static assets and a hashed, cache-friendly bundle loaded as ES modules.

Learn the react context API and use context to manage state, create contexts for products and cart items, fetch data with json server, and persist cart state in local storage.

Explore how the context API resolves prop drilling by sharing global state with createContext, a provider, and the useContext across components.

Set up a React shopping cart ui project with Vite, Tailwind, and initial state in app.jsx, then migrate to the context API, and prepare data assets for a JSON server.

Set up a JSON server to run a mock rest API in development using a db.json file. Perform create, read, update, and delete operations on products and resources; not production-ready.

Fetch product data from a JSON server using React hooks, display it with product list and card components, and learn to use context to avoid prop drilling.

Configure a proxy in the v config file to forward frontend requests to localhost:8000, mapping /api to backend endpoints by rewriting /api and setting change origin to true.

Learn how to replace prop drilling with the context API by creating a product context, providing state with a provider, and accessing it via a custom use products hook.

Create a cart context with an empty array state, expose it via a cart provider and a useCart hook, and wrap the app with the provider.

Create an add to cart button wired to the cart context, updating the state with product quantity using find and map, and display the cart count in the header.

Show the cart item count in the header using the use cart context, and prepare a dropdown to display and remove cart items while planning local storage persistence.

Implement remove from cart and clear cart via the cart context, filtering by item id and updating state; expose actions with use cart and add a clear button in header.

Save cart items to local storage so they persist after refresh by using useEffect in the cart context, updating localStorage with JSON.stringify(cart) on changes and initializing from localStorage with JSON.parse.