Asabeneh
5 years ago
parent
513af28502
commit
62cea63568
@ -0,0 +1,490 @@
|
||||
<div align="center">
|
||||
<h1> 30 Days Of React: Statet</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 7](../07_Day_Class_Components/07_class_components.md) | [Day 9 >>](../09_Day_Conditional_Rendering/09_conditional_rendering.md)
|
||||
|
||||
|
||||
|
||||
- [State](#state)
|
||||
- [Exercises](#exercises)
|
||||
- [Exercise: Level 1](#exercise-level-1)
|
||||
- [Exercise: Level 2](#exercise-level-2)
|
||||
|
||||
# State
|
||||
|
||||
What is state ? The English meaning of state is _the particular condition that someone or something is in at a specific time_.
|
||||
|
||||
Let us see some states being something - Are you happy or sad? - Is light on or off ? Is present or absent ? - Is full or empty ? For instance, I am happy because I am enjoying creating 30 Days Of React challenge. I believe that you are happy too.
|
||||
|
||||
State is an object in react which let the component re-render when data changes. We do not directly change or mutate the state but we use the _setState()_ method. As you can see below in the state object we have count with initial value 0. We can access the state object using _this.state_ and the property name. See the example below.
|
||||
|
||||
```js
|
||||
// index.js
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
class App extends React.Component {
|
||||
// declaring state
|
||||
state = {
|
||||
count: 0,
|
||||
}
|
||||
render() {
|
||||
// accessing the state value
|
||||
const count = this.state.count
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>{count} </h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
If you run the above code you will see zero on the browser. We can increase or decrease the value the state by changing the value of the state using JavaScript method.
|
||||
|
||||
Now, let's add some methods which increase or decrease the value of count by clicking a button. Let us add a button to increase and a button to decrease the value of count. To set the state we use react method _this.setState_. See the example below
|
||||
|
||||
```js
|
||||
// index.js
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
class App extends React.Component {
|
||||
// declaring state
|
||||
state = {
|
||||
count: 0,
|
||||
}
|
||||
render() {
|
||||
// accessing the state value
|
||||
const count = this.state.count
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>{count} </h1>
|
||||
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
|
||||
Add One
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
If you understand the above example, adding minus one method will be easy. Let us add the minus one method on the click event.
|
||||
|
||||
```js
|
||||
// index.js
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
class App extends React.Component {
|
||||
// declaring state
|
||||
state = {
|
||||
count: 0,
|
||||
}
|
||||
render() {
|
||||
// accessing the state value
|
||||
const count = this.state.count
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>{count} </h1>
|
||||
|
||||
<div>
|
||||
<button
|
||||
onClick={() => this.setState({ count: this.state.count + 1 })}
|
||||
>
|
||||
Add One
|
||||
</button>{' '}
|
||||
<button
|
||||
onClick={() => this.setState({ count: this.state.count - 1 })}
|
||||
>
|
||||
Minus One
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
Both button work well, but we need to re-structure the code well. Let us create separate methods in the component.
|
||||
If you want to see it live check it [here][https://codepen.io/asabeneh/full/jjdwyom]
|
||||
|
||||
```js
|
||||
// index.js
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
class App extends React.Component {
|
||||
// declaring state
|
||||
state = {
|
||||
count: 0,
|
||||
}
|
||||
// method which add one to the state
|
||||
|
||||
addOne = () => {
|
||||
this.setState({ count: this.state.count + 1 })
|
||||
}
|
||||
|
||||
// method which subtract one to the state
|
||||
minusOne = () => {
|
||||
this.setState({ count: this.state.count - 1 })
|
||||
}
|
||||
render() {
|
||||
// accessing the state value
|
||||
const count = this.state.count
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>{count} </h1>
|
||||
|
||||
<div>
|
||||
<button className='btn btn-add' onClick={this.addOne}>
|
||||
+1
|
||||
</button>{' '}
|
||||
<button className='btn btn-minus' onClick={this.minusOne}>
|
||||
-1
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
Let us do more example about state, in the following example we will develop small application which shows either a dog or cat.
|
||||
We can start by setting the initial state with cat then when it is clicked it will show dog and alternatively. We need one method which changes the animal alternatively. See the code below. If you want to see live click [here](https://codepen.io/Asabeneh/full/LYVxKpq).
|
||||
|
||||
```js
|
||||
// index.js
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
class App extends React.Component {
|
||||
// declaring state
|
||||
state = {
|
||||
image: 'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg',
|
||||
}
|
||||
changeAnimal = () => {
|
||||
let dogURL =
|
||||
'https://static.onecms.io/wp-content/uploads/sites/12/2015/04/dogs-pembroke-welsh-corgi-400x400.jpg'
|
||||
let catURL =
|
||||
'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg'
|
||||
let image = this.state.image === catURL ? dogURL : catURL
|
||||
this.setState({ image })
|
||||
}
|
||||
|
||||
render() {
|
||||
// accessing the state value
|
||||
const count = this.state.count
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>30 Days Of React</h1>
|
||||
<div className='animal'>
|
||||
<img src={this.state.image} alt='animal' />
|
||||
</div>
|
||||
|
||||
<button onClick={this.changeAnimal} class='btn btn-add'>
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
Now, let's put all the codes we have so far and also let's implement state when it is necessary.
|
||||
|
||||
```js
|
||||
// index.js
|
||||
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}`
|
||||
}
|
||||
|
||||
// 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 style={this.props.styles}>
|
||||
<div className='header-wrapper'>
|
||||
<h1>{welcome}</h1>
|
||||
<h2>{title}</h2>
|
||||
<h3>{subtitle}</h3>
|
||||
<p>
|
||||
{firstName} {lastName}
|
||||
</p>
|
||||
<small>{date}</small>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const Count = ({ count, addOne, minusOne }) => (
|
||||
<div>
|
||||
<h1>{count} </h1>
|
||||
<div>
|
||||
<Button text='+1' onClick={addOne} style={buttonStyles} />
|
||||
<Button text='-1' onClick={minusOne} style={buttonStyles} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
// 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}
|
||||
/>
|
||||
<Button
|
||||
text='Change Background'
|
||||
onClick={this.props.changeBackground}
|
||||
style={buttonStyles}
|
||||
/>
|
||||
<Count
|
||||
count={this.props.count}
|
||||
addOne={this.props.addOne}
|
||||
minusOne={this.props.minusOne}
|
||||
/>
|
||||
</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 {
|
||||
state = {
|
||||
count: 0,
|
||||
styles: {
|
||||
backgroundColor: '',
|
||||
color: '',
|
||||
},
|
||||
}
|
||||
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}`
|
||||
}
|
||||
addOne = () => {
|
||||
this.setState({ count: this.state.count + 1 })
|
||||
}
|
||||
|
||||
// method which subtract one to the state
|
||||
minusOne = () => {
|
||||
this.setState({ count: this.state.count - 1 })
|
||||
}
|
||||
handleTime = () => {
|
||||
alert(this.showDate(new Date()))
|
||||
}
|
||||
greetPeople = () => {
|
||||
alert('Welcome to 30 Days Of React Challenge, 2020')
|
||||
}
|
||||
changeBackground = () => {}
|
||||
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']
|
||||
const date = new Date()
|
||||
// copying the author from data object to user variable using spread operator
|
||||
const user = { ...data.author, image: asabenehImage }
|
||||
|
||||
return (
|
||||
<div className='app'>
|
||||
{this.state.backgroundColor}
|
||||
<Header data={data} />
|
||||
<Main
|
||||
user={user}
|
||||
techs={techs}
|
||||
handleTime={this.handleTime}
|
||||
greetPeople={this.greetPeople}
|
||||
changeBackground={this.changeBackground}
|
||||
addOne={this.addOne}
|
||||
minusOne={this.minusOne}
|
||||
count={this.state.count}
|
||||
/>
|
||||
<Footer date={new Date()} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
I believe now you have a very good understanding of state. After this, we will use state in other sections too because state and props is the core of a react application.
|
||||
|
||||
## Exercises
|
||||
|
||||
### Exercise: Level 1
|
||||
|
||||
1. What was your state today? Are you happy? I hope so. If you manage to make it this far you should be happy.
|
||||
2. What is state in React ?
|
||||
3. What is the difference between props and state in React ?
|
||||
4. How do you access state in a React component ?
|
||||
5. How do you set a set in a React component ?
|
||||
|
||||
### Exercise: Level 2
|
||||
|
||||
1[Change Background](../images/08_day_changing_background_exercise.gif)
|
||||
|
||||
🎉 CONGRATULATIONS ! 🎉
|
||||
|
||||
[<< Day 7](../07_Day_Class_Components/07_class_components.md) | [Day 9 >>](../09_Day_Conditional_Rendering/09_conditional_rendering.md)
|
||||
@ -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,254 @@
|
||||
// index.js
|
||||
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}`
|
||||
}
|
||||
|
||||
// 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 style={this.props.styles}>
|
||||
<div className='header-wrapper'>
|
||||
<h1>{welcome}</h1>
|
||||
<h2>{title}</h2>
|
||||
<h3>{subtitle}</h3>
|
||||
<p>
|
||||
{firstName} {lastName}
|
||||
</p>
|
||||
<small>{date}</small>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const Count = ({ count, addOne, minusOne }) => (
|
||||
<div>
|
||||
<h1>{count} </h1>
|
||||
<div>
|
||||
<Button text='+1' onClick={addOne} style={buttonStyles} />
|
||||
<Button text='-1' onClick={minusOne} style={buttonStyles} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
// 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}
|
||||
/>
|
||||
<Button
|
||||
text='Change Background'
|
||||
onClick={this.props.changeBackground}
|
||||
style={buttonStyles}
|
||||
/>
|
||||
<Count
|
||||
count={this.props.count}
|
||||
addOne={this.props.addOne}
|
||||
minusOne={this.props.minusOne}
|
||||
/>
|
||||
</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 {
|
||||
state = {
|
||||
count: 0,
|
||||
styles: {
|
||||
backgroundColor: '',
|
||||
color: '',
|
||||
},
|
||||
}
|
||||
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}`
|
||||
}
|
||||
addOne = () => {
|
||||
this.setState({ count: this.state.count + 1 })
|
||||
}
|
||||
|
||||
// method which subtract one to the state
|
||||
minusOne = () => {
|
||||
this.setState({ count: this.state.count - 1 })
|
||||
}
|
||||
handleTime = () => {
|
||||
alert(this.showDate(new Date()))
|
||||
}
|
||||
greetPeople = () => {
|
||||
alert('Welcome to 30 Days Of React Challenge, 2020')
|
||||
}
|
||||
changeBackground = () => {}
|
||||
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']
|
||||
const date = new Date()
|
||||
// copying the author from data object to user variable using spread operator
|
||||
const user = { ...data.author, image: asabenehImage }
|
||||
|
||||
return (
|
||||
<div className='app'>
|
||||
{this.state.backgroundColor}
|
||||
<Header data={data} />
|
||||
<Main
|
||||
user={user}
|
||||
techs={techs}
|
||||
handleTime={this.handleTime}
|
||||
greetPeople={this.greetPeople}
|
||||
changeBackground={this.changeBackground}
|
||||
addOne={this.addOne}
|
||||
minusOne={this.minusOne}
|
||||
count={this.state.count}
|
||||
/>
|
||||
<Footer date={new Date()} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 1.4 MiB |
Loading…
Reference in new issue