This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Generics | |
const names: Array<string> = []; // string[] | |
names[0].split(' '); | |
const promise: Promise<number> = new Promise((resolve, reject) => { | |
setTimeout(() => { | |
resolve(10); | |
}, 2000); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
<title>encodeURI vs encodeURIComponent</title> | |
<style> | |
html { | |
font-size: 20px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Difference for..in and for..of: | |
Both for..in and for..of are looping constructs which are used to iterate over data structures. | |
The only difference between them is the entities they iterate over: | |
- for..in iterates over all enumerable property keys of an object | |
- for..of iterates over the values of an iterable object. Examples of iterable objects are arrays, strings, and NodeLists. | |
*/ | |
let arr = ['el1', 'el2', 'el3']; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const newsStory = { | |
title: 'Inflation is soaring', | |
author: null, | |
thumbnail = 'dollar.jpg', | |
meta: { | |
year: 2022 | |
} | |
} | |
const {title: tit, author: auth = 'Unknown', thumbnail} = newsStory |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// nested loops and multi-dimensional objects | |
// We can use nested loops to access all the elements | |
// inside multi-dimensional arrays or objects | |
let twoD = [[1, 2, 3, 4, 5, 6, 7], | |
[8, 10, 5, 7, 3, 22, 6, 42], | |
[123, 54, 12, 11, 9, 15]]; | |
let bigHero = {characters:[ | |
{name:'Hiro', voice:'Ryan Potter'}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button onClick={ | |
() => { | |
navigate('/about', { state: { id: 1, name: 'sabaoon' }}) | |
} | |
}>Change to about page</button> | |
import { useLocation } from 'react-router-dom'; | |
import Button from 'react-bootstrap/Button'; | |
const UseLocationExample: React.FC = () => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<Route path="/profile/:username" element={<ProtectedRoute user={user}><UseParamsExample /></ProtectedRoute>} /> | |
import { useNavigate, useParams } from "react-router-dom"; | |
const UseParamsExample: React.FC = () => { | |
let navigate = useNavigate(); | |
let { username } = useParams(); | |
return ( | |
<div className="profile"> |