Back to Freecodecamp

React Basics Quiz

curriculum/challenges/english/blocks/quiz-react-basics/66f1a2009e65c9a40a26d51e.md

latest5.3 KB
Original Source

--description--

To pass the quiz, you must correctly answer at least 18 of the 20 questions below.

--quizzes--

--quiz--

--question--

--text--

Which of the following is not a JavaScript library or framework?

--distractors--

Angular


React


JQuery

--answer--

Laravel

--question--

--text--

Which of the following is NOT a method for conditional rendering in React?

--distractors--

Ternary operators.


Logical && operator.


if statements.

--answer--

setTimeout

--question--

--text--

What is the primary purpose of adding a key prop when rendering a list in React?

--distractors--

To apply a unique CSS style to each list item.


To serve as the text content for the element.


To add an event listener to each specific item in the list.

--answer--

To help React identify items for efficient rendering.

--question--

--text--

Where do the project's packages and libraries get installed?

--distractors--

The user directory of your computer.


The package.json file.


The src folder.

--answer--

The node_modules folder.

--question--

--text--

Which of the following is TRUE about JSX?

--distractors--

JSX must always be written in separate files from JavaScript.


JSX cannot use JavaScript expressions.


JSX is not recommended for React applications.

--answer--

JSX allows writing HTML within JavaScript code.

--question--

--text--

Which of the following is a common problem with SPAs?

--distractors--

Server resources are used more heavily due to constant page rendering.


Browser caching becomes unreliable due to frequent DOM updates.


Multiple page loads create inconsistent state management.

--answer--

Screen readers struggle with dynamically updated content.

--question--

--text--

How does a single-page application typically update the view?

--distractors--

By making a full server reload.


By reloading the entire HTML document.


By using server-side rendering only.

--answer--

By updating only the necessary parts of the page.

--question--

--text--

Which of the following commands starts a React project in development mode?

--distractors--

npm run build


npm install


npm run develop

--answer--

npm run dev

--question--

--text--

Which of the following is not a valid JSX element?

--distractors--

<div className='class'></div>


<span>Hello World</span>


<button>Click Me</button>

--answer--

``

--question--

--text--

Which JavaScript array method is commonly used to transform an array of data into an array of JSX elements?

--distractors--

forEach()


filter()


reduce()

--answer--

map()

--question--

--text--

Which of the following is the best practice for passing the key prop in React?

--distractors--

Use array indexes in all cases.


Randomly generate keys on each render.


Omit the key prop altogether.

--answer--

Use unique and stable IDs from the data.

--question--

--text--

What command installs dependencies listed in package.json?

--distractors--

npm run


npm update


npm build

--answer--

npm install

--question--

--text--

How would you pass a name prop to a child component?

--distractors--

<ChildComponent props="name" />


<ChildComponent {props} />


<ChildComponent {'John'} />

--answer--

<ChildComponent name="Vignesh" />

--question--

--text--

What is the correct way to pass multiple props using the spread operator in React?

--distractors--

<Child person={name..., age..., city...} />.


<Child spreader={...person} />.


<Child spread={person} />.

--answer--

<Child {...person} />.

--question--

--text--

What are the building blocks of React?

--distractors--

Functions and Modules.


DOM Elements and Events.


Classes and Objects.

--answer--

Reusable Components.

--question--

--text--

What is the correct way to add an inline style in React?

--distractors--

style={{ color: blue }}


style="color: blue"


style: { color: 'blue' }

--answer--

style={{ color: 'blue' }}

--question--

--text--

What is the correct way to conditionally render a React component?

--distractors--

Using if statements inside JSX.


Declaring a new component inside a render() method.


Using while loops inside JSX.

--answer--

Using ternary operators or logical && operators within JSX.

--question--

--text--

Which keyword is used to bring a component into another file?

--distractors--

require


include


add

--answer--

import

--question--

--text--

What is the full meaning of SPAs?

--distractors--

Server Page Architectures.


Selective Page Applications.


Static Progressive Apps.

--answer--

Single-page Applications.

--question--

--text--

Which extension of JavaScript syntax is used to describe the UI in React?

--distractors--

TSC


HTML+


ReactML

--answer--

JSX