Improving docs

.all-contributorsrc

@@ -60,6 +60,15 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "vicbergquist",
+      "name": "Victoria Bergquist",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/25737281?v=4",
+      "profile": "https://twitter.com/vicbergquist",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "repoType": "github"

docs/0.1-set-up.mdx

@@ -16,7 +16,7 @@ import Code from '../components/code'
 
 ## Create a new Sandbox
 
-We will start from scratch in CodeSandbox so let's start by creating a new React Sandbox and you can do this by clicking [here](https://codesandbox.io/s/new)
+We will start from scratch in CodeSandbox so let's start by [creating a new React Sandbox](https://codesandbox.io/s/new).
 
 ## The code
 
@@ -54,6 +54,6 @@ ReactDOM.render(<App />, rootElement);
 `}
 />
 
-We are telling ReactDOM to render the [JSX](https://reactjs.org/docs/introducing-jsx.html) we generated in our function and attach it to the DOM so we can see it in our page.So simply ReactDOM here decides where you should render the JSX which should be shown on the UI. You can think of JSX as being similar to HTML, the biggest difference is that we use `className` instead of `class`.
+We are telling ReactDOM to render the [JSX](https://reactjs.org/docs/introducing-jsx.html) we generated in our function and attach it to the DOM so we can see it in our page. Which means ReactDOM decides where you should render the JSX that should be shown on the UI. You can think of JSX as being similar to HTML, the biggest difference is that we use `className` instead of `class`.
 
-JSX is nothing more than Javascript disguised in form of HTML.To know more about how React internally converts the JSX to Javascript object. Checkout this [link](https://bit.ly/2RfpnO6).
+JSX is nothing more than Javascript disguised in the form of HTML. To learn more about how React internally converts JSX to Javascript objects, read [broken link](https://bit.ly/2RfpnO6).

docs/0.2-styles.mdx

@@ -10,13 +10,13 @@ import Code from '../components/code'
 
 ## Add Styles
 
-In order to have an app that looks on point we will need to provide some base styles that you are of course more then welcome to edit.
+In order to have an app that looks on point we will need to provide some base styles. You are more then welcome to edit these to your liking.
 
 In our `index.js` we had this line:
 
 <Code code={`import './styles.css'`} />
 
-This means that this App will import this CSS file and in there we can place all the styles needed to make our app amazing.
+This means that this App will import this CSS file, and is where we can place all the styles needed to make our app look amazing.
 
 You can copy these styles:
 
@@ -150,4 +150,4 @@ button:hover {
   language="css"
 />
 
-For now all this will do is break the styles we already have but you will see in the next chapter some awesome changes when we add the boilerplate JSX.
+For now, this will only break the styles we already have, but you will see some awesome changes to our app in the next chapter when we add the boilerplate JSX.

docs/0.4-get-cat.mdx

@@ -10,15 +10,15 @@ import Code from '../components/code'
 
 ## The API
 
-For this application we will be using a free API that delivers us images of cats on demand [https://www.catis.life](https://www.catis.life)
+For this application we will be using a free API that gives us cat images: [https://www.catis.life](https://www.catis.life)
 
-The only endpoint we care about is the `/cat` that will give us a random cat for each API call we make.
+The only endpoint we care about is `/cat`, which will give us a random cat for each API call we make.
 
 [https://www.catis.life/cat](https://www.catis.life/cat)
 
 ## Call this API
 
-For this we are going to use the [fetch API](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) and get our data from the API we said at the top. So let's create a function to do that in our `index.js`
+To make API calls, we will use the [fetch API](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) to get the data we just mentioned above. So let's create a function to do that in our `index.js`:
 
 <Code
   code={`
@@ -37,45 +37,53 @@ const App = () => {
 `}
 />
 
-What we did here is that we create a function using the arrow syntax state of our application inside of it.
+Here we created a function using the arrow syntax in order to make state available in our `App` and added a `getCat` function inside of it. This function will fetch the data we need for our app.
 
 <Code
   code={`
     fetch(url)
-      .then(rsp => rsp.json())
+      .then(response => response.json())
       .then(data => setCurrentCat(data.cat))
 `}
 />
 
-After we call the fetch we then transform what we receive to json to use it better in our app and once that is done we use a function called setState.
+After we call the fetch function, we will transform the data we receive to JSON. This will make it easier for us to handle the data in our app. The next step is to change our state with `setCurrentCat`.
 
-What this function does is that is changes the state of our component and in this case the component is our whole App.
+`setCurrentCat` changes the state of our component and in this case the component is our whole App.
 
-But as you can see we have no `setCurrentCat` defined.
+But as you can see, we have no `setCurrentCat` defined.
 
-To add state to our file add this before the `getCat` function:
+To add this state to our file, we add this before the `getCat` function:
 
 <Code
   code={`
     const [currentCat, setCurrentCat] = useState(null)
 `}
 />
 
-We should also tell Javascript to import `useState` from React and we do that by changing our React import to:
+We should also tell JavaScript to import `useState` from React and we do that by changing our React import to:
 
 <Code
   code={`
 import React, { useState, useEffect } from 'react'
 `}
 />
 
-This will tell React that it should start with that part of the state as null and we will manipulate it later and we do it by assigning it to the image url we get from the API.
+This will tell React that it should start with that part of the state as null and that we will manipulate it later, which we do by assigning it to the image URL (`data.cat`) we get from the API with `setCurrentCat`: 
+
+<Code
+  code={`
+    fetch(url)
+      .then(response => response.json())
+      .then(data => setCurrentCat(data.cat))
+`}
+/>
 
 ## Call the `getCat` on page load
 
-So we have a function but so far we are not actually calling it anywhere so we don't actually have that cat image url.
+So far we have a `getCat` function, but it's not being called anywhere. This means we don't have a cat image URL yet.
 
-This is why we imported effect, these effects are meant to be run in several parts of the react component lifecycle.
+This is where the `useEffect` hook comes in and it will let us fetch data for our app. It tells React that our component needs to do something after it has been rendered. The function we pass (`getCat()`) will be remembered and React will call it after performing the DOM update. [Effects](https://reactjs.org/docs/hooks-effect.html) run in several parts of the react component lifecycle.
 
 The syntax is like this:
 
@@ -87,7 +95,7 @@ The syntax is like this:
 `}
 />
 
-By dependencies I mean what values need to change in order for this effect to run again. In our case we want to this effect to run when the page loads so we can set it as an empty array:
+Dependencies mean values that need to change in order for the effect to run again. In our case, we want the effect to run when the page loads and set an empty array:
 
 <Code
   code={`
@@ -116,7 +124,7 @@ Right now we have this:
   `}
 />
 
-But we want to substitute the src with a variable from the state so we need to interpolate and in React we do that by wrapping the property value in `{}`.
+But we want to substitute the src with a variable from the state so we need to interpolate it. In React we do this by wrapping the property value in `{}`.
 
 <Code
   language="markup"

docs/0.5-build-next-favorite.mdx

@@ -10,9 +10,9 @@ import Code from '../components/code'
 
 ## Install `react-icons`
 
-First thing we will need to do is install [`react-icons`](https://www.npmjs.com/package/react-icons) and on CodeSandbox you do that by clicking on `Add Dependency`, look for `react-icons`, click on it and CodeSandbox will automatically install it in your project.
+First thing we will need to do is install [`react-icons`](https://www.npmjs.com/package/react-icons). On CodeSandbox you do this by clicking `Add Dependency`, and searching for and clicking `react-icons`. Now CodeSandbox will automatically install it in your project.
 
-After that we want for now two icons: `GoHeart` and `GoArrowRight` and we want to import it from `/go` for the github icons so we write:
+After this we want to indicate which icons we want to use: `GoHeart` and `GoArrowRight`. We have to import them from `/go`, so we write:
 
 <Code
   code={`
@@ -22,7 +22,7 @@ import { GoHeart, GoArrowRight } from "react-icons/go";
 
 ## Add the boilerplate JSX
 
-After these has been added we can now add our JSX to show our buttons even if they don't do anything so after the `<figure>` paste this JSX:
+Now it's time to add our JSX so that we can show our buttons, but they won't actually do anything yet. After the `<figure>` tag paste this JSX:
 
 <Code
   code={`
@@ -43,11 +43,11 @@ After these has been added we can now add our JSX to show our buttons even if th
 
 ## Add next cat functionality
 
-After we have this JSX we want to be able to get a new cat when we click next. To do this we have a event handler called `onClick` that we can attach to the button and inside of it call a function.
+Now that we have added the JSX above, we want add the functionality to get a new cat when we click the next button. To do this we use the event handler called `onClick`, and attach it to the button and call a function inside of it.
 
-> We are attaching it to the button and not the actual icon because of accessability concerns. If someone with an assisting technology device tries to access our website and the onClick is on the icon it will not be announced as a button.
+> We are attaching it to the button and not the actual icon because of accessability concerns. If someone with an assisting technology device tries to access our website and the onClick is on the icon, it will not be announced as a button.
 
-We already have the `getCat` function that we can call to get a new cat so we need to attach it to the button and we ready to go:
+We already have the `getCat` function that we can use to get a new cat, so we need to attach it on the button:
 
 <Code
   code={`
@@ -66,4 +66,4 @@ We already have the `getCat` function that we can call to get a new cat so we ne
 `}
 />
 
-When you now click on the next button you will get a new cat 🎉
+When you now click on the next button, you will get a new cat! 🎉

docs/0.6-add-favorites.mdx

@@ -8,7 +8,7 @@ import Code from '../components/code'
 
 # Add Cats to favorites
 
-Next step is to able to click the heart icon and add a cat to our favorite list and to do this we will have an array in our state that we will push to when someone clicks the heart button on a cat.
+The next step is to make it possible to click on the heart icon and add a cat to our favorite list. To do this, we will have an array in our state that we will store all our favorite cats. When a button with a heart icon is clicked, we concat the cat data on this array to store it as a favorite.
 
 Let's start with adding our base state:
 
@@ -20,7 +20,7 @@ Let's start with adding our base state:
 
 ## Create the add favorite function
 
-If we think about the state of our app we know that we have an empty array where we are supposed to put our favorite cats so we need to concat the cat we just liked.
+If we think about the state of our app, we know that we have an empty array where all our favorite cats will be stored. In order to add the cat we just liked to our `favoriteCats` array, we need to concat the new cat.
 
 Our function looks like:
 
@@ -32,11 +32,11 @@ Our function looks like:
 `}
 />
 
-So, this function gets a cat and with it adds it to the array so that later we can map all over the cats we have saved in that array.
+This function gets a cat and with it adds it to the array so that later we can map all over the cats we have saved in that array.
 
 ## Call the function
 
-In our JSX we have a `button` that is used for the heart icon and we want to attach it this function to it and also we need to pass it the current cat we are seeing.
+In our JSX we have a `button` with a heart icon inside. We will attach an `onClick` event to it and use it to pass the cat we are seeing to our `favouriteCats` array.
 
 <Code
   code={`
@@ -49,7 +49,7 @@ In our JSX we have a `button` that is used for the heart icon and we want to att
 `}
 />
 
-The reason we call it like: `() => favoriteCat(currentCat)` instead of just doing `favoriteCat(currentCat)` is because calling like this would call the function on the component mount and we only want to call it on click.
+The reason our function looks like this: `() => favoriteCat(currentCat)` instead of `favoriteCat(currentCat)`, is because the latter would call the function on the component, when we only want it called on the click of the button.
 
 ## Add the JSX
 
@@ -70,5 +70,5 @@ Let's now add the necessary JSX to make it possible for us to show our favorite
 `}
 />
 
-What we are doing here is getting the favoriteCats and mapping over each cat in the array and it's url.
-For each we create a list item and in it place an image and a button that will serve the propose of deleting the cat from the favorites.
+Here we are getting the `favoriteCats` array and mapping over each cat in the array and it's URL.
+For each cat, we create a list item and place an image inside of it, along with a button that will serve the purpose of deleting the cat from the favorites list.

docs/0.7-remove-favorites.mdx

@@ -8,35 +8,32 @@ import Code from '../components/code'
 
 # Remove Cats from favorites
 
-Right now we can add cats to our favorites but when clicking on removing a cat nothing happens so in this part we are going to create a function for that.
+We can now add favorite cats in our app, but when want to delete a cat from favorites, nothing happens. In this section we will create a function to do this.
 
 First step is to think about how we want to do this:
 
-We have the all the URL's of the cats in the array and we know that we want to remove the one that is attached to the that `li` so what we want to do is leave all the cats in the array expect the one where the url matches the one of the cat we clicked.
+We currently have all of our cat image URLs in an array, and we want to remove the one that belongs to the `li` that is being clicked. Which means, all cats should stay in our array unless the URL from the click matches a cat in the array.
 
-We can do this with a filter function where we get all the cats in the favorites and only returns the one where the URL is different then the URL of the cat we wanted to delete, like so:
+To implement this functionality, we create a filter function where we take all the cats in the `favoriteCats` array and only return the cats with a URL that is different from the URL of the cat we want to delete, like so:
 
 <Code
   code={`
-  const removeFavorite = currentCatIndex => {
-    setFavoriteCats(favoriteCats.filter((cat, index) => {
-        if (index !== catToRemoveIndex) return true;
-        return false;
-      })
+  const removeFavorite = currentCat => {
+    setFavoriteCats(favoriteCats.filter(cat => cat !== currentCat))
   }
 `}
 />
 
-That's exactly what we do here, the filter functions returns a new array with all the elements that pass the test implemented in the function. In this case all the cats will pass except the one we clicked on.
+This filter function returns a new array with all the elements that pass our test: if `cat` don't match our `currentCat` URL, return `cat`. In our case, this will be all the cats except for the one we clicked on to delete.
 
-Let's now call this function and pass it the current cat when we click the the trash icon in a favorite cat:
+To make this work in our app, we have to pass the URL of the cat we are clicking on as a parameter to our function, which in this case is `cat`.
 
 <Code
   code={`
-  <button onClick={() => removeFavorite(index)}>
+  <button onClick={() => removeFavorite(cat)}>
     <GoTrashcan size="20" />
   </button>
 `}
 />
 
-If you now click on the trash can in a cat that is already in favorites you can see that is removed 🎉
+If you now click on the trash can icon to delete a cat from the favorites list, you can see that it gets deleted! 🎉

docs/0.8-disable-like.mdx

@@ -8,9 +8,9 @@ import Code from '../components/code'
 
 # Disable Like
 
-A small bug we have with our application right now is that we can like the same cat twice and that shouldn't be allowed. We can fix this by adding a disabled attribute to the button and attach it to a function that will run every time our render function runs.
+We currently have a bug in our app. We can now like the same cat twice, and that shouldn't be allowed. We can fix this by adding a disabled attribute to the button when the cat is already in our favories and attach it to a function that will run every time our render function runs.
 
-To do this let's attach the function and then create it:
+To do this with a function like so:
 
 <Code
   code={`
@@ -24,16 +24,16 @@ To do this let's attach the function and then create it:
 `}
 />
 
-As you can see we are not calling the function as a inside an arrow function here and that is because in this case we do want it to run on page render and also on every update to make sure that we are disabling the button correctly.
+We previously explained why we used an arrow function to call our `favoriteCat` function in a `onClick` event in [Part 6 - Add Cats to Favorites](0.6-add-favorites.mdx#call-the-function), but as you may have noticed, we are not using it for our `catInFavorites` function to disable our button. This is because we want to call this function on page render and every update to make sure that we are disabling the button correctly.
 
-## Write the function
+## Writing the function
 
-What we want to do is check if the current cat being shown in the big image is already in the array of `favoriteCats`. If we think about it we want to disable the button when the array already contains that cat and leave it enabled when that is not happening. In ES6 we got a new function in the array method called exactly that:
+Now we want to write the logic for disabling the like button for cats that are already in the favorite list. To do this, we have to check if a cat exists in the `favoriteCats` array, and if it does, disable the button. In ES6 we have a new array method to help us do exactly this called [`includes()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes). We use it like this:
 
 <Code
   code={`
   const catInFavorites = cat => favoriteCats.includes(cat)
 `}
 />
 
-This function will return false when the cat as yet not been added and true when it has and that will make our button disabled 🎉
+This function will return false when a cat in our array is not included in our favorites yet and true if it is! This way, our button will be disabled or enabled accordingly! 🎉