Few Notes on LocalStorage

 Ref: https://www.w3schools.com/jsref/prop_win_localstorage.asp

1. localStorage is the browser's database. The data is stored inside your browser in your computer's memory
   
   
2. localStorage is specific to an origin. In other words, the localStorage for one website cannot be accessed by another.
   
   

3. The localStorage and sessionStorage properties allow to save key/value pairs in a web browser.
   
   

4. The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed and will be available the next day, week, or year.
   
   
5. The localStorage property is read-only.

Read More

Things to learn

•  - React / Typescript / styled-components / Next.js.  
•  - Docker / Kubernetes.

•   - Postgres / Redis.
•  - Solidity / Rust.

Read More

Async/Await in Javascript explained like a KID

 Whenever we Write async in function, that particular function will return a promise.

And when we write `await` in Function it means, it  (await) saying to request that, I am doing my work here and it will take some time, till then you can go back and complete your other task in the file/outside that function typically, 

So once the request completes all the tasks outside the function then the request will again go back to the last `await` operator and again ask that `await operator` if he completed his task or not. if he still not completed that task then `Await operator` says no please complete your all task then the request says that I completed my all the task. so await says please wait I will complete my task so you can proceed further.

so once the await completes him all task then the request will be passed further. 

if there is any other `await operator` in the function then again request asks to await operator if req can go further if he can then the next code will be executed or req. will wait for `Await operator to complete his task. once done then req can go ahead and complete the next task.

REF: https://www.youtube.com/watch?v=AyJq1RRaY_k

Read More

What is JWT? Json Web Token

Ref: https://youtu.be/7Q17ubqLfaM

1. What is JWT
2. Why should you use JWT?
3. How JWT wORKS?

Authentication: You take the username & password from the user and authenticate that particular user on your website.

Authorization: Authorization means making sure that the user sents a req to the server is the same user that actually logged in at authentication of the process.

We normally do this using the session.

                                                        How session work images above

Session gets stored in the server memory. but in JWT all the users' info present in that token only has been encoded with a secret key. JWT is not stored on a server-side.

Why JWT Over Session?

Example 1: 

let take an example of an HDFC Bank. you logged in to your net banking on the HDFC portal. now you want to pay your electricity bill for that HDFC redirects you to the different websites of HDFC that may be hosted on different servers.

so here is the key. if you use a session you are only logged in on that particular server, not on a bill pay website. so the user has to log in again on the bill pay website. that's the drawback of a session.

But, if you use JWT here, WE Store JWT token (user information) on the client side.

so we can share that JWT token to the bill pay website so the user doesn't have to go through the login process again because we are sharing the Jwt token.

Example2:

Let's say the bank s very large & they have a lot of users. so for load balancing, they may use 2 servers or more. so if there SERVER A gets too busy user may be moved to SERVER B. 

IN this case, JWT is very important. so the users don't have to login again if the server change due to load.

Read More

Important Topics in React js

1. Javascript map function
2. State, Hooks
3. What is Super() in React js?
4. What is the Difference Between the build version & the dev version of the React js?
5. How to Host React app on Heroku?
6. What is Axios?
7. Store UserID, token, username in LocalStorage.

2) What is a State in React js?

1. A state is a JavaScript object that stores a component’s dynamic data and it enables a component to keep track of changes between renders. 
   
   
2. Because the state is dynamic, it is reserved only for interactivity so you don’t use it for static React projects.
   
   
3. The state is managed within the component (similar to variables declared within a function)
   
   
4. The state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behavior of the component

5. The state object is where you store property values that belong to the component.

6. When the state object changes, the component re-renders.

7. Refer to the state object anywhere in the component by using the this.state.propertyname syntax:
   
   
8. States can only be used in Class Components.
   
   
9. A state is an observable object that is to be used to hold data that may change over time and to control the behavior after each change.

What is a hook in React js?

Examples are 

1. Hooks are a special function that allows you to connect with react features.

2. Hooks don’t work inside classes. But you can use them instead of writing class.

3. React provides a few built-in Hooks like useState, useEffect.

4. We can also create our own hook to reuse stateful behavior between different components.

5. Hooks let you use state & other react features without writing a class.

6. useState is a hook that lets you add `React state` to the function component. previously you can only use state with class components.

When would I use a Hook? If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.

Must Read: https://reactjs.org/docs/hooks-state.html#declaring-a-state-variable

What is useState Hook?

1. useState hook is used to declare the state variables into the functionals component.
   
   
2. useState is a new way to use the exact same capabilities in a `function` that this.state provides in a `class`.

Difference between build version & Production version of Reactjs

1. By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app

Read More

Using the Effect Hook. What is the Effect Hook?

Ref: https://reactjs.org/docs/hooks-effect.html

1. Hooks are a new addition to React 16.8.
   
   
2. They let you use state and other React features without writing a class.
   
   
3. What does useEffect do? By using this Hook, you tell React that your component needs to do something after render.
   
   
4. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.
   
   
5. Hooks only works in the functional components. so if you want to use useEffect or any other hook you have to use functional components.
   
   
6. use effect keeps calling itself if you specifically do not specify an empty array at the end of the useEffect.

Eg:

useEffect( () => {

    

}, []); // empty array specified

Read More

How to setup a New node project?

1. Go to your /server directory.
2. create index.js ( Our server will run here. )
3. You can install dependencies like express, body-parser, Mysql, nodemon

Setup a Nodemon.

1. Add these 2 lines under the script tag

    "start":"node index.js",

    "devStart":"nodemon index.js",

1. npm run devStart

Nodemon will refresh automatically when it receives any changes.

Read More