React Context and React-Router-dom

 

1. What is react-router explain with syntax?

React Router is a library for routing in React. It enables the navigation among routes in a React Application. It allows changing the browser URL, and keeps the UI in sync with the URL.

Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

// ------------------->> src/components/Header/index.js <<-----------------------

import { Link } from "react-router-dom";

const Header = () => {

return (

<nav>

<ul>

<li>

<Link to="/">Home</Link>

</li>

<li>

<Link to="/greeting">Greeting</Link>

</li>

</ul>

</nav>

);

};

export default Header;

 

JSX

Collapse

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

// ---------------------------->> src/App.js <<-----------------------------------

import { BrowserRouter, Route, Switch } from "react-router-dom";

import { Home } from "./components/Home";

import Header from "./components/Header";

const Greeting = () => <h1>Welcome to React Routing</h1>;

const NotFound = () => <h1>Not Found</h1>;

const Home = () => <h1>Home Route</h1>;

const App = () => {

return (

<BrowserRouter>

<Header />

<Switch>

<Route exact path="/" component={Home} />

<Route path="/greeting" component={Greeting} />

<Route component={NotFound} />

</Switch>

</BrowserRouter>

);

};

export default App;

 

JSX

Collapse

2. What is Virtual DOM?

• A Virtual DOM is a JS object, which is the virtual representation of an HTML DOM.

• Whenever new elements are added to the UI, a virtual DOM is created.

• React compares new virtual DOM with current virtual DOM, and the difference will be efficiently updated to the Real DOM. So, the Virtual DOM helps to render the UI more performantly.

3. What is React Context?

React Context is a mechanism to avoid prop drilling.

Prop Drilling means passing data from one Component to another Component that does not need the data but only helps in passing it through the tree.

Refer to this for more information regarding React Context.