Let's Build 20 ReactJs Projects

Master the prerequisites for building with React by reviewing HTML, CSS, JavaScript fundamentals, and using MDN resources while setting up Node.js, npm, npx, Git, and a code editor.

Master visual studio code settings for React development, including prettier formatter, format on save, Emmet for JavaScript React, and layout preferences like word wrap and minimap.

Clone or download the react course repository from GitHub, inspect the readme and settings.json, and learn to create a new React app with npx create react app in VSCode.

Explore the default React application structure, including public and src folders, index.html, index.js, ReactDOM, and strict mode; then run and build with npm start and npm run build.

Build a simple counter app with add and subtract buttons and a central display, learning state management and the use of stateless and stateful components.

Build a simple counter app in React that increments and decrements with buttons, while learning project setup, component basics, and styling with flexbox and CSS.

Create a React counter by wiring add and subtract buttons to update a number state with useState. Render the current value and manage onClick events with camelCase handlers.

Build a dynamic list app inspired by a contacts app, creating, rendering, and managing profiles with a remove button that updates the top count.

Rename the apps to 1-counter and 2-list, start the dev server with npm start, and design a responsive list interface showing names and bios in a styled card grid.

Learn to render a dynamic list in React by creating an array of person objects, mapping over it with keys, and displaying each name and bio.

Learn to implement delete functionality in a React app by exporting a data array, importing it, and using useState to filter items by id and remove them.

Build a to-do list app: add items, show a top-right toast on add, edit or delete with alerts, and a clear list confirmation with a final item deleted toast.

Build a to-do list app in React by creating a project, making a components folder, wiring a form and a list, and styling the UI.

Master managing form state with useState, implementing a controlled input, preventing default form submission, and handling submit with onSubmit and onChange, using React Developer Tools for a to do list.

Handle form submission to create a new to-do with a unique id, push it into the items array using the spread operator, and render with props and map.

Implement edit and delete functions for a React to-do list, including toast notifications, editing workflow, and list updates with handleEdit, handleDelete, and handleSubmit.

Add a clear list button and persist items with local storage using useState and useEffect. Update and retrieve with localStorage.setItem and localStorage.getItem, and show a toast when list is cleared.

Commit and push each completed project to GitHub by running git add, git commit, and git push, then verify counter up, list up, and to do list in the repo.

Explore the use state hook in React through a practical project, learning array destructuring, state initialization, and updating the UI with controlled inputs and onChange handlers.

Discover how the useEffect hook runs after renders to run background tasks, fetch data, and update the user interface, with dependency arrays, timers, and cleanup to prevent memory leaks.

Create a custom hook use fetch to fetch data from an api using use state and use effect by passing a url, then render country data with map.

Explore the useRef hook to create DOM references, focus inputs, read element height, and inspect current values, while contrasting defaultValue with controlled input updates.

Learn how to use the useContext hook and context API to share state across components, replace prop drilling with a provider, and manage items with a context-based delete function.

Explore how to use useMemo in React to memoize expensive calculations, cache results, and control rerenders with a dependency array while handling state changes.

Explore the useCallback hook and its difference from useMemo by memoizing a function to prevent extra rerenders while fetching countries from an API, highlighting referential equality and dependency arrays.

Build an interactive business card UI that places name, bio, and socials; hover over the name to show a pointer, click to reveal contacts, and use state-based rendering.

Build a dynamic business card in a React app by creating front and back card components, organizing them under src/components, styling with CSS, and running the app on localhost 3000.

Build a reusable front card component with a fixed max width of 500 pixels, styled headings and social buttons, and a back card with contact details that toggles between views.

Use useState to toggle between front and back cards in a React app, render conditionally, pass setIsShowing as a prop, and enable click handlers for a simple business card.

Build a markdown editor in React that uses the remarkable package to render text from a left text area into a right-side markdown display with headings, links, and images.

Build a markdown editor in a react app, typing on the left with a preview that formats markdown. Install remarkable via npm, set up the project, and start styling interface.

Create a React app structure by building markdown and preview components and wiring them into the app to render markdown with a live preview. Apply CSS reset for clean styling.

Build a two-column markdown editor in a React project with a left text area and a right preview, styled with grid, borders, and focus outlines, updating as you type.

Learn to render markdown in a React app by wiring a controlled textarea to a remarkable instance and safely previewing HTML using dangerouslySetInnerHTML, with headings, code blocks, and links.

Learn to make the markdown editor responsive with CSS grid and media queries, ensuring the preview and text area adapt on mobile and larger screens.

Create a simple personal website UI that displays a name, bio, a phone image, and social media icons linking to the person’s profiles, inspired by a designer portfolio.

Create a personal portfolio website in the seventh project React setup, install dependencies, start locally, and render a name, bio, social icons, and a font.png image.

Update the document title using the useEffect hook and set a dynamic title. Style the page with CSS, including resets, centering, responsive padding, and react-icons integration.