1 $Which JavaScript API is built-in to browsers and commonly used to make HTTP requests in React applications?$

A.

Fetch API

B.

XMLRequest

C.

Axios

D.

JQuery

2 $What type of object does the fetch() function return?$

A.

XML

B.

Promise

C.

JSON

D.

Array

3 $Which library is a popular alternative to the native Fetch API for making HTTP requests in React, offering features like automatic JSON transformation?$

A.

Axios

B.

React-HTTP

C.

Router-DOM

D.

Redux

4 $In a functional React component, which hook is best suited for performing side effects like data fetching?$

A.

useReducer

B.

useEffect

C.

useContext

D.

useState

5 $When using the Fetch API, which method is necessary to parse the response body as JSON?$

A.

.toJSON()

B.

.stringify()

C.

.json()

D.

.parseJSON()

6 $Which HTTP method is used to retrieve data from a server?$

A.

POST

B.

PUT

C.

DELETE

D.

GET

7 $What is the default HTTP method used by fetch() if none is specified?$

A.

GET

B.

UPDATE

C.

PUT

D.

POST

8 $When using axios.get(), where is the response data located in the returned object?$

A.

response.body

B.

response.payload

C.

response.data

D.

response.json

9 $Which HTTP method is primarily used to send data to a server to create a new resource?$

A.

DELETE

B.

GET

C.

POST

D.

HEAD

10 $When sending a POST request using fetch, what must be included in the headers to tell the server you are sending JSON data?$

A.

'Accept': 'application/json'

B.

'Data-Type': 'json'

C.

'Body-Type': 'application/json'

D.

'Content-Type': 'application/json'

11 $How do you pass data in the body of a fetch POST request?$

A.

data: JSON.stringify(data)

B.

body: JSON.stringify(data)

C.

payload: data

D.

body: JSON.parse(data)

12 $Which HTTP method is typically used to update an existing resource completely?$

A.

PUT

B.

POST

C.

OPTIONS

D.

GET

13 $What is the difference between PUT and PATCH?$

A.

PUT updates the whole resource, PATCH updates partial data

B.

PUT creates data, PATCH deletes data

C.

They are identical

D.

PATCH is not an HTTP method

14 $Which HTTP method is used to remove a resource from the server?$

A.

DROP

B.

DELETE

C.

REMOVE

D.

CLEAR

15 $How does Axios handle HTTP error status codes (like 404 or 500) differently than Fetch?$

A.

Axios rejects the promise

B.

Both handle them identically

C.

Fetch rejects the promise

D.

Axios ignores them

16 $What is the standard library used for routing in React applications?$

A.

react-route

B.

react-dom-router

C.

react-navigation

D.

react-router-dom

17 $Which component is used to wrap the entire application to enable routing features?$

A.

<Navigation>

B.

<Router>

C.

<RouteProvider>

D.

<BrowserRouter>

18 $In React Router v6, which component is used to define a group of routes?$

A.

<Group>

B.

<Switch>

C.

<Router>

D.

<Routes>

19 $Which prop is used in the <Route> component to define the URL path?$

A.

url

B.

path

C.

to

D.

href

20 $In React Router v6, which prop is used to specify the component to render for a specific route?$

A.

component

B.

render

C.

view

D.

element

21 $How do you define a default route (404 page) that matches when no other route matches?$

A.

<Route path='*' ... />

B.

<Route default ... />

C.

<Route path='?' ... />

D.

<Route path='404' ... />

22 $Which component is used to create a clickable link that navigates to a new route without reloading the page?$

A.

<Nav>

B.

<a>

C.

<Href>

D.

<Link>

23 $Which prop is used in the <Link> component to specify the destination?$

A.

to

B.

target

C.

src

D.

href

24 $Which hook is used for programmatic navigation in React Router v6?$

A.

useRedirect

B.

useHistory

C.

useNavigate

D.

useNavigation

25 $Using useNavigate, how do you navigate to the previous page?$

A.

navigate.back()

B.

navigate('back')

C.

navigate(-1)

D.

navigate.pop()

26 $How do you define a dynamic parameter in a route path?$

A.

/users/{id}

B.

/users/$id

C.

/users/:id

D.

/users/[id]

27 $Which hook is used to access the values of dynamic URL parameters?$

A.

useParams

B.

useRouter

C.

useRouteMatch

D.

useLocation

28 $What is a Query String?$

A.

The part of the URL after the '?' containing key-value pairs

B.

The JSON body of a request

C.

The method of the request

D.

The domain name

29 $Which hook is used to read and modify query parameters in the URL?$

A.

useSearchParams

B.

useParams

C.

useLocation

D.

useQuery

30 $If the URL is /search?q=react, how do you retrieve the value of 'q' using searchParams ?$

A.

searchParams['q']

B.

searchParams.q

C.

searchParams.value('q')

D.

searchParams.get('q')

31 $How can you pass complex state data (objects) to another route during navigation without showing it in the URL?$

A.

Using localStorage

B.

Using Query Params

C.

Using the state property in navigate or Link

D.

Using cookies

32 $Which hook allows you to access the state passed via navigation?$

A.

useNavigate

B.

useLocation

C.

useParams

D.

useHistory

33 $What is the difference between <Link> and <NavLink> ?$

A.

There is no difference

B.

NavLink is for external links

C.

NavLink provides styling attributes for the 'active' state

D.

Link causes a page reload

34 $When using useEffect to fetch data, what should be the second argument to ensure the data is fetched only once on component mount?$

A.

No argument

B.

null

C.

[ ] (empty array)

D.

undefined

35 $Why is it important to handle 'loading' states when fetching data?$

A.

Because fetch requires it

B.

To prevent the app from crashing

C.

To save bandwidth

D.

To improve user experience by indicating activity

36 $In an Axios request, what does axios.post('/api/user', { name: 'John' }) do?$

A.

Sends a POST request with a JSON body containing the name

B.

Deletes the user John

C.

Updates the route to /api/user

D.

Sends a GET request with query params

37 $What is the purpose of <Outlet> in React Router?$

A.

To link to external sites

B.

To render child routes within a parent route layout

C.

To handle 404 errors

D.

To output console logs

38 $How do you install Axios in a React project?$

A.

npm install axios

B.

import axios from react

C.

It is built-in

D.

npm add fetch

39 $What property in the Link component replaces the current entry in the history stack instead of adding a new one?$

A.

push

B.

swap

C.

history

D.

replace

40 $If you need to execute code after a Fetch request is successfully completed, which Promise method do you use?$

A.

.finally()

B.

.then()

C.

.next()

D.

.catch()

41 $Which Axios feature allows you to intercept requests or responses before they are handled by .then() or .catch() ?$

A.

Middleware

B.

Transformers

C.

Interceptors

D.

Controllers

42 $When using async/await with fetch, what keyword must be used before the function definition?$

A.

defer

B.

await

C.

promise

D.

async

43 $What is a common use case for passing data via Query Parameters?$

A.

Creating new database records

B.

Filtering or sorting a list on a page

C.

Sending passwords

D.

Uploading files

44 $How do you access the history object directly in React Router v6?$

A.

useHistory()

B.

window.history

C.

You cannot access it directly, use useNavigate()

D.

withRouter()

45 $In a nested route structure users/profile, if the path users is the parent, where does profile render?$

A.

On a new page completely

B.

It replaces the parent component

C.

Inside the parent's <Outlet />

D.

Above the parent component

46 $Which method is used in fetch to catch network errors?$

A.

.reject()

B.

.error()

C.

.fail()

D.

.catch()

47 $If you want to send an Authorization token in the header of an Axios request, where do you put it?$

A.

In the headers object within the config argument

B.

In the method name

C.

In the URL

D.

In the data body

48 $What is the correct syntax to import React Router components?$

A.

import { BrowserRouter } from 'react-router';

B.

import { Route } from 'react-dom';

C.

import { BrowserRouter } from 'react-router-dom';

D.

import { Router } from 'react';

49 $When using fetch, if response.ok is false, what does it usually imply?$

A.

The request was successful

B.

JSON parsing failed

C.

Network failure

D.

Server returned a status code like 4xx or 5xx

50 $Which of the following is an advantage of using async/await over .then() chaining?$

A.

It makes the code look synchronous and more readable

B.

It is faster

C.

It doesn't use Promises

D.

It works in older browsers without polyfills

Unit 5 - Practice Quiz