msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

typo fixes & consistent formatting fixes

Browse Source
pull/19/head
Amit Garu 5 years ago
parent 1e9739baf4
commit d8805bc6f3
1 changed files with 58 additions and 61 deletions
Show Stats Download Patch File Download Diff File

119
01_Day_JavaScript_Refresher/01_javascript_refresher.md
Unescape View File

@ -205,7 +205,7 @@ First, let us write on the head part of the page.
<head> <head>
<title>30DaysOfScript:Internal Script</title> <title>30DaysOfScript:Internal Script</title>
<script> <script>
console.log('Welcome to 30DaysOfJavaScript') console.log('Hello, World!')
</script> </script>
</head> </head>
<body></body> <body></body>
@ -223,7 +223,7 @@ This is how we write an internal script most of the time. Writing the JavaScript
<body> <body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button> <button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
<script> <script>
console.log('Welcome to 30DaysOfJavaScript') console.log('Hello, World!')
</script> </script>
</body> </body>
</html> </html>
@ -625,7 +625,7 @@ console.log(fruitsAndVegetables)
##### Getting array length ##### Getting array length
Length:To know the size of the array length:To know the size of the array
```js ```js
const numbers = [1, 2, 3, 4, 5] const numbers = [1, 2, 3, 4, 5]
@ -662,7 +662,7 @@ if (index != -1) {
} }
// This fruit does exist in the array // This fruit does exist in the array
// we can use also ternary here // we can also use ternary operator here
index != -1 index != -1
? console.log('This fruit does exist in the array') ? console.log('This fruit does exist in the array')
: console.log('This fruit does not exist in the array') : console.log('This fruit does not exist in the array')
@ -750,10 +750,10 @@ console.log(numbers.join()) // 1,2,3,4,5
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
console.log(names.join()) // Asabeneh,Mathias,Elias,Brook console.log(names.join()) // Asabeneh,Mathias,Elias,Brook
console.log(names.join('')) //AsabenehMathiasEliasBrook console.log(names.join('')) // AsabenehMathiasEliasBrook
console.log(names.join(' ')) //Asabeneh Mathias Elias Brook console.log(names.join(' ')) // Asabeneh Mathias Elias Brook
console.log(names.join(', ')) //Asabeneh, Mathias, Elias, Brook console.log(names.join(', ')) // Asabeneh, Mathias, Elias, Brook
console.log(names.join(' # ')) //Asabeneh # Mathias # Elias # Brook console.log(names.join(' # ')) // Asabeneh # Mathias # Elias # Brook
const webTechs = [ const webTechs = [
'HTML', 'HTML',
@ -765,8 +765,8 @@ const webTechs = [
'MongoDB', 'MongoDB',
] // List of web technologies ] // List of web technologies
console.log(webTechs.join()) // "HTML,CSS,JavaScript,React,Redux,Node,MongoDB" console.log(webTechs.join()) // HTML,CSS,JavaScript,React,Redux,Node,MongoDB
console.log(webTechs.join(' # ')) // "HTML # CSS # JavaScript # React # Redux # Node # MongoDB" console.log(webTechs.join(' # ')) // HTML # CSS # JavaScript # React # Redux # Node # MongoDB
``` ```
##### Slice array elements ##### Slice array elements
@ -1264,7 +1264,7 @@ switch (true) {
} }
``` ```
#### Ternary Operators #### Ternary Operator
Ternary operator is very common in _React_. It is a short way to write if else statement. In React we use ternary operator in many cases. Ternary operator is very common in _React_. It is a short way to write if else statement. In React we use ternary operator in many cases.
@ -2368,7 +2368,7 @@ Arrow function does not have the function scoped arguments object. To implement
​ ​
const sumAllNums = (...args) => { const sumAllNums = (...args) => {
// console.log(arguments), arguments object not found in arrow function // console.log(arguments), arguments object not found in arrow function
// instead we use an a parameter followed by spread operator // instead we use spread operator followed by a parameter
console.log(args) console.log(args)
} }
@ -2389,8 +2389,8 @@ const sumAllNums = (...args) => {
} }
console.log(sumAllNums(1, 2, 3, 4)) // 10 console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10)) // 93 console.log(sumAllNums(10, 20, 13, 40, 10)) // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173 console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173
``` ```
#### Anonymous Function #### Anonymous Function
@ -2469,9 +2469,7 @@ const changeToUpperCase = (arr) => {
} }
const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland'] const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
console.log(changeToUpperCase(countries)) console.log(changeToUpperCase(countries)) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
``` ```
```js ```js
@ -3065,7 +3063,7 @@ const rectangle = {
} }
let { width, height } = rectangle let { width, height } = rectangle
console.log(width, height, perimeter) // 20, 10 console.log(width, height) // 20, 10
``` ```
What will be the value of we try to access a key which not in the object. What will be the value of we try to access a key which not in the object.
@ -3076,7 +3074,8 @@ const rectangle = {
height: 10, height: 10,
} }
let { width, height, perimeter } = rectangleconsole.log( let { width, height, perimeter } = rectangle
console.log(
width, width,
height, height,
perimeter perimeter
@ -3096,7 +3095,7 @@ const rectangle = {
} }
let { width, height, perimeter = 200 } = rectangle let { width, height, perimeter = 200 } = rectangle
console.log(width, height, perimeter) // 20, 10, undefined console.log(width, height, perimeter) // 20, 10, 200
``` ```
Renaming variable names Renaming variable names
@ -3108,6 +3107,7 @@ const rectangle = {
} }
let { width: w, height: h } = rectangle let { width: w, height: h } = rectangle
console.log(w, h) // 20, 10
``` ```
Let's also destructure, nested objects. In the example below, we have nested objects and we can destructure it in two ways. Let's also destructure, nested objects. In the example below, we have nested objects and we can destructure it in two ways.
@ -3116,19 +3116,17 @@ We can just destructure step by step
```js ```js
const props = { const props = {
user:{ user: {
firstName:'Asabeneh', firstName: 'Asabeneh',
lastName:'Yetayeh', lastName: 'Yetayeh',
age:250 age: 250
}, },
post:{ post: {
title:'Destructuring and Spread', title: 'Destructuring and Spread',
subtitle:'ES6', subtitle: 'ES6',
year:2020 year: 2020
}, },
skills:['JS', 'React', 'Redux', 'Node', 'Python'] skills: ['JS', 'React', 'Redux', 'Node', 'Python']
}
} }
const {user, post, skills} = props const {user, post, skills} = props
@ -3141,24 +3139,24 @@ const [skillOne, skillTwo, skillThree, skillFour, skillFive] = skills
```js ```js
const props = { const props = {
user:{ user: {
firstName:'Asabeneh', firstName: 'Asabeneh',
lastName:'Yetayeh', lastName: 'Yetayeh',
age:250 age: 250
}, },
post:{ post: {
title:'Destructuring and Spread', title: 'Destructuring and Spread',
subtitle:'ES6', subtitle: 'ES6',
year:2020 year: 2020
}, },
skills:['JS', 'React', 'Redux', 'Node', 'Python'] skills: ['JS', 'React', 'Redux', 'Node', 'Python']
}
} }
const {user:{firstName, lastName, age}, post:{title, subtitle, year}, skills:[skillOne, skillTwo, skillThree, skillFour, skillFive]} = props const {
user: {firstName, lastName, age},
post: {title, subtitle, year},
skills: [skillOne, skillTwo, skillThree, skillFour, skillFive]
} = props
``` ```
Destructuring during loop through an array Destructuring during loop through an array
@ -3368,7 +3366,6 @@ console.log(sumAllNums(1, 2, 3, 4, 5))
```sh ```sh
15 15
``` ```
### 11. Functional Programming ### 11. Functional Programming
@ -3579,7 +3576,7 @@ const reduced = array.reduce(callback, optionalInitialValue)
// or syntax in an arrow function // or syntax in an arrow function
const reduced = callback(acc, cur) => { const reduced = callback(acc, cur) => {
return // code goes here return // code goes here
} }
const reduced = array.reduce(callback) const reduced = array.reduce(callback)
@ -3635,15 +3632,15 @@ If we are interested in the first occurrence of a certain item or element in an
// syntax in a normal or a function declaration // syntax in a normal or a function declaration
function callback(item) { function callback(item) {
return // code goes here return // code goes here
} }
const item = array.find(callback) const item = array.find(callback)
// or syntax in an arrow function // or syntax in an arrow function
const reduced = callback(item) => { const reduced = callback(item) => {
return // code goes here return // code goes here
} }
const item = array.find(callback) const item = array.find(callback)
``` ```
@ -3679,7 +3676,7 @@ Let us find the first country in the array which has the letter 'o'
```js ```js
const countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland'] const countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']
const index = countries.find((country) => country.includes('o')) const index = countries.find((country) => country.includes('o'))
console.log(index // Estonia console.log(index) // Estonia
``` ```
#### 6. findIndex #### 6. findIndex
@ -3690,15 +3687,15 @@ The findIndex method works like find but findIndex returns the index of the item
// syntax in a normal or a function declaration // syntax in a normal or a function declaration
function callback(item) { function callback(item) {
return // code goes here return // code goes here
} }
const index = array.findIndex(callback) const index = array.findIndex(callback)
// or syntax in an arrow function // or syntax in an arrow function
const reduced = callback(item) => { const reduced = callback(item) => {
return // code goes here return // code goes here
} }
const index = array.findIndex(callback) const index = array.findIndex(callback)
``` ```
@ -3718,7 +3715,7 @@ Let us find the index of the first country in the array which has exactly six ch
```js ```js
const countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland'] const countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']
const index = countries.findIndex((country) => country.length === 6) const index = countries.findIndex((country) => country.length === 6)
console.log(index //2 console.log(index) // 2
``` ```
Let us find the index of the first country in the array which has the letter 'o'. Let us find the index of the first country in the array which has the letter 'o'.
@ -3726,7 +3723,7 @@ Let us find the index of the first country in the array which has the letter 'o'
```js ```js
const countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland'] const countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']
const index = countries.findIndex((country) => country.includes('o')) const index = countries.findIndex((country) => country.includes('o'))
console.log(index // 1 console.log(index) // 1
``` ```
Let us move on to the next functional programming, some. Let us move on to the next functional programming, some.
@ -3872,7 +3869,7 @@ Let use the class constructor to pass different properties for the class.
The constructor is a builtin function which allows as to create a blueprint for our object. The constructor function starts with a keyword constructor followed by a parenthesis. Inside the parenthesis we pass the properties of the object as parameter. We use the _this_ keyword to attach the constructor parameters with the class. The constructor is a builtin function which allows as to create a blueprint for our object. The constructor function starts with a keyword constructor followed by a parenthesis. Inside the parenthesis we pass the properties of the object as parameter. We use the _this_ keyword to attach the constructor parameters with the class.
The following Person class constructor has firstName and lastName property. These properties are attached to the Person class using _this_ keyword. _This_ refers to the class itself. The following Person class constructor has firstName and lastName property. These properties are attached to the Person class using _this_ keyword. _this_ refers to the class itself.
```js ```js
class Person { class Person {
@ -4021,7 +4018,7 @@ console.log(person2.getFullName())
```sh ```sh
Asabeneh Yetayeh Asabeneh Yetayeh
test.js:19 Lidiya Tekle Lidiya Tekle
``` ```
#### Properties with initial value #### Properties with initial value
@ -4334,7 +4331,7 @@ Using inheritance we can access all the properties and the methods of the parent
```js ```js
// syntax // syntax
class ChildClassName extends { class ChildClassName extends {
// code goes here // code goes here
} }
``` ```

Write Preview
Loading…
Cancel
Save