Minor updates/fixes (#718)

_chapters/add-an-api-to-handle-billing.md

@@ -50,7 +50,7 @@ Most of this is fairly straightforward but let's go over it quickly:
 
 - We are using a `calculateCost(storage)` function (that we are going to add soon) to figure out how much to charge a user based on the number of notes that are going to be stored.
 
-- We create a new Stripe object using our Stripe Secret key. We are getting this from the environment variable that we configured in the [previous chapter]({% link _chapters/handling-secrets-in-sst.md %}). For newer verions of the Stripe SDK, you might've to pass in an API version.
+- We create a new Stripe object using our Stripe Secret key. We are getting this from the environment variable that we configured in the [previous chapter]({% link _chapters/handling-secrets-in-sst.md %}). For newer versions of the Stripe SDK, you might've to pass in an API version.
 
 - Finally, we use the `stripe.charges.create` method to charge the user and respond to the request if everything went through successfully.
 

_chapters/configure-aws-amplify.md

@@ -16,7 +16,7 @@ To do this we'll be using a library called [AWS Amplify](https://github.com/aws/
 
 {%change%} Run the following command in the `frontend/` directory and **not** in your project root.
 
-``` bash
+```bash
 $ npm install aws-amplify
 ```
 
@@ -28,7 +28,7 @@ Let's first create a configuration file for our app that'll reference all the re
 
 {%change%} Create a file at `src/config.js` and add the following.
 
-``` js
+```js
 const config = {
   // Backend config
   s3: {
@@ -58,43 +58,43 @@ Next we'll set up AWS Amplify.
 
 {%change%} Import it by adding the following to the header of your `src/index.js`.
 
-``` js
-import { Amplify } from 'aws-amplify';
+```js
+import { Amplify } from "aws-amplify";
 ```
 
-And import the config we created above. 
+And import the config we created above.
 
 {%change%} Add the following, also to the header of your `src/index.js`.
 
-``` js
-import config from './config';
+```js
+import config from "./config";
 ```
 
-{%change%} And to initialize AWS Amplify; add the following above the `ReactDOM.render` line in `src/index.js`.
+{%change%} And to initialize AWS Amplify; add the following above the `ReactDOM.createRoot` line in `src/index.js`.
 
-``` js
+```js
 Amplify.configure({
   Auth: {
     mandatorySignIn: true,
     region: config.cognito.REGION,
     userPoolId: config.cognito.USER_POOL_ID,
     identityPoolId: config.cognito.IDENTITY_POOL_ID,
-    userPoolWebClientId: config.cognito.APP_CLIENT_ID
+    userPoolWebClientId: config.cognito.APP_CLIENT_ID,
   },
   Storage: {
     region: config.s3.REGION,
     bucket: config.s3.BUCKET,
-    identityPoolId: config.cognito.IDENTITY_POOL_ID
+    identityPoolId: config.cognito.IDENTITY_POOL_ID,
   },
   API: {
     endpoints: [
       {
         name: "notes",
         endpoint: config.apiGateway.URL,
-        region: config.apiGateway.REGION
+        region: config.apiGateway.REGION,
       },
-    ]
-  }
+    ],
+  },
 });
 ```
 
@@ -106,13 +106,13 @@ A couple of notes here.
 
 - The `name: "notes"` is basically telling Amplify that we want to name our API. Amplify allows you to add multiple APIs that your app is going to work with. In our case our entire backend is just one single API.
 
-- The `Amplify.configure()` is just setting the various AWS resources that we want to interact with. It isn't doing anything else special here beside configuration. So while this might look intimidating, just remember this is only setting things up. 
+- The `Amplify.configure()` is just setting the various AWS resources that we want to interact with. It isn't doing anything else special here beside configuration. So while this might look intimidating, just remember this is only setting things up.
 
 ### Commit the Changes
 
 {%change%} Let's commit our code so far and push it to GitHub.
 
-``` bash
+```bash
 $ git add .
 $ git commit -m "Setting up our React app"
 $ git push

_chapters/create-a-route-that-redirects.md

@@ -38,7 +38,7 @@ This simple component creates a `Route` where its children are rendered only if
 
 - We use the `useAppContext` hook to check if the user is authenticated.
 
-- If the user is authenticated, then we simply render the `children` component. And if the user is not authenticated, then we use the `Redirect` React Router component to redirect the user to the login page.
+- If the user is authenticated, then we simply render the `children` component. And if the user is not authenticated, then we use the `Navigate` React Router component to redirect the user to the login page.
 
 - We also pass in the current path to the login page (`redirect` in the query string). We will use this later to redirect us back after the user logs in. We use the `useLocation` React Router hook to get this info.
 
@@ -63,7 +63,7 @@ export default function UnauthenticatedRoute(props) {
 }
 ```
 
-Here we are checking to ensure that the user is **not** authenticated before we render the child components. Example child components here would be `Login` and `Signup`. And in the case where the user is authenticated, we use the `Redirect` component to simply send the user to the homepage.
+Here we are checking to ensure that the user is **not** authenticated before we render the child components. Example child components here would be `Login` and `Signup`. And in the case where the user is authenticated, we use the `Navigate` component to simply send the user to the homepage.
 
 The `cloneElement` above makes sure that passed in `state` is handled correctly for child components of `UnauthenticatedRoute` routes.
 

_chapters/create-containers.md

@@ -38,8 +38,7 @@ export default App;
 We are doing a few things here:
 
 1. Creating a fixed width container using Bootstrap in `div.container`.
-2. Adding a Navbar inside the container that fits to its container's width using the attribute `fluid`.
-3. Using a couple of [Bootstrap spacing utility classes](https://getbootstrap.com/docs/4.5/utilities/spacing/) (like `mb-#` and `py-#`) to add margin bottom (`mb`) and padding vertical (`py`). These use a proportional set of spacer units to give a more harmonious feel to our UI.
+1. Using a couple of [Bootstrap spacing utility classes](https://getbootstrap.com/docs/4.5/utilities/spacing/) (like `mb-#` and `py-#`) to add margin bottom (`mb`) and padding vertical (`py`). These use a proportional set of spacer units to give a more harmonious feel to our UI.
 
 Let's clear out the styles that came with our template.