day 28

mcu0054 · Oct 28, 2020 · d92796e · d92796e
1 parent c5e2e93
commit d92796e
Show file tree

Hide file tree

Showing 23 changed files with 13,214 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,8 @@ draft.md
 react-for-everyone.md
 component.md
 draft
+29_explore
+30_conclusions
 
 
 
diff --git a/...Structure/10_react_project_folder_structure_boilerplate/src/images/asabeneh.jpg b/...Structure/10_react_project_folder_structure_boilerplate/src/images/asabeneh.jpg
diff --git a/...Structure/10_react_project_folder_structure_boilerplate/src/images/css_logo.png b/...Structure/10_react_project_folder_structure_boilerplate/src/images/css_logo.png
diff --git a/...tructure/10_react_project_folder_structure_boilerplate/src/images/html_logo.png b/...tructure/10_react_project_folder_structure_boilerplate/src/images/html_logo.png
diff --git a/..._Structure/10_react_project_folder_structure_boilerplate/src/images/js_logo.png b/..._Structure/10_react_project_folder_structure_boilerplate/src/images/js_logo.png
diff --git a/...ructure/10_react_project_folder_structure_boilerplate/src/images/react_logo.png b/...ructure/10_react_project_folder_structure_boilerplate/src/images/react_logo.png
diff --git a/28_project/28_project.md b/28_project/28_project.md
@@ -0,0 +1,34 @@
+<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 27](../27_Ref/27_ref.md) | [Day 29>>]()
+
+![30 Days of React banner](../images/30_days_of_react_banner_day_28.jpg)
+
+# Projects
+
+Create Read Delete and Update(CRUD)
+Most applications use CRUD operations. For instance, you have been Reading(R) data by fetching from the cat API and countries API. You have been creating(C) when you use input field and item. However, we did not implement updating and deleting functionality so far. Since CRUD is a common operation almost in all big applications it is good to know how to implement it. In this section, we will develop a small application which has creating, reading, updating and deleting functionality.
+
+The todo list is a very common example to learn and master CRUD operations in almost every libraries and frameworks. I would also recommend you to develop a todo list, note taking or a tinny blog application for the sake of mastering CRUD.
+
+In this section, you and I will develop an old version of twitter post.
+
+# Exercises
+
+🎉 CONGRATULATIONS ! 🎉
+
+[<< Day 27](../27_Ref/27_ref.md) | [Day 29>>]()
diff --git a/28_project/28_project_boilerplate/.gitignore b/28_project/28_project_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*
diff --git a/28_project/28_project_boilerplate/README.md b/28_project/28_project_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`
diff --git a/28_project/28_project_boilerplate/package.json b/28_project/28_project_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"
+    ]
+  }
+}
diff --git a/28_project/28_project_boilerplate/public/index.html b/28_project/28_project_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>