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

51
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>
<title>30DaysOfScript:Internal Script</title>
<script>
console.log('Welcome to 30DaysOfJavaScript')
console.log('Hello, World!')
</script>
</head>
<body></body>
@ -223,7 +223,7 @@ This is how we write an internal script most of the time. Writing the JavaScript
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
<script>
console.log('Welcome to 30DaysOfJavaScript')
console.log('Hello, World!')
</script>
</body>
</html>
@ -625,7 +625,7 @@ console.log(fruitsAndVegetables)
##### Getting array length
Length:To know the size of the array
length:To know the size of the array
```js
const numbers = [1, 2, 3, 4, 5]
@ -662,7 +662,7 @@ if (index != -1) {
}
// This fruit does exist in the array
// we can use also ternary here
// we can also use ternary operator here
index != -1
? console.log('This fruit does exist in the array')
: console.log('This fruit does not exist in the array')
@ -765,8 +765,8 @@ const webTechs = [
'MongoDB',
] // 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
@ -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.
@ -2368,7 +2368,7 @@ Arrow function does not have the function scoped arguments object. To implement
​
const sumAllNums = (...args) => {
// 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)
}
@ -2469,9 +2469,7 @@ const changeToUpperCase = (arr) => {
}
const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
console.log(changeToUpperCase(countries))
// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
console.log(changeToUpperCase(countries)) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
```
```js
@ -3065,7 +3063,7 @@ const 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.
@ -3076,7 +3074,8 @@ const rectangle = {
height: 10,
}
let { width, height, perimeter } = rectangleconsole.log(
let { width, height, perimeter } = rectangle
console.log(
width,
height,
perimeter
@ -3096,7 +3095,7 @@ const 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
@ -3108,6 +3107,7 @@ const 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.
@ -3127,8 +3127,6 @@ const props = {
year: 2020
},
skills: ['JS', 'React', 'Redux', 'Node', 'Python']
}
}
const {user, post, skills} = props
@ -3152,13 +3150,13 @@ const props = {
year: 2020
},
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
@ -3368,7 +3366,6 @@ console.log(sumAllNums(1, 2, 3, 4, 5))
```sh
15
```
### 11. Functional Programming
@ -3679,7 +3676,7 @@ Let us find the first country in the array which has the letter 'o'
```js
const countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']
const index = countries.find((country) => country.includes('o'))
console.log(index // Estonia
console.log(index) // Estonia
```
#### 6. findIndex
@ -3718,7 +3715,7 @@ Let us find the index of the first country in the array which has exactly six ch
```js
const countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']
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'.
@ -3726,7 +3723,7 @@ Let us find the index of the first country in the array which has the letter 'o'
```js
const countries = ['Finland', 'Estonia', 'Sweden', 'Norway', 'Iceland']
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.
@ -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 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
class Person {
@ -4021,7 +4018,7 @@ console.log(person2.getFullName())
```sh
Asabeneh Yetayeh
test.js:19 Lidiya Tekle
Lidiya Tekle
```
#### Properties with initial value

Write Preview
Loading…
Cancel
Save