day 29

.gitignore

@@ -2,7 +2,6 @@ draft.md
 react-for-everyone.md
 component.md
 draft
-29_explore
 30_conclusions
 
 

29_explore/29_explore.md

@@ -0,0 +1,42 @@
+<div align="center">
+  <h1> 30 Days Of React: Project</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 28](../27_Ref/27_ref.md) | [Day 29 >>](../29_explore/29_explore.md)
+
+![30 Days of React banner](../images/30_days_of_react_banner_day_29.jpg)
+
+# Explore
+
+Congratulations for making to this far. You are are unstoppable. So far you have learned lots of concepts and also built several mini-projects. I believe those mini-projects have helped you to understand React very well. After this, you can work on a sole or group React project. You can also expand your skill by using different packages (classnames, lodash, react-helmet, recharts, etc.), implementing PWA, styled components and CSS libraries with React application. In addition, learn SEO, accessibility, responsiveness and browser compatibility. Explore more and increase your knowledge in the domain. Read the [React documentation](https://reactjs.org/). Now, you should feel confident enough about your React skill and you should also start applying for entry or junior softer developer or front end developer positions. No one will tell you that you are read for a job, so you should make yourself ready.
+
+# Exercises
+
+## Exercises: Level 1
+
+1. Polish your GitHub and make your projects as clean as possible
+2. Work on your portfolio
+3. Create LinkedIn account if you don't have yet. If you have LinkedIn account make it as attractive as possible. It will give a high chance for potential recruiters and companies to know more about you. In addition, there are lots of materials and people who can be used as motivation on daily basis.
+4. Follow the author on LinkedIn, Twitter or GitHuh if he created impact on your life.
+5. Become an ambassador of CodingForAll by supporting and advocating our causes.
+6. Write about 30DaysOfReact on different platforms and create an opportunity for others to get a valuable skill.
+
+## Exercises: Level 2
+
+Coming ...
+
+🎉 CONGRATULATIONS ! 🎉
+
+[<< Day 27](../27_Ref/27_ref.md) | [Day 29>>]()

29_explore/29_explore_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*

29_explore/29_explore_boilerplate/README.md

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

29_explore/29_explore_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"
+    ]
+  }
+}

29_explore/29_explore_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>

29_explore/29_explore_boilerplate/src/data/ten_most_highest_populations.js

@@ -0,0 +1,13 @@
+export const tenHighestPopulation = [
+  { country: 'World', population: 7693165599 },
+  { country: 'China', population: 1377422166 },
+  { country: 'India', population: 1295210000 },
+  { country: 'United States of America', population: 323947000 },
+  { country: 'Indonesia', population: 258705000 },
+  { country: 'Brazil', population: 206135893 },
+  { country: 'Pakistan', population: 194125062 },
+  { country: 'Nigeria', population: 186988000 },
+  { country: 'Bangladesh', population: 161006790 },
+  { country: 'Russian Federation', population: 146599183 },
+  { country: 'Japan', population: 126960000 },
+]

29_explore/29_explore_boilerplate/src/index.js

@@ -0,0 +1,20 @@
+import React, { useRef } from 'react'
+import ReactDOM from 'react-dom'
+
+const App = (props) => {
+  const ref = useRef(null)
+  const onClick = () => {
+    ref.current.style.backgroundColor = '#61dbfb'
+    ref.current.style.padding = '50px'
+    ref.current.style.textAlign = 'center'
+  }
+  return (
+    <div className='App'>
+      <h1 ref={ref}>How to style HTML from the DOM tree using useRef</h1>
+      <button onClick={onClick}>Style it</button>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(<App />, rootElement)

29_explore/29_explore_boilerplate/src/index.scss

@@ -0,0 +1,86 @@
+/* == 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%;
+}

29_explore/29_explore_boilerplate/src/useFetch.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+
+export const useFetch = (url) => {
+  const [data, setData] = useState([])
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(url)
+        const data = await response.json()
+        setData(data)
+      } catch (error) {
+        console.log(error)
+      }
+    }
+    fetchData()
+  }, [url])
+
+  return data
+}
+
+export default useFetch