SlideShare a Scribd company logo
1 of 11
Welcome To Ducat India
70-70-90-50-90
www.tutorials.ducatindia.com
Q1). Advantages of React JS in 2022 with its
Limitation
 React JS is open source platform as well as SEO friendly. It is used by both Innovative
Startups and Fortune 500 Companies. Sites using React JS are Netflix, Dropbox,
Dailymotion, American Express, GoDaddy, Coursera, BBC, MDB, Mochi-Pet
Supplies and Food, NewYork Times etc.
 To know more about advantages we can define React JS in few words i.e. Advanced,
Non-Risky, Responsive or as Follows-
1. Abstract and Encapsulation of code.
2. Increase speed by importing feature with synchronized UI System.
3. Don’t need to write whole scripting code. Just need to write the state and declare its
Q2). Role of Virtual-DOM and how it effects
with React JS
Document object model contain record of scripts and when it comes
with react JS it can be called as Virtual DOM or React DOM. React
DOM is actually the virtual copy of Actual DOM which is created when
you modify or update using React and React then make changes to
Actual DOM by creating its Virtual DOM. It’s quite expensive because
browser take time to calculate CSS, all margins, Layouts, JSS modifying
queries etc. As it’s expensive to make changes in Actual DOM so React
created its Virtual DOM as copy and make changes in it and then later
changes in Actual DOM will made.
Q3). What do you meant by Import and
Export in React and writes its Syntax.
It’s very Important and main feature in React which makes it more
useful and make process faster. Importing Files meant to be calling
data from other files easily by giving export access to files. When we
use different components in code, Import and Export helps to
communicate with different code files of components.
Q4). How Classes or Class components are
created in React, Explanation and its Syntax?
React JS create class components with and without ES6. When you
create classes without ES6 then following syntax is used-:
Var create React Class = require (‘create-react-class’);
Var Greeting = create React Class({
Render: function () {
Return < h1>Hello,
{this.props.name}</ h1>;
}
});
Moreover, with create React Class(), you have to provide separate
get Initial State method that returns initial state:
Q5). Different Types of Components in react
IN REACT JS CONTAIN TWO TYPES OF COMPONENTS
1.Stateless Functional Components
These are JavaScript Function as-:
Function welcome(props) {
Return < h1>Hello, {props.name}</ h1>; }
2.Stateful Class Component
These are components having ES6 or regular classes that extend
component class from react library. It must contain Render method
returning HTML
Class welcome extends React.Component (
render() {
return < h1> Hello, {this.props.name} </ h1>;
}
)
Q6). State v/s Props in React?
React make it easy to manage the data and rendering of data when
data changes. Two main ways to think about data in react is states and
props.
Props are useful in passing the arguments to the components we are
creating. It handles components outside updating for example-
increment and decrement of counter Component. As when we create a
class and its constructor so to pass constructor to a class props declare
differently. It’s mostly used for static activities.
State
State is about to handle inside process of the component. State is
mainly used to handle update storing activity and rendering of
component of what user has been done. It is used for dynamic
activities.
Q7). Which Middleware or Function used to
handle asynchronous dispatching of actions?
Redux Reducer is used to handle asynchronous dispatching. Mainly
three things are there to be noted in code i.e. state, actions and reducer.
Const redux = require(‘redux’)
Const create Store = redux.createstore
Const initial State = {
Loading: false,
Users: [],
Error: ‘’
}
CONST FETCH_USERS_REQUEST =
‘FETCH_USERS_REQUEST’
Const FETCH_USERS_SUCCESS =
‘FETCH_USERS_SUCCESS’
Q8). Explain Pure Component?
Pure components compare old states and objects to new states and
objects to decide that re-rendering should happen or not for updating.
If old states and objects are same with new code then pure component
in react don’t allow re-rendering of functions. So, if we extend class
component with pure component then there is no need to apply should
Component Update () lifecycle method. It is helpful in making
application faster while in case of regular components, it will always
re-render either value of states and props changes or not.
Q9). Explain Commands as follows-:
Following are the commands:-
Set State()-:
It is a command in react which set the schedule for updation like clock
components etc. and triggers when updation needed and set to
rendering of code of the page.
Render()-:
When we create application Code written in components that will
translated into elements that get mounted into DOM. React application
splits into two phases that is render phase and commit phase. When
traversing is done, while creating the elements Create element () is
used and then works on DOM will start after creating and go to
Commit phase.
Q10). Explain use of React Component API-
find DOM Node method?
For DOM manipulation ‘find DOM Node’ method is used. Before we
apply this we have to declare object in body as -:
To Know More, Visit Our Website
< button onClick=(this.findDOMNodeHandler)> Find
DOM Node </ button>
< div id=”myDiv”>Dom Node </ div>
findDOMNodeHandler= () => {
let myDiv = document.getElementById(“myDiv”)
ReactDOM.findDOMNode(myDiv).style.color=”green”
}

More Related Content

Similar to Interview Questions On React JS.pptx

Fundamental Concepts of React JS for Beginners.pdf
Fundamental Concepts of React JS for Beginners.pdfFundamental Concepts of React JS for Beginners.pdf
Fundamental Concepts of React JS for Beginners.pdfStephieJohn
 
Introduction to React for Frontend Developers
Introduction to React for Frontend DevelopersIntroduction to React for Frontend Developers
Introduction to React for Frontend DevelopersSergio Nakamura
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react jsdhanushkacnd
 
React js programming concept
React js programming conceptReact js programming concept
React js programming conceptTariqul islam
 
What are the components in React?
What are the components in React?What are the components in React?
What are the components in React?BOSC Tech Labs
 
How to create components in react js
How to create components in react jsHow to create components in react js
How to create components in react jsBOSC Tech Labs
 
Introduction to react and redux
Introduction to react and reduxIntroduction to react and redux
Introduction to react and reduxCuong Ho
 
React JS Interview Question & Answer
React JS Interview Question & AnswerReact JS Interview Question & Answer
React JS Interview Question & AnswerMildain Solutions
 
A full introductory guide to React
A full introductory guide to ReactA full introductory guide to React
A full introductory guide to ReactJean Carlo Emer
 
REACTJS.pdf
REACTJS.pdfREACTJS.pdf
REACTJS.pdfArthyR3
 
Top 10 Techniques For React Performance Optimization in 2022.pptx
Top 10 Techniques For React Performance Optimization in 2022.pptxTop 10 Techniques For React Performance Optimization in 2022.pptx
Top 10 Techniques For React Performance Optimization in 2022.pptxBOSC Tech Labs
 
react-slides.pdf gives information about react library
react-slides.pdf gives information about react libraryreact-slides.pdf gives information about react library
react-slides.pdf gives information about react libraryjanet736113
 

Similar to Interview Questions On React JS.pptx (20)

ReactJS (1)
ReactJS (1)ReactJS (1)
ReactJS (1)
 
Fundamental Concepts of React JS for Beginners.pdf
Fundamental Concepts of React JS for Beginners.pdfFundamental Concepts of React JS for Beginners.pdf
Fundamental Concepts of React JS for Beginners.pdf
 
Introduction to React for Frontend Developers
Introduction to React for Frontend DevelopersIntroduction to React for Frontend Developers
Introduction to React for Frontend Developers
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react js
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
React js
React jsReact js
React js
 
Intro react js
Intro react jsIntro react js
Intro react js
 
What are the components in React?
What are the components in React?What are the components in React?
What are the components in React?
 
How to create components in react js
How to create components in react jsHow to create components in react js
How to create components in react js
 
Introduction to react and redux
Introduction to react and reduxIntroduction to react and redux
Introduction to react and redux
 
REACT pdf.docx
REACT pdf.docxREACT pdf.docx
REACT pdf.docx
 
React JS Interview Question & Answer
React JS Interview Question & AnswerReact JS Interview Question & Answer
React JS Interview Question & Answer
 
A full introductory guide to React
A full introductory guide to ReactA full introductory guide to React
A full introductory guide to React
 
REACTJS.pdf
REACTJS.pdfREACTJS.pdf
REACTJS.pdf
 
react-slides.pptx
react-slides.pptxreact-slides.pptx
react-slides.pptx
 
Top 10 Techniques For React Performance Optimization in 2022.pptx
Top 10 Techniques For React Performance Optimization in 2022.pptxTop 10 Techniques For React Performance Optimization in 2022.pptx
Top 10 Techniques For React Performance Optimization in 2022.pptx
 
react-slides.pdf
react-slides.pdfreact-slides.pdf
react-slides.pdf
 
react-slides.pdf gives information about react library
react-slides.pdf gives information about react libraryreact-slides.pdf gives information about react library
react-slides.pdf gives information about react library
 
Copy of React_JS_Notes.pdf
Copy of React_JS_Notes.pdfCopy of React_JS_Notes.pdf
Copy of React_JS_Notes.pdf
 
react-en.pdf
react-en.pdfreact-en.pdf
react-en.pdf
 

Recently uploaded

Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
Micromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersMicromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersChitralekhaTherkar
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting DataJhengPantaleon
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsKarinaGenton
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentInMediaRes1
 

Recently uploaded (20)

Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
Micromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersMicromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of Powders
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
 

Interview Questions On React JS.pptx

  • 1. Welcome To Ducat India 70-70-90-50-90 www.tutorials.ducatindia.com
  • 2. Q1). Advantages of React JS in 2022 with its Limitation  React JS is open source platform as well as SEO friendly. It is used by both Innovative Startups and Fortune 500 Companies. Sites using React JS are Netflix, Dropbox, Dailymotion, American Express, GoDaddy, Coursera, BBC, MDB, Mochi-Pet Supplies and Food, NewYork Times etc.  To know more about advantages we can define React JS in few words i.e. Advanced, Non-Risky, Responsive or as Follows- 1. Abstract and Encapsulation of code. 2. Increase speed by importing feature with synchronized UI System. 3. Don’t need to write whole scripting code. Just need to write the state and declare its
  • 3. Q2). Role of Virtual-DOM and how it effects with React JS Document object model contain record of scripts and when it comes with react JS it can be called as Virtual DOM or React DOM. React DOM is actually the virtual copy of Actual DOM which is created when you modify or update using React and React then make changes to Actual DOM by creating its Virtual DOM. It’s quite expensive because browser take time to calculate CSS, all margins, Layouts, JSS modifying queries etc. As it’s expensive to make changes in Actual DOM so React created its Virtual DOM as copy and make changes in it and then later changes in Actual DOM will made.
  • 4. Q3). What do you meant by Import and Export in React and writes its Syntax. It’s very Important and main feature in React which makes it more useful and make process faster. Importing Files meant to be calling data from other files easily by giving export access to files. When we use different components in code, Import and Export helps to communicate with different code files of components.
  • 5. Q4). How Classes or Class components are created in React, Explanation and its Syntax? React JS create class components with and without ES6. When you create classes without ES6 then following syntax is used-: Var create React Class = require (‘create-react-class’); Var Greeting = create React Class({ Render: function () { Return < h1>Hello, {this.props.name}</ h1>; } }); Moreover, with create React Class(), you have to provide separate get Initial State method that returns initial state:
  • 6. Q5). Different Types of Components in react IN REACT JS CONTAIN TWO TYPES OF COMPONENTS 1.Stateless Functional Components These are JavaScript Function as-: Function welcome(props) { Return < h1>Hello, {props.name}</ h1>; } 2.Stateful Class Component These are components having ES6 or regular classes that extend component class from react library. It must contain Render method returning HTML Class welcome extends React.Component ( render() { return < h1> Hello, {this.props.name} </ h1>; } )
  • 7. Q6). State v/s Props in React? React make it easy to manage the data and rendering of data when data changes. Two main ways to think about data in react is states and props. Props are useful in passing the arguments to the components we are creating. It handles components outside updating for example- increment and decrement of counter Component. As when we create a class and its constructor so to pass constructor to a class props declare differently. It’s mostly used for static activities. State State is about to handle inside process of the component. State is mainly used to handle update storing activity and rendering of component of what user has been done. It is used for dynamic activities.
  • 8. Q7). Which Middleware or Function used to handle asynchronous dispatching of actions? Redux Reducer is used to handle asynchronous dispatching. Mainly three things are there to be noted in code i.e. state, actions and reducer. Const redux = require(‘redux’) Const create Store = redux.createstore Const initial State = { Loading: false, Users: [], Error: ‘’ } CONST FETCH_USERS_REQUEST = ‘FETCH_USERS_REQUEST’ Const FETCH_USERS_SUCCESS = ‘FETCH_USERS_SUCCESS’
  • 9. Q8). Explain Pure Component? Pure components compare old states and objects to new states and objects to decide that re-rendering should happen or not for updating. If old states and objects are same with new code then pure component in react don’t allow re-rendering of functions. So, if we extend class component with pure component then there is no need to apply should Component Update () lifecycle method. It is helpful in making application faster while in case of regular components, it will always re-render either value of states and props changes or not.
  • 10. Q9). Explain Commands as follows-: Following are the commands:- Set State()-: It is a command in react which set the schedule for updation like clock components etc. and triggers when updation needed and set to rendering of code of the page. Render()-: When we create application Code written in components that will translated into elements that get mounted into DOM. React application splits into two phases that is render phase and commit phase. When traversing is done, while creating the elements Create element () is used and then works on DOM will start after creating and go to Commit phase.
  • 11. Q10). Explain use of React Component API- find DOM Node method? For DOM manipulation ‘find DOM Node’ method is used. Before we apply this we have to declare object in body as -: To Know More, Visit Our Website < button onClick=(this.findDOMNodeHandler)> Find DOM Node </ button> < div id=”myDiv”>Dom Node </ div> findDOMNodeHandler= () => { let myDiv = document.getElementById(“myDiv”) ReactDOM.findDOMNode(myDiv).style.color=”green” }