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

A.

JQuery

B.

XMLRequest

C.

Fetch API

D.

Axios

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

A.

Promise

B.

Array

C.

JSON

D.

XML

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.

Router-DOM

B.

Axios

C.

React-HTTP

D.

Redux

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

A.

useReducer

B.

useState

C.

useContext

D.

useEffect

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

A.

.json()

B.

.parseJSON()

C.

.stringify()

D.

.toJSON()

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

A.

DELETE

B.

GET

C.

PUT

D.

POST

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

A.

GET

B.

UPDATE

C.

POST

D.

PUT

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

A.

response.body

B.

response.data

C.

response.json

D.

response.payload

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

A.

POST

B.

GET

C.

DELETE

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.

'Data-Type': 'json'

B.

'Accept': 'application/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.parse(data)

C.

payload: data

D.

body: JSON.stringify(data)

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

A.

PUT

B.

OPTIONS

C.

GET

D.

POST

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

A.

PATCH is not an HTTP method

B.

PUT updates the whole resource, PATCH updates partial data

C.

They are identical

D.

PUT creates data, PATCH deletes data

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

A.

REMOVE

B.

DELETE

C.

DROP

D.

CLEAR

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

A.

Axios rejects the promise

B.

Axios ignores them

C.

Fetch rejects the promise

D.

Both handle them identically

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

A.

react-dom-router

B.

react-navigation

C.

react-router-dom

D.

react-route

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

A.

<Navigation>

B.

<RouteProvider>

C.

<BrowserRouter>

D.

<Router>

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

A.

<Switch>

B.

<Group>

C.

<Router>

D.

<Routes>

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

A.

path

B.

href

C.

to

D.

url

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

A.

view

B.

element

C.

render

D.

component

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

A.

<Route default ... />

B.

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

C.

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

D.

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

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

A.

<Nav>

B.

<Href>

C.

<a>

D.

<Link>

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

A.

src

B.

href

C.

to

D.

target

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

A.

useNavigation

B.

useNavigate

C.

useRedirect

D.

useHistory

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

A.

navigate('back')

B.

navigate(-1)

C.

navigate.pop()

D.

navigate.back()

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.

useLocation

C.

useRouter

D.

useRouteMatch

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.

useParams

B.

useQuery

C.

useLocation

D.

useSearchParams

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 localStorage

C.

Using cookies

D.

Using the state property in navigate or Link

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

A.

useParams

B.

useHistory

C.

useLocation

D.

useNavigate

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

A.

NavLink provides styling attributes for the 'active' state

B.

NavLink is for external links

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.

No argument

B.

[ ] (empty array)

C.

undefined

D.

null

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

A.

To improve user experience by indicating activity

B.

To prevent the app from crashing

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 POST request with a JSON body containing the name

B.

Sends a GET request with query params

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 output console logs

D.

To handle 404 errors

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

A.

npm install axios

B.

It is built-in

C.

import axios from react

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.

history

B.

replace

C.

push

D.

swap

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.

.next()

D.

.finally()

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

A.

Transformers

B.

Middleware

C.

Controllers

D.

Interceptors

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.

Filtering or sorting a list on a page

B.

Creating new database records

C.

Sending passwords

D.

Uploading files

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

A.

useHistory()

B.

withRouter()

C.

window.history

D.

You cannot access it directly, use useNavigate()

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

A.

It replaces the parent component

B.

Inside the parent's <Outlet />

C.

On a new page completely

D.

Above the parent component

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

A.

.reject()

B.

.fail()

C.

.catch()

D.

.error()

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

A.

In the method name

B.

In the headers object within the config argument

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-dom';

B.

import { Router } from 'react';

C.

import { BrowserRouter } from 'react-router';

D.

import { Route } from 'react-dom';

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

A.

JSON parsing failed

B.

Network failure

C.

The request was successful

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 works in older browsers without polyfills

C.

It doesn't use Promises

D.

It is faster

Unit 5 - Practice Quiz