Interview Questions and Answer On React JS

1. Welcome To Ducat India Interview Questions On React JS 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- • Abstract and Encapsulation of code. • 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 • 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 -: < 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” } To Know More, Visit Our Website