day 23 has been added

22_Form_Using_Hooks/22_form_using_hooks.md

@@ -14,7 +14,7 @@
 
 </div>
 
-[<< Day 21](../21_Introducing_Hooks/21_introducing_hooks.md) | [Day 23>>]()
+[<< Day 21](../21_Introducing_Hooks/21_introducing_hooks.md) | [Day 23>>](../23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md)
 
 ![30 Days of React banner](../images/30_days_of_react_banner_day_22.jpg)
 
@@ -969,4 +969,5 @@ ReactDOM.render(<App />, rootElement)
 Coming ..
 
 🎉 CONGRATULATIONS ! 🎉
-[<< Day 21](../21_Introducing_Hooks/21_introducing_hooks.md) | [Day 23>>]()
+
+[<< Day 21](../21_Introducing_Hooks/21_introducing_hooks.md) | [Day 23>>](../23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md)

23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md

@@ -0,0 +1,122 @@
+<div align="center">
+  <h1> 30 Days Of React: Fetching Data Using Hooks</h1>
+  <a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
+  <img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
+  </a>
+  <a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
+  <img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
+  </a>
+
+<sub>Author:
+<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
+<small> October, 2020</small>
+</sub>
+
+</div>
+
+[<< Day 22](../22_Form_Using_Hooks/22_form_using_hooks.md) | [Day 24>>]()
+
+![30 Days of React banner](../images/30_days_of_react_banner_day_23.jpg)
+
+- [Introducing React Hook](#introducing-react-hook)
+  - [Basic Hooks](#basic-hooks)
+    - [State Hook](#state-hook)
+    - [Effect Hook](#effect-hook)
+    - [Context Hook](#context-hook)
+  - [Additional Hook](#additional-hook)
+- [Exercises](#exercises)
+  - [Exercises: Level 1](#exercises-level-1)
+
+# Fetching Data Using Hooks
+
+In the previous sections, you have learned how to fetch data using fetch and axios. In this section , we will use the useEffect hook to fetch data. We can use fetch or axios but I prefer to use axios. In React hooks, you don't have to use componentDidMount life cycle separately to fetch data. The useEffect has incorporate the React life cycle methods(mounting, updating and unmounting). Let's convert the code we wrote on day 18 to React hooks. We need to import the useEffect from react. The useEffect takes to argument that is a callback and an array. If the array is empty it behaves as componentDidMount life cycle where if the array has other properties, it will behave as updating too.
+
+```js
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import ReactDOM, { findDOMNode } from 'react-dom'
+
+const Country = ({
+  country: { name, capital, flag, languages, population, currency },
+}) => {
+  const formattedCapital =
+    capital.length > 0 ? (
+      <>
+        <span>Capital: </span>
+        {capital}
+      </>
+    ) : (
+      ''
+    )
+  const formattedLanguage = languages.length > 1 ? `Languages` : `Language`
+
+  return (
+    <div className='country'>
+      <div className='country_flag'>
+        <img src={flag} alt={name} />
+      </div>
+      <h3 className='country_name'>{name.toUpperCase()}</h3>
+      <div class='country_text'>
+        <p>{formattedCapital}</p>
+        <p>
+          <span>{formattedLanguage}: </span>
+          {languages.map((language) => language.name).join(', ')}
+        </p>
+        <p>
+          <span>Population: </span>
+          {population.toLocaleString()}
+        </p>
+        <p>
+          <span>Currency: </span>
+          {currency}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+const App = (props) => {
+  // setting initial state and method to update state
+  const [data, setData] = useState([])
+
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+  const fetchData = async () => {
+    const url = 'https://restcountries.eu/rest/v2/all'
+    try {
+      const response = await fetch(url)
+      const data = await response.json()
+      setData(data)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  return (
+    <div className='App'>
+      <h1>Fetching Data Using Hook</h1>
+      <h1>Calling API</h1>
+      <div>
+        <p>There are {data.length} countries in the api</p>
+        <div className='countries-wrapper'>
+          {data.map((country) => (
+            <Country country={country} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(<App />, rootElement)
+```
+
+# Exercises
+
+🎉 CONGRATULATIONS ! 🎉
+
+
+[<< Day 22](../22_Form_Using_Hooks/22_form_using_hooks.md) | [Day 24>>]()

23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/README.md

@@ -0,0 +1,5 @@
+# 30 Days of React App: Day 17
+
+In the project directory, you can run to start the project
+
+### `npm start`

23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "30-days-of-react",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/public/index.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
+      rel="stylesheet"
+    />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+
+    <title>30 Days Of React App</title>
+    <style>
+
+      /* == General style === */
+
+      * {
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+      }
+
+      html,
+      body {
+        height: 100%;
+        line-height: 1.5;
+        font-family: 'Montserrat';
+        font-weight: 300;
+        color: black;
+      }
+
+      .root {
+        min-height: 100%;
+        position: relative;
+      }
+
+      .header-wrapper,
+      .main-wrapper,
+      .footer-wrapper {
+        width: 85%;
+        margin: auto;
+      }
+
+      .header-wrapper,
+      .main-wrapper {
+        padding: 10px;
+        margin: 2px auto;
+      }
+
+      h1 {
+        font-size: 70px;
+        font-weight: 300;
+      }
+
+      h2,
+      h3 {
+        font-weight: 300;
+      }
+
+      header {
+        background-color: #61dbfb;
+        padding: 25;
+        padding: 10px;
+      }
+
+      main {
+        padding: 10px;
+        padding-bottom: 60px;
+        /* Height of the footer */
+      }
+
+      ul {
+        margin-left: 15px;
+      }
+
+      ul li {
+        list-style: none;
+      }
+
+      footer {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 60px;
+        /* Height of the footer */
+        background: #6cf;
+      }
+
+      .footer-wrapper {
+        font-weight: 400;
+        text-align: center;
+        line-height: 60px;
+      }
+      .user-card {
+        margin-top: 10px;
+      }
+      .user-card > img {
+        border-radius: 50%;
+        width: 14%;
+      }
+
+    </style>
+
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>