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

How to upload the existing folder on GitHub Or GitLab?

These are the steps to upload the existing folder on GitHub Or GitLab.

Whenever you want to push your existing folder to git or GitHub you must:-

1. Initialize your folder with git init.
2. You must have to add origin to push or pull.
   ( git remote add origin https://github.com/more03625/chat-app-frontend.git )

3. git branch -M main ( Create branch on git )
   

4. git add .

5. git push origin main

Error

1. error: failed to push some refs to 'https://github.com/more03625/react-bootstrap-crud-app.git'
• The branch is not present on GitHub or on local
2. error: failed to push some refs to 'https://github.com/more03625/dsa-cracker.git' Make sure you are pushing to the right branch or is there any typo. check out your current working branch name with this command.

Few Git Commands

*) To Check your current account information

        git config --global user.email

        git config --global user.name

       

 *) Set New account information

       

        git config --global user.email yournew@email.com

        git config --global user.name yournewgoodname

Read More

Create Login Form with React in Hindi | Handling Basic Form with React Hook

Basic form in React js. User can enter mail id and password and Onclick on submit button I am getting values from the input fields and showing back to the user.

Also you can use the React Developer Tools extension to see the data in hooks.

import React, {useState} from 'react';

const Basicform = () => {

    // creating state value's

    const [email, setEmail] = useState("");

    const [password, setPassword] = useState("");

    const [allEntry, setAllEntry] = useState([]);

     const submitForm = (e) => {

         e.preventDefault();

         const newEntry = {email:email, password:password};

         setAllEntry([...allEntry, newEntry]);

     }

    return (

        <>

            <form action="post" onSubmit={submitForm}>

                <div>

                    <label htmlFor="email">Email</label>

                    <input type="email" name="email" id="email" 

                        value={email} 

                        onChange={(e) => setEmail(e.target.value)} 

                        autocomplete="off"/>

                </div>

                <div>

                    <label htmlFor="password">Password</label>

                    <input type="password" name="password" 

                        id="password" value={password} 

                        onChange={(e) => 

                        setPassword(e.target.value)}/>

                </div>

                <div>

                    <button type="submit" name="loginBtn">Login</button>

                </div>

            </form>

            

            <div>

                {allEntry.map( (currentElemet) => {

                    return (

                        <>

                            <div>

                                <p>{currentElemet.email}</p>

                                <p>{currentElemet.password}</p>

                            </div>

                        </>

                    )

                })}

            </div>

        </>

    )

}

export default Basicform

Read More

Difference between Class components & Functional Components in react.js

We are going to create 2 components

    class component 

    functional component

Ref: https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react

ref2: https://www.youtube.com/watch?v=uGgPINlKqBs

The main & the key difference is 

 1) When we use Functional components we have to use props. BUT inside the class component, we automatically have that property & we can access that using `this.prop.age`

You can pass props in both components. But in functional components, you have to use the `props` keyword & in-class component you automatically have the refernece

Userclass.js

import React, { Component }from 'react';

import Userfunction from './Userfunction';

class Usersclass extends Component {

    render(){

        return (

            <div>

                <Userfunction>RAHUL</Userfunction>

                <Userfunction>MORE</Userfunction>

                <Userfunction>YOGESH</Userfunction>

            </div>

        )

    }

}

export default Usersclass

Userfunction.js

import React from 'react';

const Userfunction = (props) => {

    return (<div>{props.children} ( Userfunction )</div>);

}

export default Userfunction;

We are passing data from the User class component to the User function component & we are using props here. if you don't write the props keyword in `User function  = (props)` data will not be rendered. you will get an empty screen.

We have to use the `props` keyword only in the functional component ONLY. in class components you will have reference automatically. and you can use that using `this.props.title`

Index.js We passed title like this

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App.js';

import Users from './users/Usersclass';

ReactDOM.render(<Users title="this is commig from index.js"/>, 

document.getElementById('root'));

Userclass.js

And we are accessing like this as I mentioned above.

import React, { Component }from 'react';

import Userfunction from './Userfunction';

class Usersclass extends Component {

    render(){

        return (

            <div>

                <h1>{this.props.title}</h1>

                <Userfunction>RAHUL</Userfunction>

                <Userfunction>MORE</Userfunction>

                <Userfunction>YOGESH</Userfunction>

            </div>

        )

    }

}

export default Usersclass

You can pass props to both functional and class components 

import React, { Component }from 'react';

import Userfunction from './Userfunction';

class Usersclass extends Component {

    render(){

        return (

            <div>

                <h1>{this.props.title}</h1>

                <Userfunction age="30">RAHUL</Userfunction>

                <Userfunction age="30">MORE</Userfunction>

                <Userfunction age="30">YOGESH</Userfunction>

            </div>

        )

    }

}

export default Usersclass

1) In the class component you have to import component from React lib (TOP line)

2) In functional components you don't have to import.

1) Class component: There is a render method in class comp.

2) Fun comp: there is no render method.

1) Class comp: Props is automatically available. & we use that like this `this.props.title`

2) Fun comp: we have to pass prop as an argument and then we can use that props.

1.             props.children
2.             props.age

1) Whenever you want to maintain the state you must use Classcomponenet. The state can be only used in the class components.

2) Use functional components as much as you can.

Read More

How to test Newly Created website?

You should check these points on the newly created website before updating your seniors. this is from my experience. you can add your test cases OR points in a comment. I will add that points in this post.

1) Check the Mobile version of your website. All the menus, Header, Footers

2) Check-in Desktop version.

3) Truncate all the tables and then visit your website.

    this is to check if your database doesn't contain any data then also the website should work properly. you should handle all the cases/conditions at the first time only. this comes from practice only.

Read More

React.js Completed Videos

 9) Understanding React Fragment in React JS in Hindi in 2020 #8

10) JSX challenge completed

11) JavaScript Expressions in JSX in ReactJs in Hindi in 2020 #10

12) ES6 Template Literals in JSX in ReactJS in Hindi #11

13) React JS Challenge #2: Display Current Date and Time in JSX in React JS in Hindi #12

14) HTML Attributes vs. JSX Attributes 

15) CSS Styling & Importing CSS Files in React JS | Class Vs ClassName in React JS in Hindi in 2020 #14 ( ClassName introduced )

16) How to use Google fonts in React JS Application in Hindi in 2020 #15

17) Internal CSS & Inline CSS Styling In React JS in Hindi in 2020 #16 (Why inline styling);

18) React Components in Hindi | Functional Component in React JS Hindi in 2020 #18

19) React JS Practice #4: Rewrite our React Project into Components in React JS in Hindi in 2020 #19

•     We write all the code in App.js & just export App.js in add the app component in Index.js.
•     Index.js will be clean code.

20) ES6 Modules Import Export in React JS in Hindi #20

21) React JS Challenge #5: Create Simple Calculator App in React JS in Hindi #21

22) #22: Props in React Js in Hindi | React JS Project Netflix App Part #1 in Hindi in 2020

23) JavaScript Tutorial in Hindi #12: Array in JavaScript in Hindi

24) #23: Arrays in React JS in Hindi | ReactJS Project Netflix App #2 in Hindi in 2020

25)#24 Completing React JS Netflix App #3 | Array Map & Fat Arrow function in React Js in Hindi in 2020

26) ReactJS JavaScript Array Map Method in Hindi with Example

Read More