edits, order image

Author: dtauer

lessons/03-tools/C-linting.md

@@ -53,12 +53,14 @@ export default [
 - [globals][globals] is a package that is just a big JSON file of what's available in each environment. We're going to be in Node.js and Browser environments so we grabbed those two. If I was being a bit more discerning I'd carefully only apply browser configs to browser files and Node configs to Node.js files.
 - The config objects are applied in order. We did ESLint's JS config first, and then our custom one so we can overwrite it where we want to, and then the Prettier one should always come last as all it does is turn off rules that Prettier itself does; it doesn't add anything.
 
-This is a combination of the recommended configs of ESLint and Prettier. This will lint for both normal JS stuff as well as JSX stuff. Run `npx eslint` now and you should see we have a few errors. Run it again with the `--fix` flag and see it will fix some of it for us! Go fix the rest of your errors and come back. Let's go add this to our npm scripts.
+This is a combination of the recommended configs of ESLint and Prettier. This will lint for both normal JS stuff as well as JSX stuff. Let's add ESLint to our scripts:
 
 ```json
 "lint": "eslint",
 ```
 
+Run `npm run eslint` now and you should see we have a few errors.
+
 > 🚨 ESLint will have a bunch of errors right now. Ignore them; we'll fix them in a sec.
 
 Worth adding three things here:

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

@@ -75,7 +75,7 @@ reactPlugin.configs.flat["jsx-runtime"],
 // add to files
 files: ["**/*.js", "**/*.jsx"], // add JSX
 
-// inside the same object files, after the languageOptions:
+//after the languageOptions object:
 rules: {
   "react/no-unescaped-entities": "off",
   "react/prop-types": "off",
@@ -86,7 +86,7 @@ You can also copy fill config from [the repo][eslint].
 
 We have to add two configs, one to allow ESLint to understand React and add some basic React rules, and one to modernize it as React 17 changed a bit how ESLint interacts with React.
 
-We're also turning off two rules that I don't find particularly useful: unescaped entites (which make you change things like `'` into `&apos`) and prop types which no one has used in a decade at this point. Otherwise we should be good to go.
+We're also turning off two rules that I don't find particularly useful: unescaped entities (which make you change things like `'` into `&apos`) and prop types which no one has used in a decade at this point. Otherwise we should be good to go.
 
 ## Back to JSX
 

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

@@ -102,6 +102,10 @@ import Order from "./Order";
 
 Now navigate to [http://localhost:5173/]() and see that you have two inputs, one for the pizza type and a set of radio buttons for the size. Try and select something with the inputs. You'll see that you can't modify them. Why? Let's think about how React works: when you interact with the inputs, React detects that a DOM event happens. When that happens, React thinks _something_ may have changed so it runs a re-render. Providing your render functions are fast, this is a very quick operation. It then diffs what's currently there and what its render pass came up with. It then updates the minimum amount of DOM necessary.
 
+> In the recorded course, the layout is vertical because the `order-pizza` DIV was in the wrong place. Use the markup above. The layout should look like this:
+
+![Order Page Layout](/images/order-page-layout.webp)
+
 Notice we're using `className` instead of `class` on the HTML element for CSS classes. This is because `class` is a reserved word in JS and JSX is still just JS. So instead they opted to use `className` which is the [name of the JS API][js-api] for interacting with class names.
 
 Like `className`, `htmlFor` is used because `for` is a reserved word in JS.