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> <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')
@ -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)
} }
@ -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.
@ -3127,8 +3127,6 @@ const props = {
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
@ -3152,13 +3150,13 @@ const props = {
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
@ -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
@ -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

Write Preview
Loading…
Cancel
Save