Top react interview question:
1. Differentiate between Real DOM and Virtual DOM?
Real DOM -
* it updates slow
* can directly update HTML
* create a new DOM if element updates
* DOM manipulation is very expensive
Virtual DOM -
* it updates faster
* can't update HTML directly
* updates the JSX if element updates
* DOM manipulation is very easy
2. What is JSX?
JSX is a shorthand for Javascript XML.this is a
type of file used by reacting which utilize the
the expressiveness of Javascript along with HTML
like template syntax. this makes the HTML file
really easy to understand. this file makes
application robust and boosts its performance.
Below is an example of JSX:
render(){
return(
<div>
<h1>SUBSCRIBE TO CREATION CODE<h1/>
<div/>);
}
3. How can you embed two or more components into one(react)?
class mycomponent extends React.component{
render(){
return(
<div>
<h1>creation code<h1>
<header/>
<div/>
);
}
}
class Header extends React.Component{
render(){
return
<h1>SUBSCRIBE TO CREATION CODE<h1/>
};
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);
4. What is the purpose of render() in React?
Each React component must have a render() mandatorily.
it returns a single React element which is the
representation of the native DOM component. if more
than one HTML element needs to be rendered, then they
must be grouped together inside one enclosing tag such
as <form>,<group>,<div> etc. This function must be kept
pure i.e., it must return the same result each time it is invoked
5. What is React Router?
React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. This keeps the URL in sync with data that’s being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single page web applications. React Router has a simple API.
6. Explain Flux.
Flux is an architectural pattern which enforces the uni-directional data flow. It controls derived data and enables communication between multiple components using a central Store which has authority for all data. Any update in data throughout the application must occur here only. Flux provides stability to the application and reduces run-time error.
7. How do you modularize code in React?
We can modularize code by using the export and import properties. They help in writing the components separately in different files.
//ChildComponent.jsx
export default class ChildComponent extends React.Component {
render() {
return(
<div>
<h1>This is a child component</h1>
</div>
);
}
}
//ParentComponent.jsx
import ChildComponent from './childcomponent.js';
class ParentComponent extends React.Component {
render() {
return(
<div>
<App />
</div>
);
}
8. What are Higher Order Components(HOC)?
Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components
Follow my socials:
For any question or coding discussion, you can join my discord or telegram:
Comments
Post a Comment