CSS JS React.

js Misc
flexbox ES6 navbar - react router dom Material UI
grid setTimeOut pagination React bootstrap
rem and em SetTimeInterval carousel
vw and vh Array and Objects fetch/axios - dummy JSON server
min and max height and widtMap, Filter, Reduce, Splice redux
scroll bar Deep Copy Shallow Copy redux toolkit thunk middleware
transition Event Propagation learn infinite scrolling
webkit - vendor prefixes Map vs ForEach typewriter effect
Notifications - Come and Go
List of notifications
Charts
Acknowledgement modal Box
Make projects Extra Topics https://timmousk.com/blog/react-call-function-i
CRUD - ToDO app Get and POST(request bodytransition
Weather app - API Postman Tool webkit - vendor prefixes https://mantine.dev/
Movie app Sonarqube Shopping Cart + Redux Chrome extension
Shopping Cart Beginner
Clone Advance
Get and POST
POST in reactjs
React Drag and Drop
m/blog/react-call-function-in-child-component/
VS CODE
Ready made components https://vscode.dev/github.com/do-community/doggy-directory
Pesticide for Chrome or just press .(dot), it will open in vscode
JSON Viewer https://github.dev/do-community/doggy-directory/
LocatorJS
Page Ruler
QuillBot: AI Grammar
Install Locator Js chrome extension
oggy-directory
https://sweetalert2.github.io/#usage npm package for alerts and notifications
https://learnersbucket.com/
rts and notifications
https://youtu.be/J6ygd-6pN5c ES6 to ES13 JavaScript Interview Topics | Software En
https://youtu.be/Js8xcbyExes Avoid these CSS Mistakes at Job | Web Development
https://youtu.be/wtATpZ6ZIn4 Callback function in JS
https://youtu.be/P4LGI8kv45Q UI and LI tag | Map function | Objects in JS
JS LinkedIn Posts
CSS CSS Units https://www.linkedin.com/posts/manoharbatra_webdevelopment-programming-html-
JS
HTML
webdevelopment-programming-html-activity-7069220920594227200-RO_e?utm_source=share&utm_medium=member_desktop
are&utm_medium=member_desktop
Javascript

What is the role of the browser other than accessing the website?
What is an event in browser?
What are the various ways to include JavaScript in our HTML code?
Write the syntax of print statement in JavaScript?
What is JavaScript framework give some examples of it?
How we can run JavaScript code directly in browser? Give one example?
What is the role of div tag and ID in HTML?
What is the use of getElementById() function and innerHTML keyword in JS?
What is the use of onclick, mouseover, mouseover event?
Which function is use to speak in JavaScript?
What is the meaning of DOM in web technology?
Which are the box that JavaScript support?
What do you mean by BOM?
How we can integrate CSS with JavaScript?
What is the need of AJAX?
What is request and response in web technology?
Which function we can use to send request using JavaScript?
What is the difference between JavaScript Synchronous and asynchronous?
How to use JSON in JavaScript?
How many types of boxes are there in JS?
How to write loops and conditions in JS?
What is Get/Post method?
Use case of pre tag

TCS

1. what is flat map?

2. Rest Template change the configuration
3. Scopes of Java beans
4. Write a query to find max third highest salary.
5. dependency injection?
6. what is jvm, jdk?
7. explain the runtime and compiletime
8. Why spring boot?
9. aws s3 and alternatives?
10. what is security group
11. what is tcp/udp?
12. what is microservice architecture?
13. what is primary key, canditate key?
14. spring securtiy which class do u extend?
15. what are advantages of microservices?

Thomson Reuters

1. Monolothic vs Microservices
2. How do u invoke other microservices
if microservice 1,2,3 depend on each other and microservice is down how do u handle?
3. why spring boot?
4. how do u change embedded tomcat?
5. Write a program to count the number of times character repeated
6. Design a decorator design pattern
7. Write code to validate username and employee id
8. diff bw request params and path variable
9. What are types of repositories.
10. Write the code to define jpa and crud rep for a class
11. how do u save a object in jpa repository
12. write a query to find the third max salary
13. what diff bw aws ec2 vs ami
14. wht is ondemand vs spot instance
15. what is default timeout of lambda function
16. what is the default number of request in lambda
what is signed url
17. how many ways a lambda function can be invoked
REACT.JS
https://www.linkedin.com/posts/akshaymarch7_react-javascript-namastereact-activity-70827310083
https://www.linkedin.com/posts/akshaymarch7_react-javascript-namastereact-activity-70856006131
https://www.linkedin.com/posts/akshaymarch7_react-javascript-namastereact-activity-70880331952
-namastereact-activity-7082731008390774784-zyth?utm_source=share&utm_medium=member_desktop
-namastereact-activity-7085600613102759936-ozCa?utm_source=share&utm_medium=member_desktop
-namastereact-activity-7088033195207663616-F3uF?utm_source=share&utm_medium=member_desktop
mber_desktop
mber_desktop
mber_desktop
React.js
website: https://www.patterns.dev/
npm install -g create-react-app : will install react app globally which we don't do
if we write that, next time we use "create-react-app helloapp"

npx create-react-app app_name

cd app_name
npm start or yarn start
npx create-react-app typeapp --template typescript
NPM Packages
when component change and page don't refresh(means request don't go to server)
then we use routers
npm -i react-router-dom will install latest version ; it will be -i or install
npm -i react-router-dom@6.4.2 jo version chahiye wo install hoga
npm i redux react-redux
npm install react-icons
npm install sass
npm install @carbon/react
npm install react-router-dom react-icons sass
npm install react-router-hash-link

npm install react-responsive-carousel

npm install react-router-dom@6.4.2 react-responsive-carousel@3.2.23

npm install -g json-server
json-server --wath data/db.json --port 8000
npm install axios

npm install react-chartjs-2 chart.js

Build the reactapp

npm run Build
npm install -g serve
serve -s build // create new folder named build
// build folder will have all static information

git init
git add .
git commit -m "initial commit"
git push
create new repository on git website
now type two commands
git remote add origin https://
git push -u origin master

open netlify
click on new site from git

npm install jest

----------

https://chakra-ui.com/getting-started/cra-guide

C:\Manohar\Javascript\React2022\complete_react_2022\chakra-ui

In app.js file you will see this command

import {BrowserRouter as Router} from "react-router-dom"

font awesome website

Did you know that you can make an object to immutable?

Object.freeze(user);
Hot reload in reactjs

useEffect is used in small projects and useReducer is used for bigger projects

for image use figure tag

short circuit evaluation is one of the ways to conditionally render in reactjs

another words: multiple rendering with the help of OR and AND operator
OR mein left wala value milta hai
AND mein right wala value milta hai

custom hooks is like component only

useLocation()
location.pathname gives current url

useHistory hook
history.goBack
history.push can't be used directly, it should be under fat arrow function

React Tostify is a npm package

new Set gives unique data in an array

convert object to array with the help of spread operator ...

JWT
Header: algo
Payload: email id and pwd
Footer: secret key

Reconcilation - comparison of two virtual DOMs

--------
Custom hook

import React, {useState} from 'react';

import './App.css';

const useCounter = (initialValue) => {

const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
const reset = () => setCount(initialValue);

return {count, increment, decrement, reset};

}

const App = () => {

const {count, increment, decrement, reset} = useCounter(0);

return (
<div>
<h1> Hello Ji </h1>
<h1> {count} </h1>
<button onClick={increment} >increment</button>
<button onClick={decrement}>decrement</button>
<button onClick={reset}>reset</button>
</div>
)
}

export default App

--
state means component has a life
Pure components are those which will re-render only when state or probs passed is
changed

ID Age and
Suppose Salary
age and salary is fixed and it's been passed to 3rd component then it should
not re-render to make it pure component
and we use React.memo in that component

difference between
state is mutable state
i.e we canand propsstate but probs is immutable i.e. we cannot change
change
state

in ES5, we use bind instead fat arrow function(ES6)

Reactjs Life Cycle

Class component:
render : main output area
constructor : page render hone se pehle variables initialisation
componentDidMount : first time rendering - useEffect
componentDidUpdate : whenever state gets changed
componentWillUnmount - depreciate ho gye
componentWillUpdate - depreciate ho gye
Functional Component: Hooks
useSelector is access Redux store
useReducer is better than useState: we use dispatcher function and use type in switch
statement
redux toolkit for async api

useEffect covers Reactjs lifecyles which is used in class based components

instead fetchAPI, use axios

Jest is a framework
https://jestjs.io/docs/getting-started

Testing with Jest

-----------------
install jest -> npm install --save-dev jest

install react test render

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import renderer from 'react-test-renderer'

write simple test case

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {

expect(sum(1, 2)).toBe(3);
});

run test case - npm test

react redux todo

actions: add, delete and delete all
reducer: add kese krna hai? - holds your current state and action
store: add kiya hua wala data kaha store kroge
we use hook named {useDispatch} from 'react-redux'
action is a folder, inside make index.js where we define below actions in individual
function
type:"ADD_TODO" , "DELETE_TODO" , "DELETE_ALL" and payload: data
reducers is a folder
reducx devtools for debugging
Javascript
html, head, style, body, script - header, nav, footer, button,
form
div id and class
typeof(variable) helps in validation

Javascript
querySelector and getElementById
map
console.log(out);
Out: [ 2, 3, 4, 5 ]
function)

Output: [ 9, 16, 25 ]
Another function is called ReduceRight()

Out: 15
fat arrow function
EC6 - full important

Swap two numbers without using third variable

var a = 5; b = 10;
a = a + b; // a = 5 + 10 = 15
b = a - b; // b = 15 - 10 = 5
a = a - b; // a = 15 - 5 = 10

a = 10; b = 5;

falsy values in javascript: 0 , "" , undefined, null, NaN

ternary operator : that takes 3 operands

var age = 17;
console.log((age >= 18) ? "you can vote" : "you can't vote");

Switch
While - first
Do While check
- we condition
get atleast one output before checking the
condition

function sum(){
var a=10, b=20;
var total = a+b;
console.log(total);
}
sum();

function expression use return keyword

Anonymous function
var funExp = function(a,b){
return total = a + b;
}

var sum = funExp(1,2);

console.log(funExp(1,2));

/* Modern Javascript */
var = function scope
let/const = block scope

Template literals

let tableOf = 8;
for(let num=1;num<=10;num++){
console.log(` ${tableOf} * ${num} = ${tableOf * num}`);
}

Default Parameters
Fat Arrow function
Arrays
array.length - here length is a property
if it would be method then it would have double brackets ()

forEach is a combination of for in and for of loop

Lazy Loading + Splitting
Axios
promiseworks like to
is loop
used promise - returnoperations
perform data or error
The event is the secretasyn but internally
by which JavaScript gives us anit
uses event loop
illusion of being multithreaded even though it is single-
threaded

Perform CRUD
array.push() - add element at last of array
array.pop() - remove last element of array
array.unshift() - add element at beginnning
array.shift() - remove element at beginnning
splice() - CRUD operation but in string it has slice

map() reduce() and filter()

map function with > or < returns true or false instead array
values/elements
so to get values, we use filter method along with map method
map and filter and callback function takes 3 parameters as
input

flatten an array
convert 2d or 3d array to 1d array

strings and it's methods

let anySentence = "We are with you \"Manohar Batra\"";

console.log(anySentence);

finding a string in a string

indexOf()
lastIndexOf()
search()

slice in string is like substring in progress

slice is like substring but it does not accept negative index
substr()

replacing string content

extracting string characters

charAt(position)
charCodeAt(position)
Property access []

toUpperCase()
toLowerCase()
concat
trim() removes white space from both ends
split('') - convert string to an array
Date and Time Objects in Javascript
4 ways to create a new Date object

Math Objects

round and floor behaves same but ceil works differently

if the argument is a positive Number

math.trunc() is equivalent to math.floor()
otherwise math.trunc() is equivalent to math.ceil()

window.histiry.back()

getElementById is faster than document.querySelector

4 ways of writing events

document.querySelector
addEventListener('click',() {
alert('I love you');
}

console.log(event);
console.log(event.target);
console.log(event.type);

mouse events
keyboard events
input events

difference between onclick and addEventListener

onClick mein last meinmein
but addEventListener jo milta
dono hairun
wohote
run hota hai alert and
hai exp:
console.log

Timings based events in js

setTimeOut() -
clearTimeout()
setInterval() - repeat continuously
clearInterval()

Object literal
function inside a object is called method

we can't ifuse
because wethis
useobject
insideinfatfatarrow
arrowfunction
functionthen it will still use
window object and not above object
oops mein this use hota hai but not in reactjs because it uses
functional component

Destructuring in ES6
const myBioData = ['manohar', 'batra', 30];
let [myFname, myLName, myAge] = myBioData;

Dynamic Properties
let myName = "Manohar";
const myBio = {
[myName] : " How are you",
myAge : 30
}
console.log(myBio);
// Spread operator
const arr = ['red','blue','green'];
const arr1 = ['red','blue','green','white','black'];

const newArr = [ ...arr[],'white','black'];

// 2019
// console.log(arr.flat(Infinity));

//
x ="use
3.14;strict"
// in use strict, it should have let var or const else
error will come

// Event capturing and bubbling

capturing - top to bottom
bubbling - botton to top
addEventListener mein 3rd parameter decide if it is bubbling or
capturing

// syn- work
sync and async
is happen one by one - jo pehle aaya usko pehle
priority
async - simuntaneously

// function currying

function sum(1)(2)(3);
it was very important

callback hell is bachne ke liye we use promises

json.parse - json to object

json.stringify - object to json(javascript object notation)

XMLHttpRequest
Get load

fetch() always return promise

90% promise consume krte hai, na ki create
/* Ajay Suneja */
Rest and Spead operator
Rest = combine string to array
spread - break

for api, we use aync and await

call - accepts individual elements as string

apply - accepts array
bind - we can make copy of original function and invoke later

object ke prototypes hote hai

set constructor has unique values and it is similar to array
(though it can have duplicate values)

myMap.forEach( () => {
}
)

WeakSet: object ko store kr skte ho but iterate nhi

Event bubbling is traversing from child to parent

and capturing is traversing
event.stopPropagation() fromthe
- stop parent to child
traversing from child to
parent and vice versa and only run for that div
event.preventDefault - stop the tag behavior and only
stop it at
engine level

closure - function ke andr function

memoization in js is same like useMemo in react.js

debouncing throttling - makes website better for performance
- avoid repetation of functions

situation:
on button click data gets saved to database but if user click
twice then data gets saved to database twice

so solved this issue with jquery

call stack queue and call back queue

DOM
absolute and relative

ESS6 let const, arrow function, destructing

methods of array
map, filter, reduce, foreach

map returns the value

foreach - does not return

16.8
class and functional

cleaner codes with the help of hooks

useEffect - includes all life cycle hooks

useMemo and useCallBack -

useMemo - memoize the value -
useCallBack -
how to pass data from parent to child

contextapi vs redux (state manager) has store

contextapi - data transfer from parent to child

actions in reducer

HOF
Global execution
Lexical Scoping
Hoisting - var and let/const is different

the more div, less ranking of page

tree shaking
lighthouse is a toll for audiing
✅ 𝑼𝑿 𝒅𝒆𝒔𝒊𝒈𝒏 𝒊𝒔 𝒂𝒍𝒍 𝒂𝒃𝒐𝒖𝒕 𝒊𝒅𝒆𝒏𝒕𝒊𝒇𝒚𝒊𝒏𝒈 𝒂𝒏𝒅 𝒔𝒐𝒍𝒗𝒊𝒏𝒈 𝒖𝒔𝒆𝒓
convert string to array
𝒑𝒓𝒐𝒃𝒍𝒆𝒎𝒔; 𝑼𝑰 𝒅𝒆𝒔𝒊 𝒈𝒏𝒊 𝒔 𝒂𝒍 𝒍 𝒂𝒃𝒐𝒖𝒕 𝒄𝒓𝒆𝒂𝒕𝒊 𝒏𝒈𝒊 𝒏𝒕𝒖𝒊 𝒕𝒊 𝒗𝒆,
let name = "Batra";
𝒂𝒆𝒔𝒕𝒉𝒆𝒕𝒊𝒄𝒂𝒍𝒍𝒚-𝒑𝒍𝒆𝒂𝒔𝒊𝒏𝒈, 𝒊𝒏𝒕𝒆𝒓𝒂𝒄𝒕𝒊𝒗𝒆 𝒊𝒏𝒕𝒆𝒓𝒇𝒂𝒄𝒆𝒔.
console.log(name.split(''));
✅ 𝑼𝑿 𝒅𝒆𝒔𝒊𝒈𝒏 𝒖𝒔𝒖𝒂𝒍𝒍𝒚 𝒄𝒐𝒎𝒆𝒔 𝒇𝒊𝒓𝒔𝒕 𝒊𝒏 𝒕𝒉𝒆 𝒑𝒓𝒐𝒅𝒖𝒄𝒕
console.log(Array.from(name));
𝒅𝒆𝒗𝒆𝒍𝒐𝒑𝒎𝒆𝒏𝒕 𝒑𝒓𝒐𝒄𝒆𝒔𝒔, 𝒇𝒐𝒍𝒍𝒐𝒘𝒆𝒅 𝒃𝒚 𝑼𝑰
console.log([...name]);
✅ 𝑼𝑿 𝒄𝒂𝒏 𝒂𝒑𝒑𝒍𝒚 𝒕𝒐 𝒂𝒏𝒚 𝒌𝒊𝒏𝒅 𝒐𝒇 𝒑𝒓𝒐𝒅𝒖𝒄𝒕, 𝒔𝒆𝒓𝒗𝒊𝒄𝒆, 𝒐𝒓
𝒆𝒙𝒑𝒆𝒓𝒊𝒆𝒏𝒄𝒆; 𝑼𝑰 𝒊𝒔 𝒔𝒑𝒆𝒄𝒊𝒇𝒊𝒄 𝒕𝒐 𝒅𝒊𝒈𝒊𝒕𝒂𝒍 𝒑𝒓𝒐𝒅𝒖𝒄𝒕𝒔 𝒂𝒏𝒅
𝒆𝒙𝒑𝒆𝒓𝒊𝒆𝒏𝒄𝒆𝒔.

callback - function inside function

JS is a sync single threaded language
callback makes it a async
Interview Questions

var function scope

let & const block scope
Template literals (Template strings) ${} '
Methods startsWith(``)
endsWith(``)
includes(``)
repeat(n)
Array Destructuring let [a,b,c] = array
Swap 2 variable without 3rd variable
Object Destructuring let {a,b,c}
var names=should
objectName
be same. It can be
different if used []
const sum = () => {
Fat Arrow function } console.log(`${a *b}`);
Default parameter }
Rest parameter ... (3 dots)
sum(...Arr);
Spread Operator Ouput is: 4

<h> <p> Heading

<b> <i> <u> <del> <sub> <sup> Paragraphs
Text Formatting
Styles

<!-- --> Comments

<h1> Welcome to the Club </h>
<h1> is a tag,, element is combination of tag and data
<h1 style= "color: ; background-color:"> https://flatuicolors.com/
<a href = " " target = "_blank" > Link Text </a>
by default is target = "_self"
text-decoration:none to remove underline on link em
title in href is hover text span
<img src= " "> div - non semantic tag
<br> tag to go to next line hr
<hr> horizontal line abbr title="Hello ji"
<b> </b> tag is not used for bold statement as well as
What
<i> </i>is tag
semantic HTML
is used for italic. Instead of these we use ul style="list-style:circle;"
<strong></strong> and <em></em> tags ol type="a/A/1"
What
createisaan image
nested map? - in
webpage Have
HTML?to study
- The HTML <iframe> tag <img src="link
semantic here"
tag like alt="text">
header, footer,
defines an inline frame. section, article
External,
Class andInternal
ID - 10 and
meinInline
9 log bade hai, ek chota hai, chote ko
ID dedo and 9 ko class
class - . dot id = # hash
width height background-image background-repeat
background-attachment:fixed;
font-family, color, letter-spacing, word-spacing, text-align, text-
transform
ol ul - list-style-type: upper-roman/square;
Visible, Hidden, Scroll, Auto also called as overflow
Grids
FlexBox

movieapp
tech news website https://www.youtube.com/watch?v=udYgxSPPpg8&a
Figma https://www.youtube.com/watch?v=KWgYD8tYexo&

ES6 Features
Rest and Spread Operator
Async/Await Promised Callback
Closures
Call Apply Bind
Map Filter Reduce
Prototypes
Map, Set, WeakMap, WeakSet
Hoisting
Event Bubbling, Capturing, Propagation
Currying
Memoization
Debouncing
Throttling
Batra - 'B', 'A', 'T', 'R', 'A'
Display array of object - console.table(array name)
function addNum(a,b,c,...other){
console.log(other);
return a+b+c;
};
const out = addNum(1,2,3,4,5);
console.log(out);
ES5 mein argument send krte the but in ES6 we use rest(output in
Output:
// Spread operator
array)
[4,5]
const arr = ['red','blue','green'];
6
const arr1 = ['red','blue','green','white','black'];
const newArr = [ ...arr[],'white','black'];
use to combine
Syantx is same as Rest Parameter but
working is opposite (used to break)

incline element - all words comes in one

line
incline element - all words comes in one
line;
block&nbsp
elementforand
space
this is difference
between span and div
horizontal line
show text on hover

incline element
gives cleanliness to code
Github Front End RoadMap
https://github.com/andreibarbu5 6 Pack Programmer
https://github.com/TechGun?tab=repositories Gaurav
https://github.com/priya42bagde/reactjspagination
https://github.com/vidhya-balasubramanian/portfolio
https://www.linkedin.com/in/orarbel1/ Code Step by Step
https://www.linkedin.com/in/kajal-sharma-379797b1/ Thapa
15 GitHub repositories to become a React master (start learning now) 👇👇
1. ReactJS https://lnkd.in/dwFxgkUA Ajay
2. React-18-workshop https://lnkd.in/d-D4DV7C 6 Pack Programmer
3. under-the-hood-reactjs https://lnkd.in/dHjsedRm
4. react-developer-roadmap https://lnkd.in/dJc-5SnN Ajay
5. react-in-patterns https://lnkd.in/dU7P5kHq Thapa
6. 30-days-of-react https://lnkd.in/dtVtBsPh Flex
7. real-world-react-apps https://lnkd.in/dVQEygdV Fixed Header
8. react-bits https://lnkd.in/dWMEFh2p Full Screen Video
9. react-redux-typescript-guide https://lnkd.in/dfNbTsyk Embed YT Video
10. awesome-react-components https://lnkd.in/dfveGCDW YT API
11. hocs https://lnkd.in/d-uHPqwa YT Stats
12. react-use https://lnkd.in/dPvm_s8r Google API List
13. beautiful-react-hooks https://lnkd.in/dQTT_9Ug CSS
14. react-cheatsheets https://lnkd.in/dy7HYFBN Routing in React
15. react-hooks-cheatsheethttps://lnkd.in/dHdmbjfu CSS Videos
https://github.com/Aayushjain-code?tab=repositories Best YT Channel
useRef
https://github.com/OakAcademy/React-Redux
https://github.com/chetannada/Namaste-React

Articles

ReactProjects
nd RoadMap
HTML & CSS & JS
Real Work https://www.youtube.com/watch?v=Xh9UXvQjvL8&ab_channel=WebDevelopmentWithGaurav
https://www.youtube.com/watch?v=2YOXDf-cfc8&list=PLNOuQkG_Vs6qiFqVoJBdY2Tl8zcn7HdZ

Javascript Interview https://www.youtube.com/watch?v=SFgppU2J8To&t=1s&ab_channel=CodeStepByStep

GIT https://www.youtube.com/watch?v=A2R-CMMyp64

ES6 Playlist https://www.youtube.com/watch?v=sOZwwL_-cBA&list=PL_HlKez9XCSM0bs8P7LtCTGh4rghA

Reactjs Series

Reactjs Interview https://www.youtube.com/watch?v=nYhGCby2bXA&list=PL_HlKez9XCSNTiceK7OGVQD8dQk

Reactjs Login Logouthttps://www.youtube.com/watch?v=T1wbLNvQImk&ab_channel=ThapaTechnical
https://www.youtube.com/watch?v=5qVuORLniwM&ab_channel=CodeWithHarry
https://www.w3schools.com/howto/howto_js_sticky_header.asp
https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
https://www.youtube.com/watch?v=9YffrCViTVk
https://www.youtube.com/watch?v=1Vb1WjbFdLw&ab_channel=AjithJojo
https://www.youtube.com/watch?v=cyXQFjD_RAE
https://console.developers.google.com/
flatuicolors.com
(1161) routing in react js | how to navigate from one page to another page in react - YouTube
(1183) Top 20 CSS & Javascript Effects | March 2020 - YouTube
https://www.youtube.com/@CODERSNEVERQUIT
https://www.youtube.com/watch?v=s6UAuFzL308

https://www.freecodecamp.org/news/build-a-react-application-with-load-more-functionality-re
https://javascript.plainenglish.io/create-a-fullstack-banking-application-using-react-e8c96d74cd

https://www.youtube.com/watch?v=ym3aaodVQIU&list=PL_pNGipveQXxpO0_h2sR28OlZvUVgf4
=WebDevelopmentWithGaurav
kG_Vs6qiFqVoJBdY2Tl8zcn7HdZ6&ab_channel=DeveloperSachinGupta

annel=CodeStepByStep

Kez9XCSM0bs8P7LtCTGh4rghAD2im&index=1&ab_channel=TechnicalSuneja

Kez9XCSNTiceK7OGVQD8dQk9R4CaN&index=2&ab_channel=TechnicalSuneja
=ThapaTechnical
l=CodeWithHarry

her page in react - YouTube

with-load-more-functionality-react-hooks/
ication-using-react-e8c96d74cd39

ipveQXxpO0_h2sR28OlZvUVgf4oG&index=1
Link https://github.com/typicode/json-server
Download POSTMAN from Google or extenhttps://www.postman.com/downloads/
YT Video https://www.youtube.com/watch?v=1zkgdLZEdwM
Mock APIs https://jsonplaceholder.typicode.com/

npm install json-server

npx json-server --watch db.json
npx json-server --watch db.json --port 3002
Learnings:
Side Projects:

1. Add to Cart + Qty , Upload File + Search(get api)

Item Added to Card + Count Qty = 2 different components
if I click
for classon countwe
based, qtyuse
then item component
React.Memo() andshould not re-render
for function
useMemo()
use of redux can be explained here as well

made form to upload data

file upload in csv, and render on screen - allow CRUD operation
use of map and key
button click - disable unless all data is stored
useState e.target.value or useRef()
search item using get method - debouncing and throttling

depends what is the requirement

forEach or Map, filter, reduce

used Pagination to see list of items belong to this site

used redux as state management

Now planning
developed wentfortoCustomer and and
poland team Supplier
they Portal
want me to again work
on Warehousing applications
Since almost 2years, I am managing operations
Techstack - Cando UI framework

Agile methodology (Logi Analytics, Spark, Apache Cassandra)

Write daily responsibilities here

API - frontend wale API consume krte hai na ki create

how to effectively call API
usememo reactquery fetchAPI

Login Popup is not coming

validation changes

forms
button onclick={}
or
<form onSubmit={}
<button type="submit">

how to make ajax calls from redux?

prop drilling
can we have multiple reducers in component
how do you merge them - using combined reducer

What is DOM - structure of page having different tags and

elements

diff between single and multi page

elements - div
class components - props and state - immutable - we cannot
change value
when we change state, we use class based components
render components again and again - we use functional
react 16.8,
exp: use we down
drop use hooks especially
for printers, for updating
we use useStatestate
to open in
multiple pages

e-commerce project
checkout pdf page
orders
status returning
consignment
work order phase - routing

how do you authenticate users? login process

at the time of login, user create tokens and store at localstorage
where do you store in server side
how do you call APIs
connect react to redux
Redux? Flow of Redux
Good command on CSS3 - flexbox and grid
Good command on EC6 -

ToDo CRUD, Pagination

used pagination - show 10 items in a list: user can increase that as well
used CRUD - item add / delete / update qty / delete

ES6

Event Bubbling - propagation from child to parent tags

Event Capturing - propagation from parent to child tags - very less used
Stop Propagation - event.stopPropagation();
Immediate Propagation - event.stopImmediatePropagation();
Prevent Default - event.preDefault() - stop its natural JS engine
yes, how to implement that

before 16.8 we were passing state via props

we use postman, enter uid and pwd
function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?,
ifoptions?)
class based
connect is a HOC
1. How do you authenticate users? login ES6
process?
at the time of login, user create tokens and reactjs - Hooks (projects)
store at localstorage redux -
where do you store tokens in server side Chakri UI - bitcoin
projects
Basic - password stored in db
Auth (id)
SSO CRUD - toDoList
pagination - news/quotes
search, filter - ecommerce
2. How do you call APIs? Rest APIs or redux project
GraphQL basics - cookies, sessionstorage, cache
REST endpoints bana liye hai - JSON
khud ke new endpoints
legacy code ka wrapper bana rhe hai

3. Are we using Redux? because it is used with

React.js and Angular
NgRx - framework used in Angular same like
Redux in React.js
follow principles to use it
4. how to make ajax calls from redux? - no we did
not use that

5. Exception
backend handlingclass banayi hai based on
- customer
module,
404 aanewe redirect
ki bajai, to frontend
proper error ayeyga in case of
GET

6. Application kispe build kiya hai ? example:

spring, maven
building an application with spring
spring mvc
maven - build
docker - deployment hota hai,
future mein jenkins ki pipeline banaeyge

7. kis component ke andr likhte ho ke konse env

ko hit krna hai?
mein
sourcekisconnection
env mein kaam kr rha
ye to ho devhoon
env hai, sit env
hai
we set profile fir wo env ki configuration
properties pick kr leta hai
we set profile in jenkins

8. transporter is used for deployment

Manual deployment

sprintboot
legacy (JSP) - new tech stack(angular, cando
framework UI)
JSP - codebase
ifuseSelector
function based
(to call redux and useDispatch(to
store it)
ionstorage, cache
Clone Branch
git clone http link
cd <folder>
git checkout -b <branch name> -- keep something like code/stage/feature1
git add .
git commit -m "

Delete any branch on github

Open Git Bash and cd to the current folder and run following commands

git fetch -a
git checkout main
git branch -d manohar
git push origin --delete manohar

Add

git clone http link

cd <folder>
git checkout -b <branch name> -- branch name should be JIRA code
git pull origin <own branch name>
add files in folder
git status - red (modified)
git add .
git status - red to green color
git commit -m "message"
git push origin <own branch name>
fish shell for auto commit
Config
git config --global user.name "Manohar Batra"
git config --global user.email "manohar.barea@ibm.com"
Learn how to crehttps://stackoverflow.com/questions/18216
Open VS Code and type below commands
git tag -a v1.0.0 -m "description"
git push origin v1.0.0

Edit
git config --global --edit

git init
ls -a (git trackig files)

git status - show all changes

git add <filename> - send file from working directory to staging area
or
git add . (to send all files from work directory to staging area)

git status - now above file will come under staging area
where we hold our changes before commit

git commit -m "message of commit" : -m means message

git log - check log of how many commits

Modify file again and save it and run

git status - you will

cmd + k for clear

ow.com/questions/18216991/create-a-tag-in-a-github-repository
 render again instead whole
why should we use react.js structure
server side rendering
unidirectional data flow or data
binding
reusable/composable UI
components - class or functional
with reactjs, we can use javascript dir
otherwise
jsx, same in html,
like webut
html, need to use
have js script tag to use js
code in it
single
jsx has page application
rule that every tag will be closed
exp <img> tag need not to be closed in html but in reactj
Hooks
useState - store array, js functions like add, subtract useEffect has automatic cleanUp function to avoid memo
useEffect - especially
useContext used
- Send data while
from Appfetching data component
to Last child from APIs instead To deal with side effects, we use useEffect
to all components
useRef (to avoid
- find and select prop drilling)
any element like we do with and another is useContext Hook
getElementByID
useReducer

}Lazy Loading / Code Spiltting

export default App; In React, there is a feature to support code splitting and
only Home should trigger Home
useMemo can be used

Destructing
document.getElementById("demo").innerHTML = cars1;
M,a,n,o,h,a,r
document.getElementById("demo").innerHTML = text; for/of loop

Different Ways To fetch Data from API👇

1. using fetch API - promise returns resolve/reject promise return krta hai jisko hume handle krna hota hai
2. using Async - await syntax here we use try and catch to capture error
3. using Axios library if using npm
4. using custom react hooks
5. Use React query library
6. using GraphQl API

ES6
Closures
const store = sum(1); // function is stored in store variable
console.log(store(2));

Curring
console.log(res); Infinite Curring

Prototypes in JS - Same like inheritance

console.log(obj1.getName()) // Manohar
console.log(obj1.name) // Manohar

Prototype - Array to Object

console.log(cities.ArrayToObject())
call one time
Call, Apply, Bind bind - multiple time reuse
call pass argument
apply - pass arguments in an array
Memoization Same like useMemo hook
Save input and output in cache
console.timeEnd();

A componentDidCatch lifecycle method for performing o

Error Boundary A render method for rendering our error boundary’s chil
static getDerivedStateFromError(error) while displaying data, it captures error which componen
componentDidCatch(error,info) or use import { useErrorHandler } from 'react-error-boun
App.js }ShowComment.js
export default App export default ShowComment

HOC - High Order Component }https://www.youtube.com/watch?v=T-ikEWSQn20&

Function takes component as a parameter & return new component }
Use of HOC: share same logic among different components
Example:
increment logic is written in HOC loading logic during fetch data
2 components using increment
export default HOC(IncrementOne)
export default HOC(IncrementTwo)
All increment logic is written in HOC - data is passed to both comp via props

Importance of Keys
Explaination starts from Diffiing Alogorithm
Conclusion: Virtual and Real compares node by node
If any tag differs then whole component re-renders
problem occours if item is added in beginning in li tag
to avoid this situation, we use keys
Usage: CRUD operation

React.Memo and useMemo()

https://blog.logrocket.com/react-memo-vs-usememo/

React.memo has same representation as HOC export default HOC component(child component)

We’ll take the same example above but use React.memo() in our <Counts /> component. All we need to do is wrap our <Coun

useMemo() Hook useMemo()

memoization - cache is a JS concept to improve performance return memoized
useMemo result value
ko cache mein
useMemo and useCallback to improve performance khud store kr leta hai
useMemo - reactjs concept stop re-rendering runs only if its dependencies changes

UseRef and useState Now when the form is submitted you can access the form
import React, {useRef} from 'react'

const App = () => {

const userNameRef = useRef();

const userAddressRef = useRef();

const handleSubmit= (e) =>{

e.prevent.Default();
console.log(userNameRef.current.value);
console.log(userAddressRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input type ="text" ref={userNameRef} />
<input type ="text" ref={userAddressRef} />
<input type="submit" />
</form>
)
}

export default App

How to
async handle
await async operation
- ES6
in callback, parent function also renders to render child f

Optimization Techniques

React.profiler
Code Splitting (destructuring) / Lazy loading - display on demand
clearSettime
eventListeners
useMemo and useCallback - improve performance
Debouncing and Throttling

exp: consider a button inside div

Event Bubbling - propagation from child to parent tags
Event Capturing - propagation from parent to child tags - very less used
Stop Propagation - event.stopPropagation();
Immediate Propagation - event.stopImmediatePropagation(); <form onSubmit={}
Prevent Default - event.preDefault() - stop its natural JS engine <button type="submit">

componentDidMount : first time

component lifecycles rendering - useEffect : whenever
componentDidUpdate
in class, we use render method state gets changed - useState
in functional - no render method - stateless - hooks componentWillUnmount

Controlled
In vs uncontrolled
a controlled component, components react js by a React
form data is handled
component.
The alternative is uncontrolled components, where form data is onchange = {e.target.value}
handled by the
handler for DOM
every itself.
state update, you can use a ref to get form values <input type = "text" ref= {input} />
from the DOM.
We can use useState as well
Cookies & SessionStorage

created at server side, stored at client side showing ads - because of adSense - based on history
sessionID stored in client machine -
wesbite walo ne kya action kr rkhe hai - cookies are used to identify user so delete search history
last
loginpage visit, lastand
in facebook item viewed
delete cookies
apne aap logout ho jaeyeyga
size of cookie - 4 kb
Commands
Session Storage sessionStorage.setItem("key", "value")
http is stateless let lastname = sessionStorage.getItem(
if maintain state among pages, then use session sessionStorage.removeItem("key");
session made at server end sessionStorage.clear();
that's why we are able to logout

Browser has a feature of local storage and session storage

session storage -browser open - data there, browser closed - data gone
but data remains there in local storage

JWT - JSON Web Token

combination of
Header - Algo,
Payload - Userid and Pwd
Verify Signature - Secret Key

If having more than one server, then comes Apache Load Balancer
Balancer sends request to that server where request load is less
stored in sessionstorage/cache (now used)
cache - destroy automatically on browser closed

When logged in, gives us unique auth token, now I want to call 2 api, to auth again without uid and pwd, we use JWT
uid and pwd can't be stored in browser - becoz of security

SASS / CSS
SASS is a CSS preprocessor or called CSS superset
1. We can write variables
2. Write
While CSS
you like
can programming
also language
use import with exp if else,
traditional inline
CSS but comment,
each functions
import will etcextra HTTP request to your server which is n
cause an
whereas SASS will be compiled and processed into single CSS file
4. Allow inherit concept - use keyword extend to inherit properties from another class, id or tag

async defer in js
<script src="demo_defer.js" defer></script>
HTML5/CSS3
relative - relative to its original positon
absolute - relative to nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):
float - element will lose its original position

@media screen and (max-width: 480px) { Laptop and Tab - viewport

body {
background-color: lightgreen;
}
}

Saga vs Thunk
Thunk is based on promises
Saga is based on generator function
Saga generator function and yield will run whatever is inside i

Thunk
How to convert Class Component to Functional Component with Hooks in React js

1. Change the class to a function.

2. Remove the render method.
3. Convert all methods to functions.
4. Remove references to this.
5. Remove constructor.
6. Remove event handler bindings.
7. Replace this.setState.
8. useEffect for state update side effects.

Deep Copy vs Shallow Copy: Deep shallow or shallow deep

Shallow
Two Copy:Employee and newEmployee
Objects:
var newEmployee
To overcome = employee;
this problem, deep // Shallow
copy copy
is used.
If one of them is removed from memory, the other one ceases to exist. In a way the two objects are interdependent

Deep ifCopy:
Also, one of the objects is deleted the other still remains in the memory.
Now to create a deep copy of an object in JavaScript we use JSON.parse() and JSON.stringify() methods.

State vs Prop childsName: newName });

this.setState({
}

Hoisting
ReferenceError: Cannot access 'number' before initialization while this new error says ReferenceError: number2 is not define
It means JS engine finds let variable but it is not initialised
let/const variables are hoisted but not accessible: it's called the Temporal Dead Zone.
 Best Practises
separate directory for components, styles etc
but we can send data from child to parent via props make reusable components
props ke andr function bhejna hai - state lifting media folder - logo, images and videos
useContext Hook also works configuration - certificate authenicate ho rha hai na ke nhi, sec
ed to use script tag to use js before doing anything on objects, we check if this object does
debug - install redux dev tools extension
will be closed debug - use border style before using any css tags
o be closed in html but in reactjs it is mandatory eventListeners should be removed after usage
pehle manual data daalo and then make it dynamic
leanUp function to avoid memory leakage
we use useEffect
t Hook

e to support code splitting and lazy loading. React allows us to use dynamic imports on React components via the 𝐥𝐚𝐳𝐲() function. For the
About Contact

sko hume handle krna hota hai

to capture error
 console.log(res('name'));

bind - function ko call kro, store kro and then usko kbhi bhi call kro when needed

ecycle method for performing operations when our error boundaries catch an error, such as logging to an error logging service
dering our error boundary’s child or the fallback UI in case of an error
aptures error which component is giving that error
andler } from 'react-error-boundary'
ErrorBoundary.js Limitations
2. Async code such as setTimeout
export default ErrorBoundary; 3. Error from the ErrorBoundary itself

om/watch?v=T-ikEWSQn20&t=439s
onent(child component)

e need to do is wrap our <Counts /> component with React.memo() like below:"

useCallback()
return memoized
useCallBack function
poore function ko cache mein store kr
leta hai
child.js - having some other functionality: export default memo(child)
also in parent.js if click in increment, child will be called, to stop that use we use callback in function

bmitted you can access the form fields value using 𝘳𝘦𝘧. 𝘤𝘶𝘳𝘳𝘦𝘯𝘵. 𝘷𝘢𝘭𝘶𝘦
on also renders to render child function

Controlled
entirely by aComponents
React component and a hook called Uncontrolled Components
useState Uncontrolled components are controlled by the DOM instead of an
useState is a hook that automatically refreshes the applic Uncontrolled components use the useRef attribute. You can use use
Form elements become controlled elements once the value We first bring in the useRef hook then we use a ref attribute in our
It will track every change done to the form (every input doThis gives us access to the submitted form information.
adSense - based on history

To
To do
usethis,
this we useyou
value, the would
JSON.stringify() methodit before
have to convert back topassing to setItem().
an object.
by using JSON.parse() method, which converts a JSON string into a JavaScript object.

d and pwd, we use JWT

quest to your server which is not good

viewport, like fixed):

eld will run whatever is inside it

ts are interdependent

methods.

ceError: number2 is not defined.

 To kill existing running server on port 9900, you can run following com
nts, styles etc
kill -9 $(lsof -t -i:9900)

icate ho rha hai na ke nhi, security

s, we check if this object does not have null or undefined values

using any css tags

make it dynamic

via the 𝐥𝐚𝐳𝐲() function. For the dynamically imported components, we can wrap them in the 𝐒𝐮𝐬𝐩𝐞𝐧𝐬𝐞 component to show a 𝐟𝐚𝐥𝐥𝐛𝐚𝐜𝐤
error logging service

elf
 rolled by the DOM instead of an individual component.
useRef attribute. You can use useRef as a way to access values from the DOM.
hen we use a ref attribute in our JSX to give the current value to our ref variable.
ed form information.
port 9900, you can run following command.

𝐩𝐞𝐧𝐬𝐞 component to show a 𝐟𝐚𝐥𝐥𝐛𝐚𝐜𝐤 UI while we wait for the component to load.
immer
lodash
https://www.npmjs.com/package/react-multi-carousel
beautiful DND
List of frontend System coding questions

💥 Entry Level (0-3 years of experience)

In most companies this level will not have #frontend #systemdesign interview.

💥 Intermediate Level (3-5 years of experience)

📌 Auto complete
📌 SplitWise Application (Importance is given to handling all the cases)
📌 Properly handling authorisation and authentication
📌 Basic e-commerce application
📌 Todo application with multimedia option
📌 Email applications like gmail, outlook
📌 Video/Audio calling applications like google meet or zoom

💥 Advanced Level (5+ years of experience)

📌 Banking Application (Focusing on security aspects)
📌 Ticket booking applications like Redbus/BookMyShow
📌 Streaming applications like Amazon Prime or Netflix
📌 Youtube (Though it's streaming, Youtube is altogether a different system)
📌 Chatting applications like Whatsapp, Snapchat
📌 News feed application like Facebook, Twitter
📌 Collaboration tools like Slack
Link: Typescript Docs https://www.typescriptlang.org/docs/handbook/2/basic-types.html
npx create-react-app typeapp --template typescript
npm install react-icons

string = "Manohar"
name name = 1

}Object
? means optional

Function
displayName("Manohar Batra");

void returns undefined but never does not return anything

any or unknown

}
// if it has arguments then getName: (name: string) => void;
}
ook/2/basic-types.html
To check if an object is empty or not, we can make use of Object.keys() method.
Example:
const myObj = {};
console.log(Object.keys(myObj).length); // 0

Converts
let text = a"ABCDEFG"
string to an Array
const myArr = Array.from(text);
Output: A,B,C,D,E,F,G

https://stackoverflow.com/questions/16626735/how-to-loop-through-an-array-containing-objects-and-access-their-p
Map
);
};
});

console.log(anyAdult); //true

console.log(newArray); // [100, 200, 300]

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);

console.log(sum); // 600 = 0 + 100 + 200 + 300
console.log(myArray); // [100, 200, 300]
console.log(newArray); // [{x:200}, {x:400}, {x:600}];
const studentGrades = students.filter(student => student.grade >= 90);
return studentGrades;

console.log(petCounts);
}https://bobbyhadz.com/blog/react-filter-array-of-objects
 Promise all Settle https://www.youtube.com/watch?v=2hWuu6qG

Filter Data by Date Range

https://stackoverflow.com/questions/31977724/how-to-filter-jso

gh-an-array-containing-objects-and-access-their-properties https://www.freecodecamp.org/news/javascript-array-of-objects
}) https://stackoverflow.com/questions/55070403/map-3-arrays-o
console.log(op); console.log(result);

// {id: 3, name: 'Carl', 'country: 'Canada'}]

ube.com/watch?v=2hWuu6qGxRY

ns/31977724/how-to-filter-json-data-by-date-range-in-javascript

ws/javascript-array-of-objects-tutorial-how-to-create-update-and-loop-through-objects-using-js-array-methods/
ns/55070403/map-3-arrays-of-objects-by-key-in-javascript
g-js-array-methods/
const {createStore} from 'redux';
const store = createStore(reducer);

Action is an Object having type(means CRUD) and payload(means data)

dispatch
based anaction to reducer
action.type, - store.dispatch(action
something object name)
is executed and returned

fetch data from store - store.subscribe(() => { })

means data)
but with the help of middleware, we pass functions to reducer instead object
there should be root reducer which is being passed to store and this store is written in App.js
Store data in form of object
form of object
export default App
Reactjs Code Splitting Lazy
Reactjs Weather API
Reactjs Weather API
Reactjs Weather API
Reactjs React Animation
Different ways to/navigate
setTimeout
from
one page to another page.
𝐉𝐚𝐯𝐚𝐬𝐜𝐫𝐢𝐩𝐭 𝐬𝐞𝐭𝐓𝐢𝐦𝐞𝐨𝐮𝐭()
Reactjs useState and useRef
Reactjs without react query
https://www.linkedin.com/posts/rabi-siddique_100daysofcodechallenge-webdev-webdeveloper-activity-6997628280
https://home.openweathermap.org/api_keys
e16caabfc774583c09903b8fa9cc644b
https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}
https://www.linkedin.com/posts/pushpendratips_pushpendratips-react-javascriptdevelopers-activity-699899629396
https://www.linkedin.com/posts/priya-bagde_javascript-typescript-reactjs-activity-7001489529534623745-akd8?utm
https://www.linkedin.com/posts/jaya-sharma-awasthi_%3F%3F%3F%3F%3F%3F%3F%3F%3F%3F-%3F%3F%3F%
https://www.linkedin.com/posts/mohammed-maknojiya_html-content-css-activity-7004326714260500480-VUZz?utm
https://www.linkedin.com/posts/aamir-muhammad-amin-a80a0421a_reactjs-activity-7006688038080659456-9GCF?
bdev-webdeveloper-activity-6997628280547733504-Hlcp?utm_source=share&utm_medium=member_desktop

name}&appid={API key}
ascriptdevelopers-activity-6998996293964468224-BISM?utm_source=share&utm_medium=member_desktop
window.location
BrowserRouter in react-router-dom library
3F%3F%3F%3F%3F%3F-%3F%3F%3F%3F%3F%3F%3F%3F%3F%3F-ugcPost-7001403347354193920-nCfP?utm_source=share
activity-7004326714260500480-VUZz?utm_source=share&utm_medium=member_desktop
js-activity-7006688038080659456-9GCF?utm_source=share&utm_medium=member_desktop
0-nCfP?utm_source=share&utm_medium=member_desktop