React For The Rest Of Us

Install and set up Visual Studio Code for React development, enabling JavaScript React syntax and Prettier formatting with automatic save, and configure workspace and extensions for efficient JSX editing.

Install and verify Node.js to combine the React library with your code and transpile JSX into browser JavaScript. Use VS Code terminal to check node --version and troubleshoot issues.

Set up a complete React workflow with Node and npm, initialize a project with package.json, install react and react-dom, and bundle code with webpack and babel for a development server.

Explore when to use React by itself or with frameworks, from Next.js to Remix, and build a pure React app to become a power user with advanced state ideas.

Begin building a real world react app by converting html templates into modular components (Header, HomeGuest, Footer) and organizing code in a components folder.

Learn front-end routing in a single-page app by building About and Terms pages with react-router-dom, using BrowserRouter, Routes, Route, and Link for shareable URLs.

Explore the React Developer Tools browser extension to inspect your component tree in real time. See how it highlights components and reveals routes like home and about, plus prop debugging.

Learn to create a Visual Studio Code snippet to auto-fill React component boilerplate using rc tab, configure JavaScript React snippets, and test in a project.

Learn to build a reusable React container component that adapts for wide or narrow layouts using props and a ternary, rendering nested content via props.children for flexible pages.

Learn how to manage page titles in a React app using useEffect, and implement a reusable Page component to avoid duplicating code through composition.

Set up a real backend for your React app by provisioning a MongoDB Atlas database, creating the ReactCourse collections (users, posts, follows), and obtaining the connection string.

Set up and run a backend server for a React app by obtaining the backend-api folder, creating a .env, installing dependencies, and launching on localhost:8080.

Start a simple docker-based backend for local development, running a MongoDB and Node API at localhost:8080 via docker-compose, with data stored in a local db folder.

Connects a front end React app with a backend API to submit a registration form via axios post to localhost:8080/register, storing data in MongoDB Atlas using async, await, and try/catch.

Learn to capture username, email, and password in React state with onChange handlers, then submit current values via axios for a form.

Learn to implement login/logout in a React app by extracting a login form into a header component and posting to /login with axios while managing username and password in state.

Learn to swap login and logged-in header components using React state, toggle between HeaderLoggedOut and HeaderLoggedIn with useState and a conditional render, triggered by server data and a sign-out action.

Persist user login state by storing token, username, and avatar in local storage. Initialize login status on page load by reading local storage and clear data on logout.

Learn to render conditional homepage content by switching between a guest registration and a personalized feed using lifted state and props. Prepare for future context-based state management with useReducer.

Build the create post screen in a React app: set up routing, autofocus the title, manage title and body via useState, and submit with axios using a stored token.

This lesson builds a view single post screen in a React route, redirects to a dynamic /post/:id URL using React Router navigate after creation, enabling data fetch and flash messaging.

Learn to add flash messages in a React app by creating a global flash messages component, managing messages with state, and rendering dynamic alerts after post submissions.

Discover how React context enables data to flow through nested components using createContext and a provider. Access and share values like addFlashMessage and setLoggedIn with useContext across the app.

Explore useReducer as a state management alternative to useState for complex state. See dispatch and a reducer handle login, logout, and flash messages in React.

Explore using use reducer with context to dispatch actions from any component, split state and dispatch into separate contexts for performance, and manage login status and flash messages.

Learn how Immer introduces a draft of state to safely mutate in React apps using use-immer and useImmerReducer, simplifying complex state updates like login, logout, and flash messages.

Learn how to centralize localStorage data into app-wide state using useEffect and a reducer, enabling components to access token, username, and avatar from state.

Build a dynamic profile screen in React by creating a profile component, configuring a /profile/:username route, and fetching user data with Axios using useParams and useEffect.

Load a user's posts with a profile posts component that fetches data via axios and useEffect using the username from useParams, then render avatars, titles, and dates with Link.

Turn a fake post view into a real, server-loaded screen by fetching post data, displaying title, body, author, avatar, date, and enabling profile navigation.

Create a reusable animated loader icon component and replace text loading indicators with LoadingDotsIcon in profile and post views, while throttling the connection to slow 3G in browser dev tools.

Learn how to clean up after asynchronous actions in useEffect by canceling Axios requests with a cancel token to avoid updating state on unmounted components.

Render markdown in a React app by installing react-markdown and rendering post.body to produce paragraphs, headings, bold, and lists, with optional allowed elements for client-side security.

Add hover tooltips to edit and delete post icons using the react-tooltip package, importing Tooltip, wiring data-tooltip-content and data-tooltip-id, removing titles, and spacing icons for clarity.

Build an EditPost component and route for editing posts, convert the edit icon to a Link, and pre-populate form fields with existing post data using a reducer-based state.

continue refining the edit post component by adding onChange handlers for title and body, wiring a reducer with dispatch to post updates using useEffect and token-based requests.

Add client-side validation to the edit post form, showing real-time error messages for empty title and body on blur and before submit.

Explore quick attention to detail by adding a back-to-view post link, 404 not found handling, and a dedicated not found component with catch-all routing in the edit post flow.

Conditionally display edit and delete icons for a post when you are the owner, confirm deletion, and perform an axios delete to return to your profile.

Set up a live search overlay in React by creating a search component, toggling it with app-wide state, and closing via a close button or escape key.

Learn to animate the search overlay with React Transition Group and CSS transitions, using 330ms timeout, unmount on exit, and node ref for React 19 to smoothly mount and unmount.

Fetch and display real-time search results as the user types, debouncing for 700 milliseconds, using state, use Immer, and use effect to manage terms, results, and backend requests.

Finishing search (part 1) teaches building a React search with Axios, cancel tokens, and useEffect. Display a loading spinner and live results from /search using searchTerm.

Finish search by rendering counts from state.results.length and mapping posts with author names, closing search on click and showing no results alert when zero, with delay reduced to 750 ms.

learn to implement a follow and unfollow feature in a React profile, manage state with useImmer, handle server requests with Axios, and update follower counts in real time.

Develop profile followers and following tabs with React Router DOM nav link, generating shareable URLs like /profile/{username}/followers and /profile/{username}/following, and create dedicated components to fetch and display each list.

Build a live homepage feed by fetching posts with axios getHomeFeed, manage loading and feed with useImmer, and render posts using a reusable Post component across home, search, and profile.