react interview questions
1) What is JSX
// Instead of putting JavaScript into HTML, JSX allows us to put HTML
// into JavaScript.
// JSX helps in making the code easier to understand and debug.
2) What is Virtual DOM?
// React keeps a lighweight representaion of the Real DOM in the memory.
// When you make some change, the virtual DOM only changes the specific
// object in the dom instead all of the objects.
// Virtual Dom understands which area needs to send the update and
// avoids the other areas.
3) What are React Extensions? Name a few
React Native // hybrid mobile
Flux // responsible to attach the state management system
4) What is an Event in React? How do you Create one ?
// An event is an action that can be triggered by a User or any System
// like pressing a key, or a mouse click. etc
// onClick
// onMouseOver
// onMouseEnter
// onMouseLeave
// onMouseMove
<button onClick={activateLasers}>
Activate Lasers
</button>
5) What are Components in React
// Components are the building blocks of a React application's UI.
// It split up the entire UI into small independent pieces.
// Then it renders each of these components independent of each other
// without affecting the rest of the UI
6) What is a State in React? Do you implement it?
// React object that is used to contain data or information about the
// component.
// A state can be modified based on the user action or network changes.
// Every time the state of an object changes, React re-renders the
// components to the browser.
// Initial the state
// Render the state
// Update the state
// class
class BalanceInquiry extends Component {
constructor(props) {
super(props);
this.state = {
totalIncome: 10,
};
}
render() {
return <div>totalIncome
{this.state.totalIncome}
</div>;
}
}
// Function
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count] = useState(10);
return (
<div>
<p> {count} </p>
</div>
);
}
7) What are the Higher-order and Pure Components in React?
// A higher-order component is a function that takes a component and
// returns a new component.
// A higher-order component is a class-based component. And it does a
// shallow comparison of props and state.
// React components can be considered pure if it renders the same
// output for the same state tare and props
8) How do you implement React Routing?
//
import React from "react";
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
export default () => {
return (
// Router
<BrowserRouter>
<div>
{/* Nav */}
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
{/* Routes */}
<Routes>
<Route exact path='/' element={<Home />} />
<Route path='about' element={<About />} />
</Routes>
</div>
</BrowserRouter>
);
}