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

A.

Axios

B.

Fetch API

C.

XMLRequest

D.

JQuery

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

A.

XML

B.

JSON

C.

Promise

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.

React-HTTP

B.

Axios

C.

Router-DOM

D.

Redux

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

A.

useState

B.

useEffect

C.

useReducer

D.

useContext

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

A.

.parseJSON()

B.

.toJSON()

C.

.json()

D.

.stringify()

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

A.

POST

B.

PUT

C.

GET

D.

DELETE

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

A.

POST

B.

GET

C.

PUT

D.

UPDATE

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

A.

response.body

B.

response.json

C.

response.data

D.

response.payload

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

A.

GET

B.

DELETE

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.

'Content-Type': 'application/json'

C.

'Data-Type': 'json'

D.

'Body-Type': 'application/json'

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

A.

body: JSON.parse(data)

B.

data: JSON.stringify(data)

C.

body: JSON.stringify(data)

D.

payload: data

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

A.

POST

B.

PUT

C.

GET

D.

OPTIONS

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

A.

PUT creates data, PATCH deletes data

B.

PUT updates the whole resource, PATCH updates partial 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.

REMOVE

B.

CLEAR

C.

DELETE

D.

DROP

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

A.

Axios ignores them

B.

Axios rejects the promise

C.

Fetch rejects the promise

D.

Both handle them identically

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

A.

react-router-dom

B.

react-navigation

C.

react-route

D.

react-dom-router

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

A.

<Router>

B.

<BrowserRouter>

C.

<RouteProvider>

D.

<Navigation>

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

A.

<Switch>

B.

<Routes>

C.

<Router>

D.

<Group>

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

A.

url

B.

href

C.

to

D.

path

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

A.

component

B.

render

C.

element

D.

view

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

A.

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

B.

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

C.

<Route default ... />

D.

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

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

A.

<a>

B.

<Link>

C.

<Nav>

D.

<Href>

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

A.

href

B.

src

C.

to

D.

target

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

A.

useHistory

B.

useNavigation

C.

useNavigate

D.

useRedirect

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

A.

navigate.back()

B.

navigate(-1)

C.

navigate('back')

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.

useRouter

B.

useParams

C.

useRouteMatch

D.

useLocation

28 $What is a Query String?$

A.

The domain name

B.

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

C.

The method of the request

D.

The JSON body of a request

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

A.

useQuery

B.

useSearchParams

C.

useParams

D.

useLocation

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

A.

searchParams.q

B.

searchParams.get('q')

C.

searchParams['q']

D.

searchParams.value('q')

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

A.

Using Query Params

B.

Using the state property in navigate or Link

C.

Using localStorage

D.

Using cookies

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

A.

useParams

B.

useNavigate

C.

useLocation

D.

useHistory

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

A.

NavLink is for external links

B.

NavLink provides styling attributes for the 'active' state

C.

Link causes a page reload

D.

There is no difference

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.

null

B.

undefined

C.

[ ] (empty array)

D.

No argument

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

A.

To prevent the app from crashing

B.

To improve user experience by indicating activity

C.

Because fetch requires it

D.

To save bandwidth

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

A.

Sends a GET request with query params

B.

Sends a POST request with a JSON body containing the name

C.

Updates the route to /api/user

D.

Deletes the user John

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 add fetch

B.

npm install axios

C.

import axios from react

D.

It is built-in

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

A.

push

B.

replace

C.

swap

D.

history

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

A.

.catch()

B.

.then()

C.

.finally()

D.

.next()

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

A.

Middleware

B.

Interceptors

C.

Controllers

D.

Transformers

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

A.

await

B.

async

C.

promise

D.

defer

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

A.

Sending passwords

B.

Filtering or sorting a list on a page

C.

Uploading files

D.

Creating new database records

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

A.

useHistory()

B.

You cannot access it directly, use useNavigate()

C.

window.history

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.

Inside the parent's <Outlet />

C.

Above the parent component

D.

It replaces the parent component

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

A.

.error()

B.

.catch()

C.

.fail()

D.

.reject()

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

A.

In the URL

B.

In the data body

C.

In the headers object within the config argument

D.

In the method name

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

A.

import { BrowserRouter } from 'react-router';

B.

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

C.

import { Router } from 'react';

D.

import { Route } from 'react-dom';

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

A.

Network failure

B.

Server returned a status code like 4xx or 5xx

C.

JSON parsing failed

D.

The request was successful

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

A.

It is faster

B.

It makes the code look synchronous and more readable

C.

It doesn't use Promises

D.

It works in older browsers without polyfills

Unit 5 - Practice Quiz