asabeneh
4 years ago
parent
3b4e26e89b
commit
384a270937
@ -0,0 +1,319 @@
|
||||
<div align="center">
|
||||
<h1> 30 Days Of React:Third Party Packages</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 14](../14_Day_Component_Life_Cycles/14_component_life_cycles.md) | [Day 16 >>]()
|
||||
|
||||
|
||||
|
||||
- [Third Party Packages](#third-party-packages)
|
||||
- [NPM or Yarn](#npm-or-yarn)
|
||||
- [node-sass](#node-sass)
|
||||
- [axios](#axios)
|
||||
- [react-icons](#react-icons)
|
||||
- [moment](#moment)
|
||||
- [styled-components](#styled-components)
|
||||
- [reactstrap](#reactstrap)
|
||||
- [lodash](#lodash)
|
||||
- [Exercises](#exercises)
|
||||
- [Exercises: Level 1](#exercises-level-1)
|
||||
- [Exercises: Level 2](#exercises-level-2)
|
||||
- [Exercises: Level 3](#exercises-level-3)
|
||||
|
||||
# Third Party Packages
|
||||
|
||||
There are more than 1.4M JavaScript on npm registry. By now there is a package for every kind of problem. We do not have to create the wheel instead we have to know how to use the wheel. In this section, we will learn how to use npm packages and also we will implement most common package for React applications. As of October 10, 2020, the npm registry popular packages, total number of packages, downloads per week and downloads per month.
|
||||
|
||||
|
||||
|
||||
In one way or the other you many need the following packages in your React applications.
|
||||
|
||||
- [node-sass](https://www.npmjs.com/package/node-sass)
|
||||
- [moment](https://www.npmjs.com/package/moment)
|
||||
- [axios](https://www.npmjs.com/package/axios)
|
||||
- [react-icons](https://react-icons.github.io/react-icons/)
|
||||
- [styled-components](https://styled-components.com/)
|
||||
- [reactstrap](https://reactstrap.github.io/)
|
||||
- [lodash](https://www.npmjs.com/package/lodash)
|
||||
|
||||
- [uuid](https://www.npmjs.com/package/uuid)
|
||||
|
||||
## NPM or Yarn
|
||||
|
||||
You can use either npm or yarn to install packages. If you want to use [yarn](https://yarnpkg.com) you have install it separately. I would recommend you to stick in one of the package. Don't use both package management tools in one application at the same time.
|
||||
|
||||
Let's how to install packages to an application. First we go to the project directory and write the following command.
|
||||
|
||||
```sh
|
||||
// syntax, we can use i or install
|
||||
npm i package-name
|
||||
```
|
||||
|
||||
### node-sass
|
||||
|
||||
Sass is a CSS preprocess which allows to write CSS function, nesting and many more. Let's install node-sass to make use of the power of Sass.
|
||||
|
||||
Using npm:
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ npm install node-sass
|
||||
```
|
||||
|
||||
Using yarn:
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ yarn add node-sass
|
||||
```
|
||||
|
||||
After installing node-sass you can start using Sass in React. Create a styles folder and inside this folder create test.scss. Import this file to the component you are working or index.js. You don't need import the node-sass to the component.
|
||||
|
||||
```js
|
||||
// index.js
|
||||
import './styles/test.scss
|
||||
```
|
||||
|
||||
### axios
|
||||
|
||||
Axios is a JavaScript library which can make HTTP requests to fetch data. In this section we will see on a get request. However, it is possible to do all the request types using [axios](https://github.com/axios/axios) (GET, POST, PUT, PATCH, DELETE).
|
||||
|
||||
Using npm:
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ npm install axios
|
||||
```
|
||||
|
||||
Using yarn:
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ yarn add axios
|
||||
```
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
// axios is a package which
|
||||
// send requests to a server to fetch data
|
||||
import axios from 'axios'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
class App extends Component {
|
||||
state = {
|
||||
data: [],
|
||||
}
|
||||
componentDidMount() {
|
||||
const API_URL = 'https://restcountries.eu/rest/v2/all'
|
||||
axios
|
||||
.get(API_URL)
|
||||
.then((response) => {
|
||||
this.setState({
|
||||
data: response.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>Fetching Data Using Axios</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)
|
||||
```
|
||||
|
||||
### react-icons
|
||||
|
||||
Icons are integral part of a website. To get different SVG icons
|
||||
|
||||
Using npm:
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ npm install react-icons
|
||||
```
|
||||
|
||||
Using yarn:
|
||||
|
||||
```sh
|
||||
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ yarn add react-icons
|
||||
```
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import axios from 'axios'
|
||||
import ReactDOM from 'react-dom'
|
||||
import moment from 'moment'
|
||||
import {
|
||||
TiSocialLinkedinCircular,
|
||||
TiSocialGithubCircular,
|
||||
TiSocialTwitterCircular,
|
||||
} from 'react-icons/ti'
|
||||
|
||||
const Footer = () => (
|
||||
<footer>
|
||||
<h3>30 Days Of React</h3>
|
||||
<div>
|
||||
<TiSocialLinkedinCircular />
|
||||
<TiSocialGithubCircular />
|
||||
<TiSocialTwitterCircular />
|
||||
</div>
|
||||
<div>
|
||||
<small> Copyright © {new Date().getFullYear()} </small>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>Welcome to the world of Icons</h1>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
### moment
|
||||
|
||||
Moment is a small JavaScript library which gives us different time formats.
|
||||
|
||||
```sh
|
||||
npm install moment
|
||||
```
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<h1>How to use moment</h1>
|
||||
<p>This challenge was started {moment('2020-10-01').fromNow()}</p>
|
||||
<p>The challenge will be over in {moment('2020-10-30').fromNow()}</p>
|
||||
<p>Today is {moment(new Date()).format('MMMM DD, YYYY HH:mm')}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
### styled-components
|
||||
|
||||
It uses a tagged template literals to style a component. It removes the mapping between components and styles. This means that when you're defining your styles, you're actually creating a normal React component, that has your styles attached to it.
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const Title = styled.h1`
|
||||
font-size: 70px;
|
||||
font-weight: 300;
|
||||
`
|
||||
const Header = styled.header`
|
||||
background-color: #61dbfb;
|
||||
padding: 25;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
`
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<Header>
|
||||
<Title>30 Days Of React</Title>
|
||||
<h2>Getting Started React</h2>
|
||||
<h3>JavaScript Library</h3>
|
||||
<p>Instructor: Asabeneh Yetayeh</p>
|
||||
<small>Oct 15, 2020</small>
|
||||
</Header>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
```
|
||||
|
||||
### reactstrap
|
||||
|
||||
The [reactstrap](https://reactstrap.github.io/) package allows to use a component with bootstrap.
|
||||
|
||||
### lodash
|
||||
|
||||
According to the official lodash documentation, 'A modern JavaScript utility library delivering modularity, performance & extras.'
|
||||
|
||||
# Exercises
|
||||
|
||||
## Exercises: Level 1
|
||||
|
||||
coming
|
||||
|
||||
## Exercises: Level 2
|
||||
|
||||
coming
|
||||
|
||||
## Exercises: Level 3
|
||||
|
||||
coming
|
||||
|
||||
🎉 CONGRATULATIONS ! 🎉
|
||||
|
||||
[<< Day 14](../14_Day_Component_Life_Cycles/14_component_life_cycles.md) | [Day 16 >>]()
|
||||
@ -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,137 @@
|
||||
import React, { Component } from 'react'
|
||||
import axios from 'axios'
|
||||
import ReactDOM from 'react-dom'
|
||||
import moment from 'moment'
|
||||
import styled from 'styled-components'
|
||||
import {
|
||||
TiSocialLinkedinCircular,
|
||||
TiSocialGithubCircular,
|
||||
TiSocialTwitterCircular,
|
||||
} from 'react-icons/ti'
|
||||
|
||||
const Title = styled.h1`
|
||||
font-size: 70px;
|
||||
font-weight: 300;
|
||||
`
|
||||
const SubTitle = styled.h2`
|
||||
font-weight: 300;
|
||||
`
|
||||
|
||||
const Header = styled.header`
|
||||
background-color: #61dbfb;
|
||||
padding: 25;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
`
|
||||
|
||||
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: [],
|
||||
day: 1,
|
||||
congratulate: '',
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const API_URL = 'https://restcountries.eu/rest/v2/all'
|
||||
axios
|
||||
.get(API_URL)
|
||||
.then((response) => {
|
||||
this.setState({
|
||||
data: response.data,
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
}
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
return { firstName: props.firstName }
|
||||
}
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
console.log(nextProps, nextState)
|
||||
console.log(nextState.day)
|
||||
if (nextState.day > 31) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
doChallenge = () => {
|
||||
this.setState({
|
||||
day: this.state.day + 1,
|
||||
})
|
||||
}
|
||||
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>
|
||||
)
|
||||
})
|
||||
}
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.day == 30) {
|
||||
this.setState({
|
||||
congratulate: 'Congratulations,Challenge has been completed',
|
||||
})
|
||||
}
|
||||
console.log(prevState, prevProps)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<Header>
|
||||
<Title>30 Days Of React</Title>
|
||||
<h2>Getting Started React</h2>
|
||||
<h3>JavaScript Library</h3>
|
||||
<p>Instructor: Asabeneh Yetayey</p>
|
||||
<small>Oct 15, 2020</small>
|
||||
</Header>
|
||||
<p>This challenge was started {moment('2020-10-01').fromNow()}</p>
|
||||
<p>The challenge will be over in {moment('2020-10-30').fromNow()}</p>
|
||||
<p>Today is {moment(new Date()).format('MMMM DD, YYYY HH:mm')}</p>
|
||||
<h1>React Component Life Cycle</h1>
|
||||
<h1>Calling API</h1>
|
||||
<TiSocialLinkedinCircular />
|
||||
<TiSocialGithubCircular />
|
||||
<TiSocialTwitterCircular />
|
||||
|
||||
<button onClick={this.doChallenge}>Do Challenge</button>
|
||||
<p>Challenge: Day {this.state.day}</p>
|
||||
{this.state.congratulate && <h2>{this.state.congratulate}</h2>}
|
||||
<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
|
After Width: | Height: | Size: 94 KiB |
Loading…
Reference in new issue