suryazi
5 years ago
committed by
GitHub
commit
5d5ea053c7
@ -1,5 +1,6 @@
|
||||
draft.md
|
||||
react-for-everyone.md
|
||||
component.md
|
||||
draft
|
||||
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
@ -0,0 +1,519 @@
|
||||
<div align="center">
|
||||
<h1> 30 Days Of React:Component Life Cycles</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 13](../13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md) | [Day 15 >>]()
|
||||
|
||||
|
||||
|
||||
- [Component Life Cycles](#component-life-cycles)
|
||||
- [What is component life cycle](#what-is-component-life-cycle)
|
||||
- [Mounting](#mounting)
|
||||
- [Contructor](#contructor)
|
||||
- [getDerivedStateFromPros](#getderivedstatefrompros)
|
||||
- [Render](#render)
|
||||
- [ComponentDidMount](#componentdidmount)
|
||||
- [Updating](#updating)
|
||||
- [getDerivedStateFromProps](#getderivedstatefromprops)
|
||||
- [shouldComponentUpdate](#shouldcomponentupdate)
|
||||
- [render](#render-1)
|
||||
- [componentDidUpdate](#componentdidupdate)
|
||||
- [Unmounting](#unmounting)
|
||||
- [Exercises](#exercises)
|
||||
- [Exercises: Level 1](#exercises-level-1)
|
||||
- [Exercises: Level 2](#exercises-level-2)
|
||||
- [Exercises: Level 3](#exercises-level-3)
|
||||
|
||||
# Component Life Cycles
|
||||
|
||||
## What is component life cycle
|
||||
|
||||
Component life cycle is the process of mounting, updating and destroying a component in a React application. You can associate a component life cycle with the process of human growth:birth, adult, elderly and death.
|
||||
In React component also a component can be mounted or rendered the first time, can be updated by changing the data and also can be destroyed whenever it is not needed. In React each component has three main phases:
|
||||
|
||||
- Mounting
|
||||
- Updating
|
||||
- Unmounting
|
||||
|
||||
## Mounting
|
||||
|
||||
Rendering or putting React component into the DOM is called mounting. The following built-in methods run in the given order during mounting of a React component.
|
||||
|
||||
1. constructor()
|
||||
2. static getDerivedStateFromProps()
|
||||
3. render()
|
||||
4. componentDidMount()
|
||||
|
||||
When we have been making a class-based component we used a built-in render method and it is required in all class-based components but other methods are optional. See the order of execution of the different methods by running the following snippet of codes.
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log('I am the constructor and I will be the first to run.')
|
||||
this.state = {
|
||||
firstName: '',
|
||||
}
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
console.log(
|
||||
'I am getDerivedStateFromProps and I will be the second to run.'
|
||||
)
|
||||
return null
|
||||
}
|
||||
componentDidMount() {
|
||||
console.log('I am componentDidMount and I will be last to run.')
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log('I am render and I will be the third to run.')
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>React Component Life Cycle</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
### Contructor
|
||||
|
||||
Nowadays we write class based-component without a constructor and we can write the state also outside the constructor. In older version React we the state used be always inside the constructor.
|
||||
|
||||
The constructor() method is executed before any other methods, when component is initiated and it is the place where to set the initial state and other values.
|
||||
In class we use constructor parameter to inherit from parents and in React to the constructor take a props parameter and the super method has to be also called.
|
||||
Look at the snippet of code about constructor and state.
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log('I am the constructor and I will be the first to run.')
|
||||
this.state = {
|
||||
firstName: '',
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>React Component Life Cycle</h1>
|
||||
<h2>The constructor is the first to Run</h2>
|
||||
<p>Author:{this.state.firstName}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
### getDerivedStateFromPros
|
||||
|
||||
As we can understand from the name, this method derives a state from props. The getDerivedStateFromProps() method is called right before rendering the component in the DOM. This the right place to set the state object based on the initial props.
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
const User = ({ firstName }) => (
|
||||
<div>
|
||||
<h1>{firstName}</h1>
|
||||
</div>
|
||||
)
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log('I am the constructor and I will be the first to run.')
|
||||
// we can write state inside or outside the constructor
|
||||
// if is written outside the constructor it does not need the keyword this
|
||||
this.state = {
|
||||
firstName: 'John',
|
||||
}
|
||||
}
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
console.log(
|
||||
'I am getDerivedStateFromProps and I will be the second to run.'
|
||||
)
|
||||
return { firstName: props.firstName }
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>React Component Life Cycle</h1>
|
||||
<h3>getDerivedStateFromProps</h3>
|
||||
<User firstName={this.state.firstName} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App firstName='Asabeneh' />, rootElement)
|
||||
```
|
||||
|
||||
### Render
|
||||
|
||||
The render method is a required method when we create a class-based component. The render method is where we return JSX. The render methods render whenever there is change in state. Do not set your state inside render method.
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
const User = ({ firstName }) => (
|
||||
<div>
|
||||
<h1>{firstName}</h1>
|
||||
</div>
|
||||
)
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log('I am the constructor and I will be the first to run.')
|
||||
// we can write state inside or outside the constructor
|
||||
// if is written outside the constructor it does not need the keyword this
|
||||
this.state = {
|
||||
firstName: 'John',
|
||||
}
|
||||
}
|
||||
render() {
|
||||
// Never do this
|
||||
// Do not reset inside the render method, create a method to reset the state
|
||||
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>React Component Life Cycle</h1>
|
||||
<h3>Render method</h3>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App firstName='Asabeneh' />, rootElement)
|
||||
```
|
||||
|
||||
### ComponentDidMount
|
||||
|
||||
As we can understand the name of the method that this method called after component is render. This a place place to setting time interval and calling API. Look at the following setTimeout implementation in componentDidMount method.
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log('I am the constructor and I will be the first to run.')
|
||||
this.state = {
|
||||
firstName: 'John',
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
console.log('I am componentDidMount and I will be last to run.')
|
||||
// after 3 seconds it resets the state
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
firstName: 'Asabeneh',
|
||||
})
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>React Component Life Cycle</h1>
|
||||
<h2>componentDidMount Method</h2>
|
||||
{this.state.firstName}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
In the above snippet of code, we saw how to implement setTimeout inside a componentDidMount method. In next example, we will implement an API call using fetch.
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log('I am the constructor and I will be the first to run.')
|
||||
this.state = {
|
||||
firstName: 'John',
|
||||
data: [],
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('I am componentDidMount and I will be last to run.')
|
||||
const API_URL = 'https://restcountries.eu/rest/v2/all'
|
||||
fetch(API_URL)
|
||||
.then((response) => {
|
||||
return response.json()
|
||||
})
|
||||
.then((data) => {
|
||||
console.log(data)
|
||||
this.setState({
|
||||
data,
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>React Component Life Cycle</h1>
|
||||
<h1>Calling API</h1>
|
||||
<div>
|
||||
<p>There are {this.state.data.length} countries in the api</p>
|
||||
<div className='countries-wrapper'>
|
||||
{this.state.data.map((country) => (
|
||||
<div>
|
||||
<div>
|
||||
{' '}
|
||||
<img src={country.flag} alt={country.name} />{' '}
|
||||
</div>
|
||||
<div>
|
||||
<h1>{country.name}</h1>
|
||||
<p>Capital: {country.capital}</p>
|
||||
<p>Population: {country.population}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
Sometimes it is better to have a separate method to render the data. See the example below:
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log('I am the constructor and I will be the first to run.')
|
||||
this.state = {
|
||||
firstName: 'John',
|
||||
data: [],
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('I am componentDidMount and I will be last to run.')
|
||||
const API_URL = 'https://restcountries.eu/rest/v2/all'
|
||||
fetch(API_URL)
|
||||
.then((response) => {
|
||||
return response.json()
|
||||
})
|
||||
.then((data) => {
|
||||
console.log(data)
|
||||
this.setState({
|
||||
data,
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
renderCountries = () => {
|
||||
return this.state.data.map((country) => {
|
||||
const languageOrLanguages =
|
||||
country.languages.length > 1 ? 'Langauges' : 'Language'
|
||||
const formatLanguages = country.languages
|
||||
.map(({ name }) => name)
|
||||
.join(', ')
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{' '}
|
||||
<img src={country.flag} alt={country.name} />{' '}
|
||||
</div>
|
||||
<div>
|
||||
<h1>{country.name}</h1>
|
||||
<p>Capital: {country.capital}</p>
|
||||
<p>
|
||||
{languageOrLanguages}: {formatLanguages}
|
||||
</p>
|
||||
<p>Population: {country.population}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>React Component Life Cycle</h1>
|
||||
<h1>Calling API</h1>
|
||||
<div>
|
||||
<p>There are {this.state.data.length} countries in the api</p>
|
||||
<div className='countries-wrapper'>{this.renderCountries()}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
## Updating
|
||||
|
||||
After a component has been mounted on the DOM, it can be updated when a state or props change. An update of a React component can be caused by changes to props or state . These methods are called in the following order when a component is being re-rendered:
|
||||
|
||||
1. static getDerivedStateFromProps()
|
||||
2. shouldComponentUpdate()
|
||||
3. render()
|
||||
4. getSnapshotBeforeUpdate()
|
||||
5. componentDidUpdate()
|
||||
|
||||
### getDerivedStateFromProps
|
||||
|
||||
Similar to the mounting phase, getDerivedStateFromProps can be also called in the updating phase. The getDerivedStateFromProps is the first method that is called when a component gets updated.
|
||||
|
||||
### shouldComponentUpdate
|
||||
|
||||
The shouldComponentUpdate() built-in life cycle method should return a boolean. If this method does not return true the application will not update.
|
||||
|
||||
If the method does not return true the application will never update. This can be used for instance to block use when it reaches to a certain point(game, subscription) or may be to block a certain user.
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log('I am the constructor and I will be the first to run.')
|
||||
this.state = {
|
||||
firstName: 'John',
|
||||
data: [],
|
||||
}
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nexProps, nextState) {
|
||||
console.log(nextProps, nextState)
|
||||
// if the return is true, the application will never update.
|
||||
return true
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>React Component Life Cycle</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
### render
|
||||
|
||||
As we have mentioned it on the mounting phase of the component, the render() method is called when a component gets updated. It has to re-render the HTML to the DOM, with the new changes.
|
||||
|
||||
### componentDidUpdate
|
||||
|
||||
The componentDidUpdate method takes two parameters: the prevProps and prevState. It is called after the component is updated in the DOM.
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log('I am the constructor and I will be the first to run.')
|
||||
this.state = {
|
||||
firstName: 'John',
|
||||
data: [],
|
||||
}
|
||||
}
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
console.log(prevState, prevProps)
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>React Component Life Cycle</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
## Unmounting
|
||||
|
||||
The final phase in the lifecycle of a component is unmounting. The unmounting phase removes component from the DOM.
|
||||
The componentWillUnmount method is the only built-in method that gets called when a component is unmounted.
|
||||
|
||||
# Exercises
|
||||
|
||||
## Exercises: Level 1
|
||||
|
||||
1. What is component life cycles
|
||||
2. What is the purpose of life cycles
|
||||
3. What are the three stages of a component life cycle
|
||||
4. What does mounting means?
|
||||
5. What does updating means
|
||||
6. What does unmounting means?
|
||||
7. What is the most common built-in mounting life cycle method
|
||||
8.
|
||||
|
||||
## Exercises: Level 2
|
||||
|
||||
## Exercises: Level 3
|
||||
|
||||
🎉 CONGRATULATIONS ! 🎉
|
||||
|
||||
[<< Day 13](../13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md) | [Day 15 >>]()
|
||||
|
||||
|
||||
@ -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 14
|
||||
|
||||
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,72 @@
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log('I am the constructor and I will be the first to run.')
|
||||
this.state = {
|
||||
firstName: 'John',
|
||||
data: [],
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('I am componentDidMount and I will be last to run.')
|
||||
const API_URL = 'https://restcountries.eu/rest/v2/all'
|
||||
fetch(API_URL)
|
||||
.then((response) => {
|
||||
return response.json()
|
||||
})
|
||||
.then((data) => {
|
||||
console.log(data)
|
||||
this.setState({
|
||||
data,
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
renderCountries = () => {
|
||||
return this.state.data.map((country) => {
|
||||
const languageOrLanguages =
|
||||
country.languages.length > 1 ? 'Langauges' : 'Language'
|
||||
const formatLanguages = country.languages
|
||||
.map(({ name }) => name)
|
||||
.join(', ')
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{' '}
|
||||
<img src={country.flag} alt={country.name} />{' '}
|
||||
</div>
|
||||
<div>
|
||||
<h1>{country.name}</h1>
|
||||
<p>Capital: {country.capital}</p>
|
||||
<p>
|
||||
{languageOrLanguages}: {formatLanguages}
|
||||
</p>
|
||||
<p>Population: {country.population}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>React Component Life Cycle</h1>
|
||||
<h1>Calling API</h1>
|
||||
<div>
|
||||
<p>There are {this.state.data.length} countries in the api</p>
|
||||
<div className='countries-wrapper'>{this.renderCountries()}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue