Joy of React Module 2
Written on April 12th, 2023

Yeah, Here we go done with module 2, Going and learning slow to complete each part of lesson, Learning something new or sticking with new habits which is been really hard, whereas, You needs to stay motivated and discipline, I hope i building the system to learn,
On the Module 2 learned and convered about topics of Working on State, And here the topics which i needs to recall from the courses,

  1. UseState Hook
  2. Forms
  3. Props vs State
  4. Complex State
  5. Rest/ Spread (JS)
UseState Hook

In the react useState is an special type of function which it allows to hook and we needs to call it from the top level of our components

Syntax For calling useState hook

1const [name,SetName] = React.useState("AryaStark");
2// name => Its state variable to set the initial value
3// setName => Function which can use to update the state variable. 
4

Example Using useState

1import React from 'react';
2
3function Counter() {
4    const [count, setCount] = React.useState(0);
5    return (
6        <button onClick={() => setCount(count + 1)}>
7          Value: {count}
8        </button>
9    );
10}
11export default Counter;

In order understand useState, In the javascript you needs to check on the concept of Array Destructing

Props vs State

From the course on the module 1 we learned about props and its uses, Now here will understand what is the difference between props and state

Rest / Spread (JS)

This javascript concept, Which i could like to recall it, So adding up,

Example 1:

1addTotal(1,1); // 2
2addTotal(2, 4, 6, 8); // 20
3
4function addTotal(...nums) {
5    let totalsum = 0;
6  
7    nums.forEach(num => {
8      totalsum += num;
9    });
10  
11    return totalsum;
12  }

It must have only single rest parameter, and it has to come last.

Example 2:

1function getName(...firstRest, ...rest) {} // Not Allowed
2function getData(...rest, second, third) {} // Not Allowed

Spread

A Spread is about unpack set of gathered values, Which is combined together into single array

Example 1:

1function getNameInfo(firstName,lastName) {
2   return firstName + lastName;
3} 
4const dataInfo = ["Arya","Stark"];
5getNameInfo(...dataInfo); // Arya Stark
6

By Using Object

1const fullName ={
2firstName: "Arya",
3lastName: "Stark"
4}
5const getInfo = {...fullname};
6