1) what is react?
- open source javascript library
- used for building use interfaces
- simplifies creation of SPA using reusable component
2) what are the key feature of React ?
- virtual DOM
- component based architechture
- reusability and composition
- JSX
- declarative syntax
- Community system
- react hooks
3) What is DOM ? difference between HTML and DOM ?
- DOM - document object model
- represent web page as tree like structure
- allows js to dynamically access and manipulate content of web page
HTML - hyper text markup language
- it is just language
- html will be represent as DOM tree in memory
4) what is virtual DOM ? difference between dom and virtual dom ?
- Dom is real without it any web app can not interact or handle js
- virtual dom is only specific to react
- in real dom when there is small change it will re render whole layout which is time consuming
- in react app, react library will make exact copy of real dom and show it - is virtual dom
- virtual dom only render the changes and whole page
- in background react library keep comparing the changes in virtual and real dom and only the changes will be updated in real dom
- this update process is done by react library, is called reconcilation
5) what are react components ? what are the main element of it?
- building block of react app
- reusable independed piece of UI which makes combined UI
- class or function based
6) what is single page application?
- web app which has only single web page.
- content is dynamically updated without refreshing or loading new page
7) what are the avantage of react?
- we can built SPA
- open source (free to use)
- lightweight and very fast (virtual dom)
- supported by large Community
8) disadvantage of react ?
- for static web apps it is not choice
9) what is role of JSX in react?
- javascript xml
- use to write HTML like code
- jsx is converted to javascript using tool like babel
- it is easy to write and read code
- use to write declarative syntax in react
10) what is difference between declarative and imperative syntax?
- declarative
- focus on desired output without specifying step by step process
- jsx is used to write declarative syntax
function App(){
return <h1>Hello</h1>
}
- imperative
- involve step by step process for same output
- javascript has imperative syntax
function App(){
const element =document.createElement("h1")
element.textContent = "Hello"
document.body.appendChild(element)
}
11) what are the main file in react ?
- index.html - single page for react app
- App.js - main container or root component
- index.js - entry point for js, render main react component(App) into root dom element
12) difference between react and angular?
13) how react provides reusability and composition ?
- reusability - we can re-use component in app - header has one small component
- composition - creating new component by combining small components - App.js has many component
14) what are state, stateless, stateful, and state management ?
15) what are props ?
- way to pass data from parent to child component
16) what is NPM ? what is role of node module ?
- used to manage dependency of project
- install, manage and share package of javascript
17) what is role of public folder ?
- contain static asset that are served directly to user browser
- image, font etc
18) what are role of src folder?
- src folder is use to store all the source code of app
19) what is role of index.html ?
- index.html is single page of react which render when any user request
19) what is role of reactDom in react ?
- react dom is javascript library that render component to DOM or browser
- index.js is js file that replace root element of index.html with newly render component
20) what is function and return in App.js ?
- it takes props as arg and returns jsx
- return is use to return element from function
21) what is babel ?
- used to transpile jsx to js
22) what is fragment ?
- group multiple element without adding additional Dom element
23) what is spread operator ?
- used to spread an array or object
24) difference between compiler and transpiler ?
- Transpiler -Babel - tool to convert code from high level language(JSX) to another high level language(javascript)
- Compiler -high level language to low level language
25) what is function and class component ?
- functional component
- it is javascript function
- stateless but with help of hooks we can manage state
- lifecycle methods - no
- more readable
- this keyword - no
- render method -no
- clas component - defined using javascript classes
- stateful component using lifecycle methods
- render method is responsible for returning jsx
- lifecycle methods - yes
- less readable
- this keyword - yes
- render method - yes
26) what is prop drilling?
- process of passing props from high-level component to a deeply nested component through multiple layers of component
- solution of it is redux and context
27) how to pass data between class component ?
- this.props is used in child component to access data from parent component
28) role of this keyword?
- refer to instance of class
29) what is routing and router ?
- routing - allows to create SPA with navigation without need of refresh
- react router - library for handling routing
- way to define different routes and their corresponding component
- enable navigation and rendering of different component based on URL
30) what are hooks ?
- react hooks are react function provided by react
- allow function component to use state and lifecycle feature
- way to provide stateful logic - managing component state, performing side effect, using life cycle methods
31) what is useState() hook?
- enable function component to mange state
- accept initial state as param and return array
- the first ele is current state
- the second ele is function to update state
32) what is useEffect() hook?
- used to perform side effect in function component - data fetching, subscription or ops which need to be performd after initial render
- what is side effect - when page initialy render but data from api take time to render is call side effect
33) what is useContext hook?
- to access within components provied by context provider
34) what are controlled component ?
- component whose form element can be controlled by state
35) what are difference bet controlled and uncontrolled component?
- controlled
- value are controlled by react state
- event handler update react state
- re-render on state change
- recommended and statndard practice of form handling
- uncontrolled
- value are not controlled by react state
- no state update
- useRef() used to change value
- less re-rendering
36) what is code splitting?
- technique to split javascript bundle into smaller chunk which are loaded on demand
37) how to implement code splitting in react ?
- use react.lazy method to lazily import component - component is loaded only when needed
- wrap component with suspense method to handle loading
- suspense component is use to display a fallback ui while lazily loaded component is being fetch
38) what is higher order component ?
- component which takes another component as argument and adds extra feature to it
39) What is importance of key in react?
- help react to identify which item have changed, added or deleted in list
40) what is react context?
- way to share data between component without passing through every level of component
- it creates context provider to provide data and consumer to consume data.
41) what is render()?
- it returns JSX
- it is called whenever updates to state or props
42) Use of setState()?
- use to update state of component
- when called react re-render component with updated state
- any child component also re-render
43) what is useRef()?
- creates a ref object that can hold value across render
44) what is useMemo?
- memoize value to prevent un-necessary re-computation
- react will reuse the previous result untill a and b changes
const result = useMemo(()=>{return a + b},[a, b])
45) what is useCallback()?
- memoize function to prevent un-necessary re-creation
- useful when passing callback as dependency to child component
const handleClick = useCallback(()=>{},[])
46) what is difference between state and props ?
- props are read-only (immutable) - State is mutable
- props to pass data from one to other component - state holds information within component
- Props can be accessed by the child component - State cannot be accessed by child component
- Stateless component can have Props. - Stateless components cannot have State
- Props are external and controlled by - The State is internal and controlled by
whatever renders the component. the React Component itself.
47) what is webpack ?
- Webpack is module bundler for JavaScript.
- It takes various assets, such as JavaScript files, CSS stylesheets, and images, and bundles them together
48) what is in public folder ?
- used to store static assets
- %PUBLIC_URL% to access public asset
49) what is pws ?
50) what is robots.txt ?
51) what is node module ?
52)
53) what is jslint and eslint ?
54) what are the testing framework use in js and nodejs ?
55) what is difference between map and filter ?
- Map - Used when you want to transform each element in an array
- Filter - Used when you want to select only certain elements that meet a specific condition.
56) what is prototype and how it works ?
57) what is difference between call, apply and bind ?
58) what is difference between spread operator and rest operator ?
59) what is difference between element and component ?
60) what is pure component ?
61) what is map, filter, reduce?
62) what is arrow function?
63) what is difference between observables and promises?
64) Mention Higher order component's practical uses
65) what is difference in react and next routing?
66) what is state management?
67) what is ref in react?
- ref is reference to a DOM element or an instance of a component.
- to access and modify DOM elements without using props, states
68) what is forwardref in react?
69) what is interceptor?
70) what is react fiber?
71) what are react lifecycle methods?
72)
73) what is lazy loading?
- technique of delaying the loading of certain components or assets until they are actually needed
- improve the initial loading time of a web application by loading only the essential resources required for the initial view
- React.lazy() function allows to load a component lazily as a separate chunk when it's actually rendered
74) how to manage nested routes in terms of role based routing?
