better seo

course.json

@@ -12,7 +12,7 @@
     "twitter": "holtbt",
     "bluesky": "brianholt.me"
   },
-  "description": "Learn how to make amazing web apps with React with Brian Holt as taught for Frontend Masters!",
+  "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": [
     "Brian Holt",
     "React",
@@ -23,7 +23,8 @@
     "web development",
     "javascript",
     "frontend",
-    "front end"
+    "front end",
+    "testing"
   ],
   "csvPath": "./out/lessons.csv"
 }

lessons/01-welcome/A-intro.md

@@ -1,19 +1,17 @@
 ---
 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.
+  Join Brian Holt in "Complete Intro to React, v9," a beginner-friendly course
+  that equips you with essential React skills using a first-principles approach,
+  incorporating tools like Vite and JSX, making you job-ready in the React
+  ecosystem.
 keywords:
-  - React course
-  - React tutorial
-  - learn React
   - Brian Holt
-  - React development
-  - React tools
+  - React
+  - web development
+  - javascript
+  - frontend
+  - Vite
+  - JSX
 ---
 > 🚨 You do not need to watch/read previous versions of this course. This is just the ninth revision of the course.
 

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

@@ -1,15 +1,16 @@
 ---
 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.
+  Explore essential tools and configurations for the "Complete Intro to React
+  v9" course by Brian Holt, including recommended Node.js version, Visual Studio
+  Code setup with extensions, and terminal preferences for optimal React
+  development experience. Learn about the use of tools like fnm for Node.js,
+  Starship Prompt, MonoLisa font, and more within this comprehensive React
+  course.
 keywords:
+  - Brian Holt
+  - React
   - Node.js
   - Visual Studio Code
-  - Firefox
-  - zsh
   - Starship Prompt
 ---
 ## Node.js

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

@@ -1,15 +1,18 @@
 ---
 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.
+  Learn the basics of creating a simple React app without using tools like Babel
+  or Webpack. This tutorial guides you through setting up a project directory,
+  writing pure JavaScript with React, and creating components to build a pizza
+  ordering system. Ideal for beginners, this step-by-step guide by Brian Holt
+  from the Complete Intro to React v9 course helps you understand fundamental
+  React concepts using only essential tools.
 keywords:
   - React
   - JavaScript
-  - ReactDOM
-  - function components
-  - Web development
+  - tutorial
+  - beginner
+  - Brian Holt
+  - 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,15 +1,17 @@
 ---
 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.
+  Learn how to separate React components into distinct files and make reusable,
+  flexible components that accept props, transforming a static app into a
+  dynamic one. This guide provides code examples in creating a React app
+  featuring customizable Pizza components, enhancing React development skills.
+  Discover these strategies in Brian Holt's Complete Intro to React, ideal for
+  budding web developers.
 keywords:
   - React components
-  - props
-  - dynamic components
-  - best practices
+  - JavaScript
+  - web development
   - reusable components
+  - dynamic apps
 ---
 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.
 

lessons/03-tools/A-npm.md

@@ -1,19 +1,17 @@
 ---
 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.
+  Learn about npm and pnpm, two essential package managers for Node.js, as you
+  embark on your React development journey with Brian Holt's Complete Intro to
+  React, v9. This section guides you through setting up npm projects and
+  understanding the differences between npm and pnpm, enhancing your knowledge
+  of JavaScript development tools.
 keywords:
   - npm
-  - Node.js package manager
   - pnpm
-  - npm install
-  - package.json
-  - node_modules
+  - Node.js
+  - React development
+  - JavaScript tools
 ---
 
 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,16 +1,18 @@
 ---
 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.
+  Learn how to maintain high code quality with Prettier by James Long, a
+  powerful tool for consistent code formatting. Discover easy integration
+  methods and how to use Prettier with Visual Studio Code to streamline your
+  development process, as well as setup instructions for npm scripts in this
+  guide from Brian Holt's Complete Intro to React course.
 keywords:
   - Prettier
-  - ESLint
   - code quality
-  - code formatting
-  - npm scripts
+  - ESLint
+  - Brian Holt
+  - React development
   - Visual Studio Code
+  - npm scripts
 ---
 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.
 

lessons/03-tools/C-linting.md

@@ -1,17 +1,16 @@
 ---
 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.
+  Learn how to set up and configure ESLint with Prettier for effective
+  JavaScript code linting in your React projects, featuring tools like ESLint's
+  JS config and globals package, under the guidance of seasoned developer Brian
+  Holt.
 keywords:
-  - ESLint setup
-  - Prettier integration
-  - JavaScript linting
-  - coding standards
-  - Biome Oxlint
+  - ESLint
+  - Prettier
+  - JavaScript
+  - react
+  - Brian Holt
 ---
 
 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,15 +1,16 @@
 ---
 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.
+  Learn how to efficiently set up a Git repository, create a .gitignore file,
+  and manage untracked files in your project as part of the Complete Intro to
+  React v9 course by Brian Holt. Enhance your Git skills with practical tips,
+  ensuring a clean and professional project environment. For more detailed
+  instruction, explore ThePrimeagen's Git course on Frontend Masters.
 keywords:
-  - Git
-  - git init
+  - Git setup
+  - Git repository
   - .gitignore
-  - Git tutorial
-  - Frontend Masters
+  - Front End Masters
+  - frontend development
 ---
 
 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,17 +1,15 @@
 ---
 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.
+  Learn to set up your React project using Vite, a fast build tool preferred by
+  the React community, with step-by-step guidance from Brian Holt. This tutorial
+  covers the installation and configuration of Vite, React, and essential
+  plugins to optimize your development environment.
 keywords:
-  - Vite
   - React
-  - build tool
+  - Vite
+  - Brian Holt
   - 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.
 

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

@@ -1,14 +1,18 @@
 ---
 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.
+  Explore the integration of JSX in React applications with Brian Holt's
+  "Complete Intro to React, v9" course, as it simplifies HTML tags into
+  React.createElement calls, enhancing code readability. Learn about configuring
+  ESLint for JSX, React components, and Vite server setup for a complete React
+  development experience.
 keywords:
   - React
   - JSX
-  - ESLint
-  - Fastify
+  - Brian Holt
   - frontend
+  - JavaScript
+  - web development
+  - Vite
 ---
 
 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,15 +1,17 @@
 ---
 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.
+  Learn how to create an interactive form in React with useState hooks, allowing
+  users to add pizzas to their order in this detailed coding guide from the
+  "Complete Intro to React, v9" course by Brian Holt. Explore concepts like
+  controlled inputs, JSX syntax, event handling, and the importance of state
+  management in React development. Enhance your web development skills with
+  practical React examples and create dynamic applications effectively.
 keywords:
-  - React hooks
-  - pizza order form
-  - controlled form
-  - uncontrolled form
-  - useState
-  - React input handling
+  - React tutorial
+  - useState hooks
+  - controlled inputs
+  - web development
+  - Brian Holt
 ---
 
 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,15 +1,17 @@
 ---
 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.
+  In this section of the Complete Intro to React v9 course by Brian Holt, learn
+  how to use the `useEffect` hook to make API requests for initializing a list
+  of pizzas, manage UI initial load with loading states, and optimize component
+  updates using unique keys for rendering efficiency. Enhance your React
+  projects with best practices for asynchronous data fetching and component
+  optimization.
 keywords:
-  - React
-  - useEffect
+  - React useEffect
   - API requests
-  - React hooks
-  - state management
+  - React loading state
+  - React component optimization
+  - Brian Holt
 ---
 
 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,17 +1,16 @@
 ---
 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.
+  Explore essential React development tools including NODE_ENV, Strict Mode, and
+  React Dev Tools to enhance debugging, optimize performance, and maintain
+  modern coding practices. Brian Holt's Complete Intro to React v9 offers
+  practical insights into these tools for effective frontend development with
+  Vite.js.
 keywords:
-  - React developer tools
+  - React tools
   - NODE_ENV
   - Strict Mode
   - React Dev Tools
-  - React debugging
-  - Vite.js
-  - React performance
+  - Brian Holt
 ---
 
 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,15 +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.
+  Learn about creating custom hooks in React with Brian Holt's Complete Intro to
+  React, covering how to build and integrate a custom hook for fetching pizza of
+  the day using React hooks for effective separation and testability. Brian
+  demonstrates building a component and using debug tools to inspect React
+  custom hooks efficiently.
 keywords:
-  - React hooks
   - custom hooks
-  - Pizza of the Day
-  - API requests
-  - component logic
+  - React hooks
+  - Brian Holt
+  - pizza of the day
+  - debug value
 ---
 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.