suryazi
5 years ago
committed by
GitHub
commit
0f3f42b859
@ -1,4 +1,8 @@
|
|||||||
draft.md
|
draft.md
|
||||||
react-for-everyone.md
|
react-for-everyone.md
|
||||||
component.md
|
component.md
|
||||||
06_Day_Map_List_Keys
|
08_Day_States
|
||||||
|
09_Day_Conditional_Rendering
|
||||||
|
10_Day_Events
|
||||||
|
11_Day_Forms
|
||||||
|
|
||||||
|
|||||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
@ -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*
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
# 30 Days of React App: Day 3
|
||||||
|
|
||||||
|
In the project directory, you can run to start the project
|
||||||
|
|
||||||
|
### `npm start`
|
||||||
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -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 },
|
||||||
|
]
|
||||||
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 40 KiB |
@ -0,0 +1,49 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
|
||||||
|
|
||||||
|
// importing data
|
||||||
|
|
||||||
|
import { countriesData } from './data/countries'
|
||||||
|
import { tenMostHighestPopulations } from './data/ten_most_highest_populations'
|
||||||
|
|
||||||
|
const countries = [
|
||||||
|
{ name: 'Finland', city: 'Helsinki' },
|
||||||
|
{ name: 'Sweden', city: 'Stockholm' },
|
||||||
|
{ name: 'Denmark', city: 'Copenhagen' },
|
||||||
|
{ name: 'Norway', city: 'Oslo' },
|
||||||
|
{ name: 'Iceland', city: 'Reykjavík' },
|
||||||
|
]
|
||||||
|
|
||||||
|
// Country component
|
||||||
|
const Country = ({ country: { name, city } }) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>{name}</h1>
|
||||||
|
<small>{city}</small>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// countries component
|
||||||
|
const Countries = ({ countries }) => {
|
||||||
|
const countryList = countries.map((country) => (
|
||||||
|
<Country key={country.name} country={country} />
|
||||||
|
))
|
||||||
|
return <div>{countryList}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
// The App, or the parent or the container component
|
||||||
|
// Functional Component
|
||||||
|
const App = () => {
|
||||||
|
return (
|
||||||
|
<div className='app'>
|
||||||
|
<div>
|
||||||
|
<h1>Countries List</h1>
|
||||||
|
<Countries countries={countries} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<App />, rootElement)
|
||||||
File diff suppressed because it is too large
Load Diff
@ -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*
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
# 30 Days of React App: Day 3
|
||||||
|
|
||||||
|
In the project directory, you can run to start the project
|
||||||
|
|
||||||
|
### `npm start`
|
||||||
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -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 },
|
||||||
|
]
|
||||||
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 40 KiB |
@ -0,0 +1,194 @@
|
|||||||
|
// index.js
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
import asabenehImage from './images/asabeneh.jpg'
|
||||||
|
|
||||||
|
// Fuction to show month date year
|
||||||
|
|
||||||
|
// User Card Component
|
||||||
|
const UserCard = ({ user: { firstName, lastName, image } }) => (
|
||||||
|
<div className='user-card'>
|
||||||
|
<img src={image} alt={firstName} />
|
||||||
|
<h2>
|
||||||
|
{firstName}
|
||||||
|
{lastName}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
// A button component
|
||||||
|
const Button = ({ text, onClick, style }) => (
|
||||||
|
<button style={style} onClick={onClick}>
|
||||||
|
{text}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
|
||||||
|
// CSS styles in JavaScript Object
|
||||||
|
const buttonStyles = {
|
||||||
|
backgroundColor: '#61dbfb',
|
||||||
|
padding: 10,
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: 5,
|
||||||
|
margin: 3,
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: 18,
|
||||||
|
color: 'white',
|
||||||
|
}
|
||||||
|
|
||||||
|
// class based component
|
||||||
|
class Header extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
// the code inside the constructor run before any other code
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
console.log(this.props.data)
|
||||||
|
const {
|
||||||
|
welcome,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
author: { firstName, lastName },
|
||||||
|
date,
|
||||||
|
} = this.props.data
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<div className='header-wrapper'>
|
||||||
|
<h1>{welcome}</h1>
|
||||||
|
<h2>{title}</h2>
|
||||||
|
<h3>{subtitle}</h3>
|
||||||
|
<p>
|
||||||
|
{firstName} {lastName}
|
||||||
|
</p>
|
||||||
|
<small>{date}</small>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TechList Component
|
||||||
|
// class base component
|
||||||
|
class TechList extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { techs } = this.props
|
||||||
|
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
|
||||||
|
return techsFormatted
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main Component
|
||||||
|
// Class Component
|
||||||
|
class Main extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<div className='main-wrapper'>
|
||||||
|
<p>Prerequisite to get started react.js:</p>
|
||||||
|
<ul>
|
||||||
|
<TechList techs={this.props.techs} />
|
||||||
|
</ul>
|
||||||
|
<UserCard user={this.props.user} />
|
||||||
|
<Button
|
||||||
|
text='Greet People'
|
||||||
|
onClick={this.props.greetPeople}
|
||||||
|
style={buttonStyles}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
text='Show Time'
|
||||||
|
onClick={this.props.handleTime}
|
||||||
|
style={buttonStyles}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footer Component
|
||||||
|
// Class component
|
||||||
|
class Footer extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<footer>
|
||||||
|
<div className='footer-wrapper'>
|
||||||
|
<p>Copyright {this.props.date.getFullYear()}</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
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}`
|
||||||
|
}
|
||||||
|
handleTime = () => {
|
||||||
|
alert(this.showDate(new Date()))
|
||||||
|
}
|
||||||
|
greetPeople = () => {
|
||||||
|
alert('Welcome to 30 Days Of React Challenge, 2020')
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const data = {
|
||||||
|
welcome: 'Welcome to 30 Days Of React',
|
||||||
|
title: 'Getting Started React',
|
||||||
|
subtitle: 'JavaScript Library',
|
||||||
|
author: {
|
||||||
|
firstName: 'Asabeneh',
|
||||||
|
lastName: 'Yetayeh',
|
||||||
|
},
|
||||||
|
date: 'Oct 7, 2020',
|
||||||
|
}
|
||||||
|
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}
|
||||||
|
handleTime={this.handleTime}
|
||||||
|
greetPeople={this.greetPeople}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Footer date={new Date()} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<App />, rootElement)
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,838 @@
|
|||||||
|
<div align="center">
|
||||||
|
<h1> 30 Days Of React: Class 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 6](../06_Day_Map_List_Keys/06_map_list_keys.md) | [Day 8 >>](../07_Day_Class_Components/07_class_components.md)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- [Class Components](#class-components)
|
||||||
|
- [Accessing props in Class components](#accessing-props-in-class-components)
|
||||||
|
- [Methods in Class based component](#methods-in-class-based-component)
|
||||||
|
- [Exercises](#exercises)
|
||||||
|
- [Exercises: Level 1](#exercises-level-1)
|
||||||
|
- [Exercises: Level 2](#exercises-level-2)
|
||||||
|
|
||||||
|
# Class Components
|
||||||
|
|
||||||
|
In the previous sections, we have covered JSX, functional component and props. In this section, we will cover class components or statefull component. Only class based components used to have state and life cycle methods. However, after React version 16.8.0 functional components can have state and life cycle using React Hooks. In 30 Days Of React challenge, we will cover React before 16.8.0 and after, that mean both old and newest version. There are lots of codes written in older version and at some point it may need migration. In addition, to understand React very well someone has to understand class based component too.
|
||||||
|
|
||||||
|
All the previous components are functional components. Let us make also class based component. Class based component is made using JavaScript class and it inherits from react Component. Let us learn how to make a class based component by converting all the functional components we made previously. It is not important to convert all but we are converting them for the sake of learning how to change functional components to class components.
|
||||||
|
|
||||||
|
```js
|
||||||
|
// Pure JavaScript class and child
|
||||||
|
// Imagine this what we import from React package
|
||||||
|
class Component {
|
||||||
|
constructor(props) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// This how we make class based components by inheriting from the parent
|
||||||
|
class Child extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Functional React component
|
||||||
|
|
||||||
|
```js
|
||||||
|
// index.js
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
// Header Component
|
||||||
|
// Functional component
|
||||||
|
const Header = () => (
|
||||||
|
<header>
|
||||||
|
<div className='header-wrapper'>
|
||||||
|
<h1>Welcome to 30 Days Of React</h1>
|
||||||
|
<h2>Getting Started React</h2>
|
||||||
|
<h3>JavaScript Library</h3>
|
||||||
|
<p>Asabeneh Yetayeh</p>
|
||||||
|
<small>Oct 6, 2020</small>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<Header />, rootElement)
|
||||||
|
```
|
||||||
|
|
||||||
|
Class based React component is a child of React.Component and it has a built-in render method and it may have a constructor.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//index.js
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
|
||||||
|
// class based component
|
||||||
|
class Header extends React.Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<div className='header-wrapper'>
|
||||||
|
<h1>Welcome to 30 Days Of React</h1>
|
||||||
|
<h2>Getting Started React</h2>
|
||||||
|
<h3>JavaScript Library</h3>
|
||||||
|
<p>Asabeneh Yetayeh</p>
|
||||||
|
<small>Oct 7, 2020</small>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<Header />, rootElement)
|
||||||
|
```
|
||||||
|
|
||||||
|
Let's see the above component with a constructor
|
||||||
|
|
||||||
|
```js
|
||||||
|
//index.js
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
|
||||||
|
// class base component
|
||||||
|
class Header extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
// the code inside the constructor run before any other code
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<div className='header-wrapper'>
|
||||||
|
<h1>Welcome to 30 Days Of React</h1>
|
||||||
|
<h2>Getting Started React</h2>
|
||||||
|
<h3>JavaScript Library</h3>
|
||||||
|
<p>Asabeneh Yetayeh</p>
|
||||||
|
<small>Oct 7, 2020</small>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<Header />, rootElement)
|
||||||
|
```
|
||||||
|
|
||||||
|
Let's change all the functional component to class based components
|
||||||
|
|
||||||
|
```js
|
||||||
|
// TechList Component
|
||||||
|
// functional component
|
||||||
|
const TechList = () => {
|
||||||
|
const techs = ['HTML', 'CSS', 'JavaScript']
|
||||||
|
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
|
||||||
|
return techsFormatted
|
||||||
|
}
|
||||||
|
|
||||||
|
// TechList Component
|
||||||
|
// class base component
|
||||||
|
class TechList extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const techs = ['HTML', 'CSS', 'JavaScript']
|
||||||
|
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
|
||||||
|
return techsFormatted
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main Component
|
||||||
|
// Functional Component
|
||||||
|
const Main = () => (
|
||||||
|
<main>
|
||||||
|
<div className='main-wrapper'>
|
||||||
|
<p>Prerequisite to get started react.js:</p>
|
||||||
|
<ul>
|
||||||
|
<TechList />
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
|
||||||
|
// Main Component
|
||||||
|
// Class Component
|
||||||
|
class Main extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<div className='main-wrapper'>
|
||||||
|
<p>Prerequisite to get started react.js:</p>
|
||||||
|
<ul>
|
||||||
|
<TechList />
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footer Component
|
||||||
|
// Functional component
|
||||||
|
const Footer = () => (
|
||||||
|
<footer>
|
||||||
|
<div className='footer-wrapper'>
|
||||||
|
<p>Copyright 2020</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
|
||||||
|
// Footer Component
|
||||||
|
// Class component
|
||||||
|
class Footer extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<footer>
|
||||||
|
<div className='footer-wrapper'>
|
||||||
|
<p>Copyright 2020</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// The App, or the parent or the container component
|
||||||
|
// Functional Component
|
||||||
|
const App = () => (
|
||||||
|
<div className='app'>
|
||||||
|
<Header />
|
||||||
|
<Main />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
// The App, or the parent or the container component
|
||||||
|
// Class Component
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='app'>
|
||||||
|
<Header />
|
||||||
|
<Main />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Let's put all the class based components together in one file.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//index.js
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
|
||||||
|
// class base component
|
||||||
|
class Header extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
// the code inside the constructor run before any other code
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<div className='header-wrapper'>
|
||||||
|
<h1>Welcome to 30 Days Of React</h1>
|
||||||
|
<h2>Getting Started React</h2>
|
||||||
|
<h3>JavaScript Library</h3>
|
||||||
|
<p>Asabeneh Yetayeh</p>
|
||||||
|
<small>Oct 7, 2020</small>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TechList Component
|
||||||
|
// class base component
|
||||||
|
class TechList extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const techs = ['HTML', 'CSS', 'JavaScript']
|
||||||
|
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
|
||||||
|
return techsFormatted
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main Component
|
||||||
|
// Class Component
|
||||||
|
class Main extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<div className='main-wrapper'>
|
||||||
|
<p>Prerequisite to get started react.js:</p>
|
||||||
|
<ul>
|
||||||
|
<TechList />
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footer Component
|
||||||
|
// Class component
|
||||||
|
class Footer extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<footer>
|
||||||
|
<div className='footer-wrapper'>
|
||||||
|
<p>Copyright 2020</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// The App, or the parent or the container component
|
||||||
|
// Class Component
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='app'>
|
||||||
|
<Header />
|
||||||
|
<Main />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<App />, rootElement)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Accessing props in Class components
|
||||||
|
|
||||||
|
We stated that props is a means to send data from on component to another or we can call it that props is a data carrier. Therefore, we should handle props in class based component too. We can access props of a class based component using the keyword _this_. See the example below.
|
||||||
|
|
||||||
|
```js
|
||||||
|
// index.js
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
|
||||||
|
// class based component
|
||||||
|
class Header extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
// the code inside the constructor run before any other code
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<div className='header-wrapper'>
|
||||||
|
<h1>{this.props.data.welcome}</h1>
|
||||||
|
<h2>{this.props.data.title}</h2>
|
||||||
|
<h3>
|
||||||
|
{this.props.data.author.firstName} {this.props.data.author.lastName}
|
||||||
|
</h3>
|
||||||
|
<small>{this.props.data.date}</small>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const App = () => {
|
||||||
|
const data = {
|
||||||
|
welcome: 'Welcome to 30 Days Of React',
|
||||||
|
title: 'Getting Started React',
|
||||||
|
subtitle: 'JavaScript Library',
|
||||||
|
author: {
|
||||||
|
firstName: 'Asabeneh',
|
||||||
|
lastName: 'Yetayeh',
|
||||||
|
},
|
||||||
|
date: 'Oct 7, 2020',
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='app'>
|
||||||
|
<Header data={data} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<App />, rootElement)
|
||||||
|
```
|
||||||
|
|
||||||
|
As you can see in the above example, to get the data out from props we have write _props.data_ every time. We can avoid this repetition using destructuring.
|
||||||
|
|
||||||
|
```js
|
||||||
|
// index.js
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
|
||||||
|
// class based component
|
||||||
|
class Header extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
// the code inside the constructor run before any other code
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
console.log(this.props.data)
|
||||||
|
const {
|
||||||
|
welcome,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
author: { firstName, lastName },
|
||||||
|
date,
|
||||||
|
} = this.props.data
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<div className='header-wrapper'>
|
||||||
|
<h1>{welcome}</h1>
|
||||||
|
<h2>{title}</h2>
|
||||||
|
<h3>{subtitle}</h3>
|
||||||
|
<p>
|
||||||
|
{firstName} {lastName}
|
||||||
|
</p>
|
||||||
|
<small>{date}</small>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const App = () => {
|
||||||
|
const data = {
|
||||||
|
welcome: 'Welcome to 30 Days Of React',
|
||||||
|
title: 'Getting Started React',
|
||||||
|
subtitle: 'JavaScript Library',
|
||||||
|
author: {
|
||||||
|
firstName: 'Asabeneh',
|
||||||
|
lastName: 'Yetayeh',
|
||||||
|
},
|
||||||
|
date: 'Oct 6, 2020',
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='app'>
|
||||||
|
<Header data={data} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<App />, rootElement)
|
||||||
|
```
|
||||||
|
|
||||||
|
As you can see, the above code cleaner than the previous. Now, let's clean all the components we have and put all together.
|
||||||
|
|
||||||
|
```js
|
||||||
|
// index.js
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
|
||||||
|
// class based component
|
||||||
|
class Header extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
// the code inside the constructor run before any other code
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
console.log(this.props.data)
|
||||||
|
const {
|
||||||
|
welcome,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
author: { firstName, lastName },
|
||||||
|
date,
|
||||||
|
} = this.props.data
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<div className='header-wrapper'>
|
||||||
|
<h1>{welcome}</h1>
|
||||||
|
<h2>{title}</h2>
|
||||||
|
<h3>{subtitle}</h3>
|
||||||
|
<p>
|
||||||
|
{firstName} {lastName}
|
||||||
|
</p>
|
||||||
|
<small>{date}</small>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TechList Component
|
||||||
|
// class base component
|
||||||
|
class TechList extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { techs } = this.props
|
||||||
|
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
|
||||||
|
return techsFormatted
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main Component
|
||||||
|
// Class Component
|
||||||
|
class Main extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<div className='main-wrapper'>
|
||||||
|
<p>Prerequisite to get started react.js:</p>
|
||||||
|
<ul>
|
||||||
|
<TechList techs={this.props.techs} />
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footer Component
|
||||||
|
// Class component
|
||||||
|
class Footer extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<footer>
|
||||||
|
<div className='footer-wrapper'>
|
||||||
|
<p>Copyright {this.props.date.getFullYear()}</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
render() {
|
||||||
|
const data = {
|
||||||
|
welcome: 'Welcome to 30 Days Of React',
|
||||||
|
title: 'Getting Started React',
|
||||||
|
subtitle: 'JavaScript Library',
|
||||||
|
author: {
|
||||||
|
firstName: 'Asabeneh',
|
||||||
|
lastName: 'Yetayeh',
|
||||||
|
},
|
||||||
|
date: 'Oct 7, 2020',
|
||||||
|
}
|
||||||
|
const techs = ['HTML', 'CSS', 'JavaScript']
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='app'>
|
||||||
|
<Header data={data} />
|
||||||
|
<Main techs={techs} />
|
||||||
|
<Footer date={new Date()} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<App />, rootElement)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Methods in Class based component
|
||||||
|
|
||||||
|
We access methods in class based component. Most of the time, we write different methods on the parent component and we pass them to child components. Let's see the implementation.
|
||||||
|
|
||||||
|
Let's add a method on this component.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//index.js
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
|
||||||
|
// class based component
|
||||||
|
class Header extends React.Component {
|
||||||
|
greetPeople = () => {
|
||||||
|
alert('Welcome to 30 Days Of React Challenge, 2020')
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<div className='header-wrapper'>
|
||||||
|
<h1>Welcome to 30 Days Of React</h1>
|
||||||
|
<h2>Getting Started React</h2>
|
||||||
|
<h3>JavaScript Library</h3>
|
||||||
|
<p>Asabeneh Yetayeh</p>
|
||||||
|
<small>Oct 7, 2020</small>
|
||||||
|
<button onClick={this.greetPeople}> Greet </button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<Header />, rootElement)
|
||||||
|
```
|
||||||
|
|
||||||
|
The invoking or calling of the method triggers when the event occurs. Therefore, whenever you pass a method to an event listener do not invoke the method.
|
||||||
|
|
||||||
|
Now, let's the code we had add all the necessary methods.
|
||||||
|
|
||||||
|
```js
|
||||||
|
// index.js
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
import asabenehImage from './images/asabeneh.jpg'
|
||||||
|
|
||||||
|
// Fuction to show month date year
|
||||||
|
|
||||||
|
// User Card Component
|
||||||
|
const UserCard = ({ user: { firstName, lastName, image } }) => (
|
||||||
|
<div className='user-card'>
|
||||||
|
<img src={image} alt={firstName} />
|
||||||
|
<h2>
|
||||||
|
{firstName}
|
||||||
|
{lastName}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
// A button component
|
||||||
|
const Button = ({ text, onClick, style }) => (
|
||||||
|
<button style={style} onClick={onClick}>
|
||||||
|
{text}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
|
||||||
|
// CSS styles in JavaScript Object
|
||||||
|
const buttonStyles = {
|
||||||
|
backgroundColor: '#61dbfb',
|
||||||
|
padding: 10,
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: 5,
|
||||||
|
margin: 3,
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: 18,
|
||||||
|
color: 'white',
|
||||||
|
}
|
||||||
|
|
||||||
|
// class based component
|
||||||
|
class Header extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
// the code inside the constructor run before any other code
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
console.log(this.props.data)
|
||||||
|
const {
|
||||||
|
welcome,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
author: { firstName, lastName },
|
||||||
|
date,
|
||||||
|
} = this.props.data
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<div className='header-wrapper'>
|
||||||
|
<h1>{welcome}</h1>
|
||||||
|
<h2>{title}</h2>
|
||||||
|
<h3>{subtitle}</h3>
|
||||||
|
<p>
|
||||||
|
{firstName} {lastName}
|
||||||
|
</p>
|
||||||
|
<small>{date}</small>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TechList Component
|
||||||
|
// class base component
|
||||||
|
class TechList extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { techs } = this.props
|
||||||
|
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
|
||||||
|
return techsFormatted
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main Component
|
||||||
|
// Class Component
|
||||||
|
class Main extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<div className='main-wrapper'>
|
||||||
|
<p>Prerequisite to get started react.js:</p>
|
||||||
|
<ul>
|
||||||
|
<TechList techs={this.props.techs} />
|
||||||
|
</ul>
|
||||||
|
<UserCard user={this.props.user} />
|
||||||
|
<Button
|
||||||
|
text='Greet People'
|
||||||
|
onClick={this.props.greetPeople}
|
||||||
|
style={buttonStyles}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
text='Show Time'
|
||||||
|
onClick={this.props.handleTime}
|
||||||
|
style={buttonStyles}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footer Component
|
||||||
|
// Class component
|
||||||
|
class Footer extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<footer>
|
||||||
|
<div className='footer-wrapper'>
|
||||||
|
<p>Copyright {this.props.date.getFullYear()}</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
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}`
|
||||||
|
}
|
||||||
|
handleTime = () => {
|
||||||
|
alert(this.showDate(new Date()))
|
||||||
|
}
|
||||||
|
greetPeople = () => {
|
||||||
|
alert('Welcome to 30 Days Of React Challenge, 2020')
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const data = {
|
||||||
|
welcome: 'Welcome to 30 Days Of React',
|
||||||
|
title: 'Getting Started React',
|
||||||
|
subtitle: 'JavaScript Library',
|
||||||
|
author: {
|
||||||
|
firstName: 'Asabeneh',
|
||||||
|
lastName: 'Yetayeh',
|
||||||
|
},
|
||||||
|
date: 'Oct 7, 2020',
|
||||||
|
}
|
||||||
|
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}
|
||||||
|
handleTime={this.handleTime}
|
||||||
|
greetPeople={this.greetPeople}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Footer date={new Date()} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root')
|
||||||
|
ReactDOM.render(<App />, rootElement)
|
||||||
|
```
|
||||||
|
|
||||||
|
Most of the time the container or the parent component can be written as class component and others as functional or presentational components. Data usually flows from parent components to child component and it is unidirectional. However, the latest version of react can allow us to write every component in our application only with functional components. This was impossible in previous versions.
|
||||||
|
In next section, we will cover state which is the heart of React. State allows React component to rerender when whenever there is a change in state.
|
||||||
|
|
||||||
|
# Exercises
|
||||||
|
|
||||||
|
## Exercises: Level 1
|
||||||
|
|
||||||
|
1. How do you write a pure JavaScript function
|
||||||
|
2. What is inheritance and how do you make a child from a parent class?
|
||||||
|
3. What is class based React component ?
|
||||||
|
4. What is the difference between functional React component and class based React component ?
|
||||||
|
5. What is the use cases of class based component ?
|
||||||
|
6. What is React life cycle ? (not covered yet) ?
|
||||||
|
7. What is state in React ?
|
||||||
|
|
||||||
|
## Exercises: Level 2
|
||||||
|
|
||||||
|
Learn more about class based component by changing previous days exercises to class based components
|
||||||
|
|
||||||
|
🎉 CONGRATULATIONS ! 🎉
|
||||||
|
|
||||||
|
[<< Day 6](../06_Day_Map_List_Keys/06_map_list_keys.md) | [Day 8 >>](../07_Day_Class_Components/07_class_components.md)
|
||||||
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 92 KiB |
Loading…
Reference in new issue