Day_5

4 years ago · a95ca32ae1
parent b8263e42d1
commit a95ca32ae1
12 changed files with 12258 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,4 @@
 draft.md
 react-for-everyone.md
 component.md
-05_Day_Props
+05_Day_Map_List_Keys
--- a/05_Day_Props/05_props.md
+++ b/05_Day_Props/05_props.md
--- a/05_Day_Props/30-days-of-react_boilerplate-props/.gitignore
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/.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*
--- a/05_Day_Props/30-days-of-react_boilerplate-props/README.md
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/README.md
@ -0,0 +1,5 @@
 # 30 Days of React App: Day 3
 In the project directory, you can run to start the project
 ### `npm start`
--- a/05_Day_Props/30-days-of-react_boilerplate-props/package.json
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/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"
    ]
  }
 }
--- a/05_Day_Props/30-days-of-react_boilerplate-props/public/index.html
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/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>
--- a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/asabeneh.jpg
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/src/images/asabeneh.jpg
--- a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/css_logo.png
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/src/images/css_logo.png
--- a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/html_logo.png
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/src/images/html_logo.png
--- a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/react_logo.png
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/src/images/react_logo.png
--- a/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js
@ -0,0 +1,121 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import asabenehImage from './images/asabeneh.jpg'
 // Fuction to show month date year
 const showDate = (time) => {
  const months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ]
  const month = months[time.getMonth()].slice(0, 3)
  const year = time.getFullYear()
  const date = time.getDate()
  return ` ${month} ${date}, ${year}`
 }
 // Header Component
 const Header = ({
  data: {
    welcome,
    title,
    subtitle,
    author: { firstName, lastName },
    date,
  },
 }) => {
  return (
    <header>
      <div className='header-wrapper'>
        <h1>{welcome}</h1>
        <h2>{title}</h2>
        <h3>{subtitle}</h3>
        <p>
          {firstName} {lastName}
        </p>
        <small>{showDate(date)}</small>
      </div>
    </header>
  )
 }
 // TechList Component
 const TechList = ({ techs }) => {
  const techList = techs.map((tech) => <li key={tech}>{tech}</li>)
  return techList
 }
 // User Card Component
 const UserCard = ({ user: { firstName, lastName, image } }) => (
  <div className='user-card'>
    <img src={image} alt={firstName} />
    <h2>
      {firstName}
      {lastName}
    </h2>
  </div>
 )
 // Main Component
 const Main = ({ user, techs }) => (
  <main>
    <div className='main-wrapper'>
      <p>Prerequisite to get started react.js:</p>
      <ul>
        <TechList techs={techs} />
      </ul>
      <UserCard user={user} />
    </div>
  </main>
 )
 // Footer Component
 const Footer = ({ copyRight }) => (
  <footer>
    <div className='footer-wrapper'>
      <p>{copyRight.getFullYear()}</p>
    </div>
  </footer>
 )
 // The App, or the parent or the container component
 // Functional Component
 const App = () => {
  const data = {
    welcome: 'Welcome to 30 Days Of React',
    title: 'Getting Started React',
    subtitle: 'JavaScript Library',
    author: {
      firstName: 'Asabeneh',
      lastName: 'Yetayeh',
    },
    date: new Date(),
  }
  const date = new Date()
  const techs = ['HTML', 'CSS', 'JavaScript']
  // copying the author from data object to user variable using spread operator
  const user = { ...data.author, image: asabenehImage }
  return (
    <div className='app'>
      <Header data={data} />
      <Main user={user} techs={techs} />
      <Footer copyRight={date} />
    </div>
  )
 }
 const rootElement = document.getElementById('root')
 // we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
--- a/05_Day_Props/30-days-of-react_boilerplate-props/yarn.lock
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/yarn.lock