The React Mega-Tutorial

Explore the JavaScript language and its most recent features in chapter one of the React Mega-Tutorial.

Explore es5 vs es6 in JavaScript, and how transpiling enables modern features to run in older browsers; learn why tools like React rely on transpiling to maintain compatibility.

Explore modern JavaScript features used in this course, including semicolons, trailing commas, imports/exports, let/const, arrow functions, promises, async/await, spread, destructuring, and jsx.

Continue with chapter two of the React Mega-Tutorial by creating a brand new React application.

Install Node.js from nodejs.org for your operating system, then verify the installation by running node -v in a terminal.

Create a starter React project with the Create React Up tool via the NPCs command, then run npm start to launch and live-reload as you edit source and public directories.

Install dependencies with npm install (bootstrap, react-bootstrap, react-router-dom, serve) and run npm start in a separate terminal to auto-update during development.

Examine the React project structure from the public index.html and the root div, through index.js bootstrapping, and wire bootstrap CSS while cleaning unused files and preparing for npm start errors.

Fix a broken react app by replacing the top-level app component with a simple function. Render the Micro.blog title in an h1 and export as default.

Learn to render dynamic blog posts in React using a made-up post, placeholders, fragments, and map, assign keys for lists, and implement simple and ternary conditionals.

Build a reusable hierarchy of components and leverage third-party libraries to craft a practical user interface in chapter three of the React mega-tutorial.

Explore popular React UI component libraries and learn to build great looking user interfaces. Select React Bootstrap for its simplicity and guide learners through getting started and the available components.

Enhance the app layout by wrapping content in a React Bootstrap container to add margins and responsive sizing, using both plane and fluid container variants within the grid system.

Create and integrate a header component using react bootstrap's nav bar, import it into the app, and adjust containers and borders for a cleaner layout.

Add a reusable sidebar component with navigation links beside blog posts, using a horizontal stack from React Bootstrap, and plan for client-side routing.

Learn to refactor a React app by extracting blog post rendering into a new Posts component, moving rendering to a subcomponent, and simplifying the top-level app.

Demonstrates a flexible body component that uses props to toggle a sidebar and renders page content via children, enabling a reusable layout for multiple React pages.

Explore chapter four of the React Mega-Tutorial. Learn how to implement client-side routes for your React application.

Create and organize feed, explore, and login pages in a pages directory, and implement client-side navigation with react-router-dom, including routes and a catch-all redirect.

Replace sidebar links with NavLink from react-router-dom to enable client-side routing, highlighting the active page without reloading, and integrate bootstrap styling for a cohesive active state.

Explore dynamic URLs in React Router by using /user/:username, extracting the username with the useParams hook, and mapping the route to a user page.

Launch the backend and connect it to our React application in chapter five of the React Mega-Tutorial.

Learn how to install and run the Micro.blog API backend using Docker, Python, or Heroku, configure an email server with SendGrid, disable auth, seed data, and run locally at localhost:5000.

Learn how to fetch backend posts with a background task, manage loading state with a React state variable using useState, and render a spinner until data arrives.

Configure the base api url in a dot env file and implement a useEffect side effect to fetch the blog feed, handling loading and errors.

Refactor a blog post render into its own post component, passing the post prop, and use React Bootstrap stack for a horizontal avatar, timestamp, and author link.

Build a time ago component that converts ISO date timestamps into informal strings using the browser’s relative time format and auto refresh with a React effect and interval.

Generalize back end access so any component in the application can use it across the React mega-tutorial project.

Create a reusable api client class to consolidate base calls and token authentication, extending api usage across pages and all components.

build a default exported micro.blog api client class with a base url, a universal fetch-based request supporting get, post, put, delete, json headers, error handling, and query strings.

Share a single API client instance across components using a React context and a use API hook. Implement an API provider to expose the shared client throughout the app.

Learn to fetch and render a user profile via API access and contexts, handle loading and errors, and display avatar, username, about me, and last seen with time ago component.

Learn how to make the posts component reusable by adding a content prop to switch API requests between the feed, all posts, and a user's posts, reducing code duplication.

implement pagination for blog posts with a more button that loads the next page. use after timestamps and a pagination object to determine when to fetch more and append posts.

Learn how to work with forms in the React Mega-Tutorial, chapter seven, and implement field validation to ensure input accuracy and user feedback.

Learn to build forms with React Bootstrap by using form, form group, label, form control, form text, and button components as the building blocks of a practical web form.

Create a reusable input field component for forms using react bootstrap, with configurable name, label (optional), type (default text), placeholder, and error message, plus a field ref.

Implement a login form using a reusable input field, configure username and password fields, add a primary submit button, and manage validation errors with React state.

Explore controlled and uncontrolled components in React, detailing event handlers, state mirroring, and DOM access. Use uncontrolled components to reduce boilerplate in forms.

Master uncontrolled form inputs in React by creating refs for username and password, reading values from the DOM, and auto focusing the first field with a useEffect side effect.

Implement client-side validation for the login form by checking that username and password are not empty, creating an error object, updating state to display errors, and halting submission when needed.

Create a registration form and route using React Router DOM, wire inputs for username, email, and password with two password fields, validation, errors, and focus management to enable account creation.

Implement registration form submission with client-side password match validation and server-side error handling from the /api/users endpoint, then navigate to the login page after success.

Implement a reusable flash message system in a React app using a flash context, bootstrap alerts, and a collapsible, dismissible alert that auto-hides after a configurable duration.

Implement the user authentication features in chapter eight of the React Mega-Tutorial for the application.

Enable back end authentication for the Micro.blog API by setting the config from disabled to false, then restart Docker, Python, or Heroku deployments and verify by an authentication error.

Demonstrate login via the tokens endpoint to obtain an access token stored in local storage and used in API requests with a bearer header.

Create a user context and provider with a useUser hook to share the logged-in user, support updates, and handle login, logout, and startup preload via /me.

Wrap pages in a private root to redirect unauthenticated users to login and return them to their original URL after authentication, using a user context and next URL tracking.

Implement a public route wrapper using the use user hook to render children only when not authenticated, redirecting authenticated users to the main page, alongside a private route component.

Wrap the router with a single private root and a public root, reorganizing routes to reduce boilerplate and secure login and register pages.

Wire the login form to the user context to authenticate, save the access token in local storage, show danger flash on error, and redirect to feed page or private URL.

Build a header dropdown for the logged-in user with profile and logout options, using React Bootstrap NavDropdown and user context, showing a gravatar avatar and a loading spinner.

Implement automatic, transparent access token refresh in the React API client, using a refresh token cookie and retrying the original request on 401 for 15 minutes.

Chapter nine of the React Mega-Tutorial adds a variety of features to the application to solidify the React concepts you have learned so far.

Add a top post form to the feed page and toggle it with the right prop, submit posts via the Micro.blog API, and update the feed with the new post.

Explore user page actions in the React Mega-Tutorial: edit your own profile, follow or unfollow others, with state handling, API calls, and in-page forms.

Add a change password option in the user menu with a private /password page. Submit old and new passwords via the /me API, handle success with message, and manage errors.

Add a two-part password reset flow to the app: request a reset email, then set a new password via a link containing a token, with routes /set_request and /reset.