msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

day_5 has been cleaned

Browse Source
pull/53/head
Asabeneh 4 years ago
parent 6eaa930c97
commit 02516c4aed
4 changed files with 69 additions and 96 deletions
Show Stats Download Patch File Download Diff File

6
04_Day_Component/04_components.md
Unescape View File

@ -88,7 +88,7 @@ class Parent {
}
}
const p1 = Parent('Asabeneh', 'Yetayeh', 'Finland', 'FullStack Developer')
const p1 = new Parent('Asabeneh', 'Yetayeh', 'Finland', 'FullStack Developer')
class Child extends Parent {
constructor(firstName, lastName, country, title, skills) {
@ -105,12 +105,14 @@ class Child extends Parent {
}
}
const skills = ['HTML', 'CSS', 'JS', 'React']
const child = new Child(
'Asabeneh',
'Yetayeh',
'Finland',
'FullStack Developer',
['HTML', 'CSS', 'JS', 'React']
skills
)
```

113
05_Day_Props/05_props.md
Unescape View File

@ -976,6 +976,25 @@ const UserCard = ({ user: { firstName, lastName, image } }) => (
</div>
)
// A button component
const Button = ({ text, onClick, style }) => (
<button style={style} onClick={onClick}>
{text}
</button>
)
const buttonStyles = {
backgroundColor: '#61dbfb',
padding: 10,
border: 'none',
borderRadius: 5,
margin: 3,
cursor: 'pointer',
fontSize: 18,
color: 'white',
}
// Main Component
const Main = ({ user, techs, greetPeople, handleTime }) => (
<main>
@ -985,8 +1004,8 @@ const Main = ({ user, techs, greetPeople, handleTime }) => (
<TechList techs={techs} />
</ul>
<UserCard user={user} />
<Button text='Greet People' onClick={greetPeople} />
<Button text='Show Time' onClick={handleTime} />
<Button text='Greet People' onClick={greetPeople} style={buttonStyles} />
<Button text='Show Time' onClick={handleTime} style={buttonStyles} />
</div>
</main>
)
@ -1011,7 +1030,7 @@ const App = () => {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
},
date: new Date(),
date: new Date(), // date needs to be formatted to a human readable format
}
const date = new Date()
const techs = ['HTML', 'CSS', 'JavaScript']
@ -1043,94 +1062,6 @@ const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
```
```js
import React from 'react'
import ReactDOM from 'react-dom'
const welcome = 'Welcome to 30 Days Of React'
const title = 'Getting Started React'
const subtitle = 'JavaScript Library'
const author = {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
}
const date = 'Oct 4, 2020'
const copyRight = 'Copyright 2020'
const techs = ['HTML', 'CSS', 'JavaScript']
// Header Component
const Header = (props) => (
<header>
<div className='header-wrapper'>
<h1>{props.title}</h1>
<h2>{props.subtitle}</h2>
<h3>
{props.author.firstName} {props.author.lastName}
</h3>
<p>{props.date}</p>
</div>
</header>
)
// User Card Component
const UserCard = ({ firstName, lastName, image }) => (
<div className='user-card'>
<img src={image} alt={firstName} />
<h2>
{firstName}
{lastName}
</h2>
</div>
)
// TechList Component
const TechList = (props) => {
const techsFormatted = props.techs.map((tech) => <li key={tech}>{tech}</li>)
return techsFormatted
}
// Main Component
const Main = () => (
<main>
<div className='main-wrapper'>
<p>Prerequisite to get started react.js:</p>
<ul>
<TechList techs={techs} />
</ul>
</div>
</main>
)
// Footer Component
const Footer = (props) => (
<footer>
<div className='footer-wrapper'>
<p>{props.copyRight}</p>
</div>
</footer>
)
// The App, or the parent or the container component
const App = () => (
<div className='app'>
<Header
welcome={welcome}
title={title}
subtitle={subtitle}
author={author}
date={date}
/>
<Main />
<Footer copyRight={copyRight} />
</div>
)
const rootElement = document.getElementById('root')
// we render the JSX element using the ReactDOM package
ReactDOM.render(<App />, rootElement)
```
## propTypes
The propTypes package help as to assign the data types of the props we passed to a component.

21
05_Day_Props/30-days-of-react_boilerplate-props/src/index.js
Unescape View File

@ -70,7 +70,22 @@ const UserCard = ({ user: { firstName, lastName, image } }) => (
// A button component
const Button = ({ text, onClick }) => <button onClick={onClick}>{text}</button>
const Button = ({ text, onClick, style }) => (
<button style={style} onClick={onClick}>
{text}
</button>
)
const buttonStyles = {
backgroundColor: '#61dbfb',
padding: 10,
border: 'none',
borderRadius: 5,
margin: 3,
cursor: 'pointer',
fontSize: 18,
color: 'white',
}
// Main Component
const Main = ({ user, techs, greetPeople, handleTime }) => (
@ -81,8 +96,8 @@ const Main = ({ user, techs, greetPeople, handleTime }) => (
<TechList techs={techs} />
</ul>
<UserCard user={user} />
<Button text='Greet People' onClick={greetPeople} />
<Button text='Show Time' onClick={handleTime} />
<Button text='Greet People' onClick={greetPeople} style={buttonStyles} />
<Button text='Show Time' onClick={handleTime} style={buttonStyles} />
</div>
</main>
)

25
06_Day_Map_List_Keys/05_map_list_keys.md
Unescape View File

@ -0,0 +1,25 @@
<div align="center">
<h1> 30 Days Of React: Components </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 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md)
![30 Days of React banner](../images/30_days_of_react_banner_day_4.jpg)
# Mapping lists
Before we jump into mapping an array in React, lets see what we do it in pure JavaScritp.
[<< Day 4](../04_Day_Component/04_components.md) | [Day 6 >>]()
Write Preview
Loading…
Cancel
Save