seo

lessons/01-welcome/A-intro.md

@@ -1,3 +1,20 @@
+---
+description: >-
+  Discover the Complete Intro to React, version 9, a comprehensive course
+  designed by Brian Holt to take you from beginner to job-ready in React
+  development. Learn essential React concepts, tools like Vite, JSX, and
+  ecosystem integration at your own pace, with guidance on using GitHub for
+  collaborative learning and support. Ideal for anyone looking to enhance their
+  React skills, this course offers practical, real-world experience from a
+  seasoned developer.
+keywords:
+  - React course
+  - React tutorial
+  - learn React
+  - Brian Holt
+  - React development
+  - React tools
+---
 > 🚨 You do not need to watch/read previous versions of this course. This is just the ninth revision of the course.
 
 Hello! And welcome to the Complete Intro to React, version 9. In this course you will go from not knowing anything about React to being job ready. This course teaches all the core concepts of React aiming to be the most useful. You will learn React from a first-principles methodology – we will start with no build tools or anything like that, just vanilla JavaScript and React. Over time we add tools like Vite, JSX, ESLint, Prettier, etc. so you can learn how to construct your own stack from scratch. I will teach a few ecosystem tools as well, testing, and what's coming soon for React.

lessons/01-welcome/B-my-setup.md

@@ -1,3 +1,17 @@
+---
+description: >-
+  Learn how to set up your development environment for a Node.js course using
+  tools like Visual Studio Code, Firefox, and zsh with helpful extensions and
+  themes like Dracula and Starship Prompt. This guide recommends using Node.js
+  version 20.6 or later and offers insights into managing versions with fnm,
+  while also sharing tips on fonts and terminal settings.
+keywords:
+  - Node.js
+  - Visual Studio Code
+  - Firefox
+  - zsh
+  - Starship Prompt
+---
 ## Node.js
 
 You'll need to have a Node.js version installed, and preferably something after v20.6. I wrote this course with 20.16 but it should be fairly future-proof.

lessons/02-no-frills-react/A-react-without-a-build-step.md

@@ -1,5 +1,15 @@
 ---
-description: "Brian teaches React without any frills: just you, some JavaScript, and the browser. No build step."
+description: >-
+  Learn how to build a simple React app from scratch without using JSX, Babel,
+  or Webpack. This step-by-step guide demonstrates creating a pizza ordering
+  system using pure JavaScript, React, and ReactDOM. Discover how to structure
+  your project with a focus on function components and rendering techniques.
+keywords:
+  - React
+  - JavaScript
+  - ReactDOM
+  - function components
+  - Web development
 ---
 
 Let's start by writing pure React. No compile step. No JSX. No Babel. No Webpack or Vite. Just some JavaScript on a page.

lessons/02-no-frills-react/B-components.md

@@ -1,3 +1,16 @@
+---
+description: >-
+  Learn best practices for React component creation by separating script tags,
+  utilizing props, and creating reusable components like a dynamic Pizza
+  component. Enhance your React app development skills with practical examples
+  and avoid common warnings related to component keys.
+keywords:
+  - React components
+  - props
+  - dynamic components
+  - best practices
+  - reusable components
+---
 Now that we've done that, let's separate this out from a script tag on the DOM to its own script file (best practice.) Make a new file in your `src` directory called `App.js` and cut and paste your code into it.
 
 Modify your code so it looks like:

lessons/03-tools/A-npm.md

@@ -1,5 +1,19 @@
 ---
-title: "npm"
+title: npm
+description: >-
+  Discover the essentials of npm, the package manager for Node.js, including how
+  it facilitates the integration of open source modules into your projects and
+  the setup process with 'npm init'. Explore alternatives like pnpm, which
+  offers a different approach to organizing node_modules. Learn the key
+  differences between npm and pnpm to choose the best option for your
+  development needs.
+keywords:
+  - npm
+  - Node.js package manager
+  - pnpm
+  - npm install
+  - package.json
+  - node_modules
 ---
 
 npm does not stand for Node.js Package Manager. It is, however, the package manager for Node.js. (They don't say what it stands for.) It also has all the packages in the front end scene. npm makes a command line tool, called `npm` as well. `npm` allows you to bring in code from the npm registry which is a bunch of open source modules that people have written so you can use them in your project. Whenever you run `npm install react` (don't do this yet), it will install the latest version of React from the registry.

lessons/03-tools/B-code-formatting.md

@@ -1,3 +1,17 @@
+---
+description: >-
+  Discover how ESLint and Prettier simplify code quality maintenance, helping
+  developers focus on architecture instead of syntax. Learn about integrating
+  Prettier in your workflow, setting configurations in Visual Studio Code, and
+  using npm scripts for effortless code formatting.
+keywords:
+  - Prettier
+  - ESLint
+  - code quality
+  - code formatting
+  - npm scripts
+  - Visual Studio Code
+---
 It's important to keep quality high when writing code. Or at least that's how I sell ESLint and Prettier to my co-workers. In reality I'm super lazy and want the machine to do as much work as possible so I can focus more on architecture and problem-solving and less on syntax and style. While there are many tools that can help you keep code quality high, these two I consider core to my workflow.
 
 [Prettier][prettier] is an amazing tool from the brain of [James Long][jlongster]. James, like many of us, was sick of having to constantly worry about the style of his code: where to stick indents, how many, when to break lines, etc etc. Coming from languages like Go, Reason, or Elm where all that is just taken care of by the tooling for the language, this quickly wears. James did something about it and made a tool to take care of it: Prettier.

lessons/03-tools/C-linting.md

@@ -1,5 +1,17 @@
 ---
-title: "ESLint"
+title: ESLint
+description: >-
+  Learn how to set up ESLint with Prettier in your JavaScript project to enforce
+  coding standards and automate code formatting. This guide includes
+  installation instructions, configuration tips, and highlights on transitioning
+  to ESLint's latest configuration format. It also touches on new tools like
+  Biome and Oxlint for improved performance.
+keywords:
+  - ESLint setup
+  - Prettier integration
+  - JavaScript linting
+  - coding standards
+  - Biome Oxlint
 ---
 
 On top of Prettier which takes of all the formatting, you may want to enforce some code styles which pertain more to usage: for example you may want to force people to never use `with` which is valid JS but ill advised to use. [ESLint][eslint] comes into play here. It will lint for this problems.

lessons/03-tools/D-git.md

@@ -1,5 +1,15 @@
 ---
-description: "Git is a critical part of any JS project and Brian makes sure you have it set up."
+description: >-
+  Learn the essentials of initializing and setting up a project with Git,
+  including creating a .gitignore file to exclude unnecessary files from your
+  repository. Utilize resources like ThePrimeagen's course on Frontend Masters
+  for comprehensive Git knowledge.
+keywords:
+  - Git
+  - git init
+  - .gitignore
+  - Git tutorial
+  - Frontend Masters
 ---
 
 Git is a critical part of any project and probably something many of you are already familiar with. If you haven't, be sure to initialize your project as a git repo with `git init` in the root of your project (VSCode and any other number of tools can do this as well.)

lessons/03-tools/E-vite.md

@@ -1,3 +1,18 @@
+---
+description: >-
+  Learn how to use Vite, a fast build tool preferred by the React community, for
+  efficient development by integrating external libraries and optimizing code.
+  This guide covers installation, configuration, and setting up Vite for React
+  projects, presenting it as a modern alternative to tools like Parcel and
+  Webpack.
+keywords:
+  - Vite
+  - React
+  - build tool
+  - JavaScript
+  - frontend development
+  - code optimization
+---
 The build tool we are going to be using today is called [Vite][vite]. Vite (pronounced "veet", meaning quick in French) is a tool put out by the Vue team that ultimately ends up wrapping [Rollup][rollup] which does the actual bundling. The end result is a tool that is both easy to use and produces a great end result.
 
 > Fun fact: there's a new project being developed called [Rolldown][rolldown] which is written in Rust and aims to replace Rollup.

lessons/04-core-react-concepts/A-jsx.md

@@ -1,6 +1,14 @@
 ---
-title: "JSX"
-description: "JSX is an essential part of writing React. Brian teaches you to leverage your newfound React knowledge and make it much easier to read with JSX"
+description: >-
+  Learn how JSX simplifies React development by translating HTML-like syntax
+  into React.createElement calls, and explore the integration of JSX with ESLint
+  rules and a Fastify API for enhanced code readability and functionality.
+keywords:
+  - React
+  - JSX
+  - ESLint
+  - Fastify
+  - frontend
 ---
 
 So far we've been writing React without JSX, something that I don't know anyone that actually does with their apps. _Everyone_ uses JSX. I show you this way so what JSX is actually doing is demystified to you. It doesn't do hardly anything. It just makes your code a bit more readable.

lessons/04-core-react-concepts/B-hooks.md

@@ -1,5 +1,15 @@
 ---
-description: "React manages view state through a mechanism called hooks. Brian teaches you how to use them as you build components."
+description: >-
+  Learn how to create a pizza order form using React with interactive elements
+  like dropdowns and radio buttons controlled by hooks for managing state,
+  offering insights into controlled and uncontrolled forms.
+keywords:
+  - React hooks
+  - pizza order form
+  - controlled form
+  - uncontrolled form
+  - useState
+  - React input handling
 ---
 
 Okay, so now we want to make it so people can add pizzas to their order. We need a little form that allows them to select the pizza and the size. Create a new file called Order.jsx and add the following:

lessons/04-core-react-concepts/C-effects.md

@@ -1,5 +1,15 @@
 ---
-description: "useEffect is a critical hook for React, allowing developers to do asynchronous actions like making HTTP requests"
+description: >-
+  Learn how to implement API requests in a React app using the `useEffect` hook
+  to fetch initial data, such as a list of pizzas, and manage state with hooks
+  like `useState`. This guide focuses on component lifecycles, data
+  dependencies, and optimal rendering practices to improve app performance.
+keywords:
+  - React
+  - useEffect
+  - API requests
+  - React hooks
+  - state management
 ---
 
 We have enough of an app to start making some API requests now. We want the app to request an initial set of pets on initial load of the page. So let's make that happen using a special hook called `useEffect`. `useEffect` allows you to say do a render of this component first so the user can see _something_ then as soon as the render is done, _then_ do something (the something here being an effect). In our case, we want the user to see our UI first then we want to make a request to the API so we can initialize a list of pizzas.

lessons/04-core-react-concepts/D-dev-tools.md

@@ -1,5 +1,17 @@
 ---
-description: "An essential tool in any React developer's toolbox is the official React Dev Tools extension. Brian shows you how to install and use them."
+description: >-
+  Discover essential React developer tools including NODE_ENV for optimizing
+  development and production builds, utilizing Strict Mode for enhanced code
+  warnings, and harnessing React Dev Tools for efficient debugging and
+  performance optimization.
+keywords:
+  - React developer tools
+  - NODE_ENV
+  - Strict Mode
+  - React Dev Tools
+  - React debugging
+  - Vite.js
+  - React performance
 ---
 
 React has some really great tools to enhance your developer experience. We'll go over a few of them here.

lessons/04-core-react-concepts/E-custom-hooks.md

@@ -1,3 +1,16 @@
+---
+description: >-
+  Learn how to create custom React hooks for composability, focusing on a
+  practical example of building a "Pizza of the Day" feature using the
+  usePizzaOfTheDay custom hook to efficiently handle API requests and data
+  separation in components.
+keywords:
+  - React hooks
+  - custom hooks
+  - Pizza of the Day
+  - API requests
+  - component logic
+---
 One thing that's pretty special about hooks is their composability. You can use hooks to make other hooks! People tend to call these custom hooks. There are even people who go as far to say "never make an API request in a component, always do it in a hook." I don't know if I'm as hardcore as that but I see the logic in it. If you make a custom hook for those sorts of things they become individually testable and do a good job to separate your display of data and your logic to acquire data. I'm more in the camp of make custom hooks for either complicated logic or reusable logic, but for simple cases it's okay to keep things simple.
 
 Okay, so we want to add a "Pizza of the Day" banner at the bottom of our page. This necessitates calling a special API to get the pizza of the day (which should change every day based on your computer's time.) Let's first write the component that's going to use it.

lessons/04-core-react-concepts/F-handling-user-inputs.md

@@ -1,3 +1,16 @@
+---
+description: >-
+  Learn how to manage a user’s shopping cart and handle order submission by
+  modifying an Order component in React. This tutorial guides you through
+  importing necessary hooks, formatting prices, and creating a Cart display to
+  facilitate seamless checkout functionality.
+keywords:
+  - React hooks
+  - shopping cart
+  - order submission
+  - Cart component
+  - checkout process
+---
 So now we want to be able to handle the user's cart and submitting our order. Let's go add what we need to Order.jsx
 
 ```javascript

lessons/04-core-react-concepts/G-context.md

@@ -1,3 +1,16 @@
+---
+description: >-
+  Learn how to create a dynamic cart indicator in React using context for state
+  management, avoiding prop drilling and simplifying global state handling in a
+  React application. Understand the implementation of contexts in React to
+  maintain shopping cart state across different components seamlessly.
+keywords:
+  - React
+  - context
+  - cart indicator
+  - state management
+  - prop drilling
+---
 Let's make a cart indicator on the top right of the page. Create a file called Header.jsx and put this in there.
 
 ```javascript

lessons/05-ecosystem/A-tanstack-router.md

@@ -1,5 +1,17 @@
 ---
-title: "TanStack Router"
+title: TanStack Router
+description: >-
+  Learn how to implement TanStack Router for client-side routing in your React
+  app, offering an alternative to React Router with a focus on lazy loading and
+  file-based conventions for efficient navigation management. Understand the
+  benefits of using TanStack's Router-DevTools and how to maintain state across
+  pages using Context API.
+keywords:
+  - TanStack Router
+  - React routing
+  - client-side routing
+  - React Router alternative
+  - lazy loading
 ---
 
 So now we have arrived to the point where we want multiple pages in our app. We need some sort of router tool to accomplish that. We _could_ just work with the browser's history API to do it but there so many ways to get it wrong, plus we are spoiled for choice when it comes to great React routing libraries.

lessons/05-ecosystem/B-tanstack-query.md

@@ -1,5 +1,18 @@
 ---
-title: "TanStack Query"
+title: TanStack Query
+description: >-
+  Learn how to create a past orders page using React and TanStack Query for
+  efficient API interaction, enhancing your developer experience with cleaner,
+  bug-free code. This guide covers installing React Query, setting up ESLint
+  configurations, and utilizing hooks for paginated data fetching and caching.
+  Discover how TanStack Query simplifies asynchronous API calls while improving
+  application performance and readability.
+keywords:
+  - React Query
+  - TanStack
+  - API calls
+  - ESLint
+  - data fetching
 ---
 
 Let's make make a past orders page. Create a new file, `past.lazy.jsx`. If your Vite server is already running, it will automatically stub it out for you! Pretty cool developer experience from TanStack.

lessons/06-advanced-react/A-portals.md

@@ -1,3 +1,17 @@
+---
+description: >-
+  Learn how to implement a React portal to render modals outside your main app
+  DOM, using a step-by-step guide with detailed code examples. Discover how to
+  use createPortal, useRef, and React Query for managing state and data
+  fetching. Ideal for developers looking to enhance user interfaces with dynamic
+  modals and contextual displays.
+keywords:
+  - React portal
+  - modal rendering
+  - createPortal
+  - useRef
+  - React Query
+---
 What if you are rendering a page and you want to render something in another part of the page at the same time? Think like you have a contextual right navigation and you have a page that wants to render into the contextual nav. We could use something like context to do that and that would be totally acceptable. But there's another cool way called a portal to do this as well. It even lets us render outside our app totally, like we're about to do.
 
 We're going to do a modal or a "popover". I think these are bad user experiences but it's a perfect use case for a portal so we're going to do it! In our case, because we want the modal to render in front of everything, we need the div that the modal renders into to be first in the DOM. So let's go make a div that does that. Open your index.html file and put this in there.

lessons/06-advanced-react/B-error-boundaries.md

@@ -1,3 +1,17 @@
+---
+description: >-
+  Learn how to effectively handle errors in React using Error Boundaries with
+  class components, which are crucial for catching API errors and 404s when you
+  cannot use hooks. Discover best practices and how to implement error
+  boundaries to improve your React application's resilience against malformed
+  data.
+keywords:
+  - React Error Boundaries
+  - API errors
+  - React class components
+  - componentDidCatch
+  - React Error Handling
+---
 Frequently there's errors with APIs with malformatted or otherwise weird data. Let's be defensive about this because we still want to use this API but we can't control when we get errors. We're going to use a feature called `componentDidCatch` to handle this. This is something you can't do with hooks so if you needed this sort of functionality you'd have to use a class component.
 
 This will also catch 404s on our API if someone give it an invalid ID!

lessons/06-advanced-react/C-uncontrolled-forms.md

@@ -1,3 +1,17 @@
+---
+description: >-
+  Learn how to create a contact page using React with TanStack Query for
+  handling form submissions, using uncontrolled forms for state management, and
+  setting up API mutations for processing contact information. This tutorial
+  simplifies implementing post requests and showcases the process through a
+  practical example.
+keywords:
+  - React
+  - TanStack Query
+  - uncontrolled forms
+  - contact page
+  - API mutations
+---
 We are now going to do a contact page for our site. As part of that, we will accept a name, email, and message from our users and submit it our backend. Like all good backends, ours will log it to the console and then ignore it.
 
 We are going to see two new concepts here: how to do a post with TanStack Query (which they call a mutation) and how to do uncontrolled forms with React. Let's start with our API query. In src/api, create a file called postContact.js and put this in there.

lessons/07-testing/A-vitest.md

@@ -1,5 +1,16 @@
 ---
-description: ""
+description: >-
+  Discover how to set up and use Vitest for testing React applications, offering
+  a seamless testing environment that mimics your app's build pipeline. This
+  guide provides a step-by-step introduction to configure Vitest and explores
+  its benefits over traditional tools like Jest for creating efficient React
+  test setups.
+keywords:
+  - React testing
+  - Vitest setup
+  - React test configuration
+  - Vitest vs Jest
+  - React testing library
 ---
 
 This is meant to be a very brief treatise on how to do testing on React applications. This will be a brief intro on how to set up Vitest tests for the application we just created.