Minor Typo Fixes

[mattfwood]

Unfortunately, I accidentally made a PR locally with some small typo fixes before realizing I can't create PRs.

Here's the git patch file (hopefully this is the most helpful thing I can provide, but let me know if something else would be better):

---

diff --git a/docs/api/remix.md b/docs/api/remix.md index 33b4b1a..5b93bf0 100644 --- a/docs/api/remix.md +++ b/docs/api/remix.md @@ -71,9 +71,9 @@ function useLiveRouteData() {

usePendingLocation

-During a clientside route transition, Remix loads the resources for the next page before continuing the transition (because we're all sick of flickering spinners). But we also need some UI to acknowledge that they clicked a link. This is the purpose of this hook. +During a client-side route transition, Remix loads the resources for the next page before continuing the transition (because we're all sick of flickering spinners). But we also need some UI to acknowledge that they clicked a link. This is the purpose of this hook.

-Whenever a transition is happening, this hook will return the pending (or next) location. when it's over, it will return undefined. With this information you can create a loading indication on the current page, a link, or even globally in your root.tsx. +Whenever a transition is happening, this hook will return the pending (or next) location. when it's over, it will return undefined. With this information you can create a loading indication on the current page, a link, or even globally in your root.tsx.

This example fades the page out if the transition is taking longer than 300ms.

diff --git a/docs/tutorial/4-nested-routes-params.md b/docs/tutorial/4-nested-routes-params.md index 7f922a7..6b4e11b 100644 --- a/docs/tutorial/4-nested-routes-params.md +++ b/docs/tutorial/4-nested-routes-params.md @@ -62,7 +62,7 @@ Alright, you should be able to visit http://localhost:3000/team and see a few us

Index Routes

-At the moment, this isn't a layout at all, it's just a list of the team. Let's render a child route inside of our team route. +At the moment, this isn't a layout at all, it's just a list of the team members. Let's render a child route inside of our team route.

Make a file at app/routes/team/index.tsx.

diff --git a/docs/tutorial/6-actions.md b/docs/tutorial/6-actions.md index 0d1d274..840d06d 100644 --- a/docs/tutorial/6-actions.md +++ b/docs/tutorial/6-actions.md @@ -11,7 +11,7 @@ We're going to be creating data here. If you've been doing web development for a

• Use the special Remix <Form> to post with JavaScript
• Add special "loading" UI now that we have JavaScript involved with usePendingFormSubmit

-The big takeaway here is that actions (and data mutations) in Remix are modeled as html form navigation. When submiting with JavaScript, Remix can make it faster and ensure the data updates appear on the entire page without a full page reload. Or, you can leave JavaScript at the door and use basic forms. +The big takeaway here is that actions (and data mutations) in Remix are modeled as HTML form navigation. When submitting with JavaScript, Remix can make it faster and ensure the data updates appear on the entire page without a full page reload. Or, you can leave JavaScript at the door and use basic forms.

Get a GitHub Personal Access Token!

@@ -52,13 +52,13 @@ export default function NewGist() { }

-Notice we're using a plain HTML `<form/>` with an action that points to our `/gists` route, and then we name the inputs. When you submit this form, the browser will post to the gists data module--no JavaScript required. We're going to make this work with a plain `<form>` first, and then we'll upgrade it to a Remix `<Form>` to show how to progressively enhance the form when you have the budget to create a really nice UX with JavaScript.
+Notice we're using a plain HTML `<form/>` with an action that points to our `/gists` route, and then we name the inputs. When you submit this form, the browser will post to the gists data module -- no JavaScript required. We're going to make this work with a plain `<form>` first, and then we'll upgrade it to a Remix `<Form>` to show how to progressively enhance the form when you have the budget to create a really nice UX with JavaScript.

 Now let's go create an "action" to handle this form.

 ## Data Actions

-You've seen a `loader` already. Now you're going to create an `action`. Go back to your new route and this:
+You've seen a `loader` already. Now you're going to create an `action`. Go back to your new route and add this:

 ```ts [2,3-5]
 import React from "react";
@@ -91,7 +91,7 @@ let [state, dispatch] = useReducer(reducer, initialState);

 Again we see a pair of values, one to read the state and another to update it. But this time we have a `reducer` to actually handle the state update and a function to request a change to state, `dispatch`.

-Another way to think about Remix actions is that the `reducer` is your `action` and `dispatch` is your `<form>`. And the way we communicate an intent to change server state is with `<form>` (our dispatch) HTML 1.0 style and then the `action` actually deals with it (`reducer`).
+Another way to think about Remix actions is that the `reducer` is your `action` and `dispatch` is your `<form>`. And the way we communicate an intent to change server state is with `<form>` (our dispatch) HTML 1.0-style and then the `action` actually deals with it (`reducer`).

 ```ts
 // reader
@@ -106,17 +106,17 @@ export let action = () => {};

 ## Implement the action

-Alright, back to our component, let's handle the form post and create a new gist with the GitHub API:
+Alright, back to our component. Let's handle the form post and create a new gist with the GitHub API:

 ```ts [3,5,36]
 import React from "react";
 import type { ActionFunction } from "remix";
 import { redirect } from "remix";

-let action: Action = async ({ request }) => {
+let action: ActionFunction = async ({ request }) => {
   // Very important or else it won't work :)
   let token = "insert your github token here";
-  // in a real world scenario you'd want this token to be an enviornment
+  // in a real world scenario you'd want this token to be an environment
   // variable on your server, but as long as you only use it in this action, it
   // won't get included in the browser bundle.

@@ -155,9 +155,9 @@ Alright, fill out your form and give it a shot! You should see your new gist on

 ## Upgrading to `<Form>` and pending UI states

-With a regular `<form>` we're letting the browser handle the post and the pending UI (the address bar/favicon animation). Remix has a `<Form>` component and hook to go along with it to let you progressively enhance your forms. If your budget for this feature is short, just use a `<form>` and move on with your life. If you've got the time to make a fancy user experience, with Remix you don't have to rewrite your code to do the fetch with `useEffect` and manage your own state: you can just add the fancy bits with `<Form>`.
+With a regular `<form>`, we're letting the browser handle the post and the pending UI (the address bar/favicon animation). Remix has a `<Form>` component and hook to go along with it to let you progressively enhance your forms. If your budget for this feature is short, just use a `<form>` and move on with your life. If you've got the time to make a fancy user experience, with Remix you don't have to rewrite your code to do the fetch with `useEffect` and manage your own state: you can just add the fancy bits with `<Form>`.

-Let's update the code and add some loading indication. Note the new imports and the capital "F" `<Form>`. Now Remix is going to handle the form submit clientside with `fetch` and you get access to the serialized form data in `usePendingFormSubmit()` to build that fancy UI.
+Let's update the code and add some loading indication. Note the new imports and the capital "F" `<Form>`. Now Remix is going to handle the form submit client-side with `fetch` and you get access to the serialized form data in `usePendingFormSubmit()` to build that fancy UI.

 ```tsx [4,11,16-22,48-67]
 import React from "react";
@@ -242,4 +242,4 @@ To get the loading spinner to actually spin, put this in your css somewhere:
 }

-That's it! As you can see, actions + <Form> are really powerful. They don't require JavaScript but they also enable you to build great loading expriences at the same time. +That's it! As you can see, actions + <Form> are really powerful. They don't require JavaScript but they also enable you to build great loading experiences at the same time.

[machour]

Not applicable anymore.