React Js

1. What is Reactjs?
A. React js is a javascript library, it was developed and maintained by
facebook. Mainly using the reactjs we can develop the faster web
applications compare to other technologies.

2. What is Dom?
A. Dom Means document object model(DOM)
It is a child object to the window, it is used to add dynamic content to the
html pages, and also to add dynamic validations.
When html document is loaded in the browser it becomes a document
object.

3. What is Real DOM?

A. Real dom is also called as a physical dom
B. It will work at the browser level
C. Every time it will create a memory instance
D. It will reload entire web application at a time
E. So consume more memory space but gives poor performance

4. What is Virtual DOM?

A. Virtual DOM is a logical dom
B. It will work at the react application level it self so it will occupy entire
memory space.
C. It will check the previous state with new state in the component tree
structure
D. If any modifications are there then only it will reload only updated
component or state
E. So it will consume less memory but it will improve high performance.

5. What is react features?

A. React features are
1. Jsx(Javascript xml)
2. Components
3. One-way-data binding
4. Virtual dom
5. Simplycity
6. Performance
6.What is jsx?

A. Jsx is an javascript xml, it is an extention to the javascript

B. Jsx is nothing but a combination of javascript, html, xml.
Advantages of jsx
It will combine 3 codes,
Javascript, html, xml tages.
It will make the react application more eligent and simple
It is a faster than regular javascript
It makes easier to create templates.
7.what is component?
A :- Component is a piece of code or fundamental building block of a React
application.
Every React application contains atleast one root component and n- no of
child components.
All components will form like as Tree structure in the browser at the time of
running a React application.
Every React component can have their own structure methods as well as API’s
There are two types of Components:-
a. Functional Component
b. Class Component
a. Functional Component  Functional Components will look like a normal
JavaScript Function.
it is also called as a stateless component because it is not maintain any internal
state.
it is use only Dynamic Data Display
b. Class Component  Class Component will look like a OOP’S class but
that should extend with React.component.
it is also called as a statefull component because it will maintain state with in
the component by using this.state.
it maintains the this.state as well as props also
class components are more complex than functional components because it will
follow components life cycle method
8.what is state ?
A:- state means need to maintain the data in with in the component. When ever
using the class based component it is a statefull component because it will
maintain state with in the component using this.state method .
whenever using the function based component it is called as a state less
component because it will not maintain the data with in the component but,
using the HOOK methods it will maintain the data in functional components
using the useState method
9.what is PROP’s?
A:- Props’s is nothing but a when pass data from parent component to child
component
10.How many ways we can pass data from one component to other
components ?
A:- we can pass data in 3 ways 1.Prop’s 2.callback function 3.context API
1.Prop’s :- Props’s is nothing but a when pass data from parent component to
child component
2.Callback Function :- it means pass the data from the child component to
parent component
3. Context API:- it will pass data from one component to any other component
with out any relationship. For example I have 20 components we need to pass
data from 1st component to 20th component that time using the Context API,
Context.Provider , Context.Consumer through that one we can pass the data

11. What is props drilling?

A. Props drilling means it will pass data from parent component to child
components.

B. For example I have 20 components, need to pass data 1st component to last
component (20th component), that time we can pass data one component to two
component two to three component and three to four component any way we
can pass 20th component. But if any component is not working means getting
error it will not pass data nth components this is the draw back props drilling.

C. To overcome this problem we are using the context api or redux

architecutre.

12. What is Context Api?

A. Context api means it will pass date from one component to any other
component with out any relation ship using the context.provider and
context.consumer.

13. What is re-consolation?

A. Re-consolation in the sense it will update the only updated component.

14. Life cycle methods in react.?

A. There are 4 phases

1. Initial phase

2. Mounting phase

3. Updated phase

4. Unmounting phase

Initial phase : initial phase available only constructor method.

Mounting Phase : in mounting phase

1. Constructor

2. getDerivedStateFromProps

3. Render

4. componentDidMount

Updating Phase:

1. getDerivedStateFromProps

2. shouldComponentUpdate

3. Render

4. getSnapshotFromBeforeUpdate

5. componentDidUpdate

Unmounting phase

1. componentWillUnMount.

15. Functional based lifecycle method?

A. In function based there are 3 lifecycle methods

1. componentDidMount

2. componentDidUpdate

3. componentWillUnmount

ComponentDidMount:

Whenever using the useEffect methos it will pass the 2 arguments 1st argument
as a callback function 2nd argument as a empty dependencey array. That time it
will call as a componentDidMount.

Function App(){

useEffect(()=>{

Fetch(‘url’);

}, [] )

Return(

<div

</div>

componentDIdUpdate: Whenever using the useEffect method it will pass the 2

arguments 1st argument as a callback function 2nd argument as a instead of
empty dependency array it will pass state or props that time it will call as a
component didUpdate Method.

Function App(){

useEffect(()=>{

Fetch(‘url’);

}, [data] )

Return(

<div
</div>

componentWillUnmount: inside useEffect methos one return after one

function. It is called as a cleanup operations like remove the DOM.

Function App(){

useEffect(()=>{

Fetch(‘url’);

Return function(){

//code

}, [] )

Return(

<div

</div>

16. What is Hook Methods?

A.Hooks are nothing but a new features also called as a In-Built functions.
Hooks are introduced in React V16.8.0 version.
Hooks are backward compatible with old features of Reactjs which means it
does not contain any breaking changes.

When to use Hooks:-

1. using hook methods we will maintain state in function component

2. Fetch and Consume data third party API’s from server

3. We can get updated state from Redux store

HOOKS RULES :-we are having mainly two rules in Hooks.
A.call hook methods from react functions only

B. only call hooks at the top level of your react function i.e..,don’t call hooks
inside loops,conditions or nested functions and class component

C. Don’t call hooks from regular javascript functions

There are some hook methods :-

1. useState

2. useEffect

3. useMemo

4. useCallback

5. useRef

6. useReducer

7. useContext

8. useSelector

9. useDispatch

10.useStore

Details about Hook Methods:-

1. useState():- useState is a hook method which is used to manange state in

functional component.

useState will take two arguments a.state variable

B. Setter method

Example :-const [name,setName]=useState(“veera”);

const [city,setCity]=useState(“atp”);
2. useEffect:-useEffect is a hook method it is equalent to the 3methods

1.componentDidMount

2.componentDidUpdate

3.componentWillUnmount

ComponentDidMount:

Whenever using the useEffect methos it will pass the 2 arguments 1st argument
as a callback function 2nd argument as a empty dependencey array. That time it
will call as a componentDidMount.

Function App(){

useEffect(()=>{

Fetch(‘url’);

}, [] )

Return(

<div

</div>

componentDIdUpdate: Whenever using the useEffect methos it will pass the 2

arguments 1st argument as a callback function 2nd argument as a instead of
empty dependency arrayit will pass state or props that time it will call as a
component didUpdate Method.

Function App(){

useEffect(()=>{

Fetch(‘url’);

}, [data] )

Return(
<div

</div>

componentWillUnmount: inside useEffect methos one return after one

function. It is called as a cleanup operations like remove the DOM.

Function App(){

useEffect(()=>{

Fetch(‘url’);

Return function(){

//code

}, [] )

Return(

<div

</div>

3. useMemo():- useMemo is a hook method whenever using the useMemo it

will return as a memorized value

Ex:- I have one component there is a one calculation part is there once
application Re-render it will get directly value no need to calculate again and
again.
4.useCallback():- useCallback is a hook method whenever using the
useCallback it will return as a memorized function

Ex:- I have one parent component inside some child components once parent
component state is updated it will Re-render the inside child components also
need to avoiding that we are using the useCallback

5.useReducer():-useReducer is a hook method it recieves a input and based on

the dispatch action and value it will give us the modified updated state

Ex:- const[state,dispatch]=useReducer(state,action){

Switcth(action.type){

//code //

6.useRef():- useRef is a hook method it is mainly using the focus on the input
field

7.useContext():- useContext is a hook method it is used to get and consume data

in children elements without using redux.
Mainly using the useContext pass data from one component to any other
component with out any relationship

17. Difference between React and Angular?

React Angular

1.React is JavaScript library 1.Angular is JavScript Framework

2.React follows one way data binding 2.Angular follows two way data binding

3.React follows View part only in MVC archietecture 3.Angular follows MVC archietecture

4.React application is faste as compared to Angular 4.Angular application is slow compared to React

18 difference between stateless and statefull components?

A:- stateless component ==> Function based component is called a a stateless

component because it will not maintain the state with in the component.
if we need to maintain the state in function based component we need to use
hook methods

Statefull component :- class based component called as a statefull component

because it will maintain the state with in the component using the this.state
method

19. what is setState?

A:- it is a one of the method it is available in component api it is used to update

this.state object
by default setState method it follows asynchronous method

20. what is constructor?

A:- constructor is a special type of method it maintains 4things.

1. super 2.this.state 3.bind hamdlers 4.bind the reference attribute

2. It will acquire the data from parent component to chils component

21. what is super?

A:- super is a method it will acquire the data from parent component to child
component

22. what is return?

A:- return is a controlled statement used to return that statement to the calling
place. Return keyword is helped to display the browser

23. what is event?

A:- event is a one of the action that will provide interaction between html tags
to javascript

24. Difference B/w Controlled & uncontrolled Components

A. Controlled and uncontrolled components mainly using the forms creation

Controlled component it follows the 4 rules

1. This.state : Maintain the initial values

2. This.setState: Updated data input data in text fields

3. Value attribute: read the input data

4. onChange: it will take data when ever change

Controlled component working as a react application it self.

Uncontrolled Component:

Uncontrolled component it will not follow the 4 rules

It will works as a DOM (Document Object Model)

Mainly using the uncontrolled component focus on the input fields

25. What is React Fragment

A. React fragment means it will not create the Extra node

Example: we are creating div it will create the extra node instedof div we are
writing the React.fragment

26. What is Pure Component

A. Pure component means it will stop the unnecessary re-renderings

Ex: we have one parent component inside some child components have

Once the parent component is updated it will Rerender the child components
also, so we need to stop the re rendering inside child components.

27. What is React.Memo

A. React.Memo Means It will Stop the unnecessary re-renderings in functional

based component.

Ex: we have one parent component inside some child components have

Once the parent component is updated it will Re-render the child components
also, so we need to stop the re rendering inside child components.

28. what is SPA(Single Page Application) ?

A.SPA means Single Page Web Application it will create the only one HTML
file inside one root id. Root id will collect the all components data and it gives
that collected data to the browser it will displayed in UI.
29.React router how to install and how it’s work ?

A. React Router we can’t able to use directly in React. It is a Third party library we need to
install librarie i.e.,

command:-npm i react-router-dom

Mainly we are using the React router dom is Navigation Purpose like one page to another
page navigation.

Whenever creating the React router dom we need to use Browser router,Routes,Route

30.Difference b/w Axios and fetch method ?

Axios Fetch
1.Need to install 3rd party libraries npm i axios 1.No need to install any 3rd party libraries

2.No need to convert the data in JSON format 2.Need to convert the data in JSON format

3.we can able to easily handle the Errors in Axios 3.it is very difficult to handle the Errors in Fetch

31.what is pure component ?

A.Pure component is used in only Class based component. To stop the

Unnecessary Re-rendering
Ex:- I have one parent component inside some child components once parent
component state is updated inside child components also Re-render need to
avoid that Re-rendering we can go for Pure componen
32.what is React.memo?

A. React.memo is used in only Function based component. To stop the

Unnecessary Re-rendering
Ex:- I have one parent component inside some child components once parent
component state is updated inside child components also Re-render need to
avoid that Re-rendering we can go for React.memo

Ex :- export default React.memo (<About/>)

33. what is Higher Order Component (HOC)?

A. Higher order component is a special component it take input as a existing

component return as a new component.

import React from 'react';

const withLogger = (WrappedComponent) => {

class WithLogger extends React.Component {

componentDidMount() {

console.log('Component mounted');
 }

componentWillUnmount() {

console.log('Component unmounted');

render() {

return <WrappedComponent {...this.props} />;

return WithLogger;

};

// Usage

class MyComponent extends React.Component {

render() {

return <div>Hello, World!</div>;

const MyComponentWithLogger = withLogger(MyComponent);

export default MyComponentWithLogger;

34. What is Redux and Redux Principles ?

A :- Redux is an architecture it is also called as predictable state container and it
is also called as open source javaScript library
=> it is mainly used for the managing the whole application state in
unidirectional.

=> it maintains global store. Which contains an updated state

Principles :- Predictability of Redux is determined by 3 most important
principles
1. Single source of truth.
2. State is Read only.

3. Changes are made with pure functions

Redux Architecture:- it is an architecture or predictable state container which is
mainly used to manage whole application state in uni-directional flow.
It contains 5 main components :-
1.Action
2.Reducer
3.Store
4.Updated state
5.View components (or) UI Components

1.Action :-

=>Action is a pure JavaScript object or payload of the information

=> using Action.Creators method we will create an action object

=> using store.dispatch (action) method we will dispatch an action object
2.Reducer :-
=>Reducer is a pure javaScript function
=>it will take previous state and dispatched action object as a two arguments
=> Based on the inputs it will update a new state
3.State :- I
=>if you want to get updated state from Redux store to your React
components.
=>View components we have follow the 2 concepts
=>we have to useConnect( ) method to get updated state from redux store to
view components
=> we have to use useSeletor( ) and useDispatch ( ) methods to get updated
state from Redux store to view components

=> Store:-
 For entire redux application we have to create single store that will work as a
global store

=> we have to use React.createstore() method to maintain updated state.

=> store contains provider to make state is available to all the components in
application.

View Components:-

=> view components are the Components here we will get or access from
redux store to update UI.

Middlewares:

Redux Thunk and Redux saga

Redux thunk is a middleware, if you want to do asynchronous operations and if

you want to get 3rd party API’s we have to use Redux thunk.

Redux Saga is a middleware, if you want to do asynchronous operations and if

you want to get 3rd party API’s we have to use Redux Saga

Pure Function:

A function is a process which takes some input,called arguments, and produces

some output called a return value.

=> a function is called pure if it follows below rules

A function returns same inputs always return some output

No side effects, I.e it does not alter input data.

No maintain of local & global variables.