diff --git a/.all-contributorsrc b/.all-contributorsrc index e5718d7..590db0e 100644 --- a/.all-contributorsrc +++ b/.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" diff --git a/docs/0.1-set-up.mdx b/docs/0.1-set-up.mdx index 9649470..3cf3ce6 100644 --- a/docs/0.1-set-up.mdx +++ b/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(, 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). diff --git a/docs/0.2-styles.mdx b/docs/0.2-styles.mdx index 86cd85f..ce3133e 100644 --- a/docs/0.2-styles.mdx +++ b/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: -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. diff --git a/docs/0.4-get-cat.mdx b/docs/0.4-get-cat.mdx index 07380ce..09c5f32 100644 --- a/docs/0.4-get-cat.mdx +++ b/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`: { `} /> -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. 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: -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: -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`: + + 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: -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 `{}`. ` 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 `
` tag paste this JSX: 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: -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! 🎉 diff --git a/docs/0.6-add-favorites.mdx b/docs/0.6-add-favorites.mdx index 95a952c..84f45c7 100644 --- a/docs/0.6-add-favorites.mdx +++ b/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. -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. diff --git a/docs/0.7-remove-favorites.mdx b/docs/0.7-remove-favorites.mdx index 4f0563d..d6f364e 100644 --- a/docs/0.7-remove-favorites.mdx +++ b/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: { - 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`. removeFavorite(index)}> + `} /> -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! 🎉 diff --git a/docs/0.8-disable-like.mdx b/docs/0.8-disable-like.mdx index be50ed9..c94c1ab 100644 --- a/docs/0.8-disable-like.mdx +++ b/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: -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: -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! 🎉 diff --git a/docs/0.9-components.mdx b/docs/0.9-components.mdx index 275b062..d94ffe6 100644 --- a/docs/0.9-components.mdx +++ b/docs/0.9-components.mdx @@ -8,7 +8,7 @@ import Code from '../components/code' # Make Components -Right now all our app works but it's one huge file and that can get out of hand pretty fast so let's split this into several components. +Right now our app works perfectly fine, but all of our code is in one big file. This can get out of hand pretty fast, so let's split our app's logic into several components. We can split the app in the following parts: @@ -23,7 +23,7 @@ Let's start with the header because that one doesn't need any info from our app. Let's create a new folder called `components` and create a new file called `header.js` inside of it. -In it import React and export a function that returns the JSX we had in the header part of our app. +In this file, import React and export a function that returns the JSX we had in the header part of our app. -Instead of the H1 we can now have our new `Header` component like so: +Instead of the H1 we can now use our new `Header` component like so: (
    - {favoriteCats.map((cat, index) => ( + {favoriteCats.map(cat => (
  • favorited cat -
    • @@ -90,20 +90,19 @@ export default favoriteCats `} /> -In this case our component will need some information from our App component so let's fake that and pass that as parameters to the function favoriteCats. -We need the favoriteCats and also the onclick for when you try to remove a favorite cat so we cant call the function like so: +Our new component will also need some information from our App component, so we need to change a few things. To make this new component accept data from our parent component, we add `{ cats, removeFavorite }` like so: ( +const favoriteCats = ({ cats, removeFavorite }) => (
      - {cats.map((cat, index) => ( + {cats.map(cat => (
    • favorited cat -
      • @@ -115,7 +114,9 @@ export default favoriteCats `} /> -Now we can do the same thing and import/use our function in the `index.js` but it wont work: +Instead of our list getting data from `favoriteCats`, we now want to get it from `cats`, which we will pass down from our App component in the next step. This means we have to change `favoriteCats.map(...)` to `cats.map(...)`, but we can leave `removeFavorite(index)` as it is, because the name hasn't changed. + +As you might have noticed, our code is now broken with the new changes we made to the code. We also need to update our App component to make sure our app works again. Now we can do the same thing and import/use our function in the `index.js`. However it still won't work: -We need to also pass the two values the function on the other side is expecting and we can pass that as we usally pass HTML atributes like so: +We also need to pass the two values the function in our new component is expecting, which are `cats` and `removeFavorite`. We do this the way we write HTML atributes: -In the same way let's now pass all the component needs to render in our `index.js` +In the same way let's now pass all the data this component needs to render in our `index.js` -We have now made our `index.js` look way cleaner by moving things into their files and components. +We have now made our `index.js` look way cleaner by moving things into separate files and components.