Copywriting nitpicks (Modules 01.01-04.01) (#386)

Author: ianjmacintosh

exercises/02.raw-react/02.problem.nesting/README.mdx

@@ -12,12 +12,12 @@ generate this DOM output:
 </div>
 ```
 
-Hint: you can either use the `children` prop or additional arguments after the
+Hint: You can either use the `children` prop or additional arguments after the
 props. If you use the `children` prop, you will get a warning in the developer
 console about needing a "key" prop. We'll get to that later.
 
-Tip, you'll use `createElement` for the `span` elements, but to get the
+Tip: You'll use `createElement` for the `span` elements, but to get the
 space between them, you'll need to use a string (`' '`) to tell React to create
-a [`textNode`](https://developer.mozilla.org/en-US/docs/Web/API/Text)
+a [`textNode`](https://developer.mozilla.org/en-US/docs/Web/API/Text).
 
 - [📜 `createElement`](https://react.dev/reference/react/createElement#createelement)

exercises/03.using-jsx/02.problem.interpolation/README.mdx

@@ -22,7 +22,7 @@ const children = 'Hello World'
 const element = <div className="hmmm">how do I make this work?</div>
 ```
 
-📜 The react docs for JSX are pretty good:
+📜 The React docs for JSX are pretty good:
 [Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx)
 
 Here are a few sections of particular interest for this step:

exercises/04.components/01.solution.function/README.mdx

@@ -5,7 +5,7 @@
 👨‍💼 Super, but that's definitely not the most fun way to use custom components.
 In fact, we're technically not creating a custom component at all. We're just
 interpolating a function call into our template. This will have interesting
-implications in the future with react features like state and effects.
+implications in the future with React features like state and effects.
 
-Instead, let's create react elements out of this function which is what we're
+Instead, let's create React elements out of this function which is what we're
 going for...

exercises/04.components/02.solution.raw/README.mdx

@@ -2,9 +2,9 @@
 
 <EpicVideo url="https://www.epicreact.dev/workshops/react-fundamentals/raw-api/solution" />
 
-👨‍💼 Great! While that's not really all that nicer to work with, it does get us a
-centimeter closer to our goal of using JSX with custom components. It's also
-interesting to throw a couple console logs around and see how using
+👨‍💼 Great! While that's not really all that much nicer to work with, it does
+get us a centimeter closer to our goal of using JSX with custom components.
+It's also interesting to throw a couple console logs around and see how using
 `createElement` compares to simply calling the function directly in our
 JSX.
 

exercises/04.components/03.problem.jsx/README.mdx

@@ -17,7 +17,7 @@ element = <message>Hello World</message>
 And we're so close! Just like using JSX for regular `div`s is nicer than using
 the raw `createElement` API, using JSX for custom components is nicer too.
 Remember that it's Babel that's responsible for taking our JSX and compiling it
-to `createElement` calls. If we try `<message>Hello World</message>,
+to `createElement` calls. If we try `<message>Hello World</message>`,
 here's what Babel will do:
 
 ```tsx

exercises/04.components/04.problem.props/README.mdx

@@ -6,7 +6,7 @@
 "props" which is the object your component function accepts as an argument.
 
 So now, we're going to use a `Calculator` component that can display an
-equation and it's solution, like so:
+equation and its solution, like so:
 
 ```tsx
 element = <Calculator left={1} operator="+" right={2} />

exercises/04.components/04.problem.props/index.html

@@ -20,7 +20,7 @@
 				// 💰 you can get the result with: operations[operator](left, right)
 				return (
 					<div>
-						{/* 🐨 render the equation and it's result here */}
+						{/* 🐨 render the equation and its result here */}
 						{/* 💰 open the final version in the app if you're unsure */}
 					</div>
 				)