Hello Friends in this article i am gone to share Coursera Course: React Basics Coursera Quiz Answers with you..

Enroll Link: React Basics

React Basics Coursera Quiz Answers

---

 

WEEK 1 QUIZ ANSWERS

Self review: Your first component

Question 1)
True or False: You can declare a JavaScript function to be used as a component in React.

• True
• False

Question 2)
True or False: You can spread the return statement over multiple lines by surrounding the code that follows the return keyword with an opening and a closing parenthesis.

• True
• False

Question 3)
Is this valid component code?

function Example() { return (<h1>Example</h1>) }

• Yes
• No
• It would be valid, if it was spread over multiple lines.

 

Self review: Creating and importing components

Question 1)
True or False: In React, you can never move a component to a separate file.

• True
• False

Question 2)
True or False: You can omit the import keyword when importing one component into another in React.

• True
• False

Question 3)
The code that follows is the first line of the App.js file. What does this line do?

import Sidebar from "./Sidebar";

• It imports a Sidebar component from the Sidebar.js file, which is located in the same folder as the App.js file.
• It imports a Sidebar component from the Sidebar folder into the App.js file.
• It imports a Sidebar component into the Sidebar folder, and then this entire folder is imported into the App.js file.

 

Knowledge check: React components and where they live

Question 1) Variation 1
When adding a component name after the function keyword, it should be named using:

• kebab-cased
• lowerCamelCase
• PascalCase (UpperCamelCase)

Question 2) Variation 1
There are two components at the root of the src folder: Example and App. To import the Example component into the App component, you should use the following syntax:

• import Example from “./Example”;
• import “Example”;
• import Example;

Question 3) Variation 1
True or False: You can omit the “./” from the import statement, when both the exported and the imported components are in the same folder.

• True
• False

Question 4) Variation 1
Pick the correct syntax needed to export a component so that it can be imported.

• export default Example;
• export example;
• export default;
• export standard Example;

Question 5) Variation 1
You’ve imported the Example component into the App component. What will the following syntax do: return ( <Example /> ) ?

• It will render the Example component on the screen.
• It will render the App component on the screen.
• It will throw an error.
• It will show a warning.

 

Self review: Passing props

Question 1)
True or False: In React, props is an object.

• True
• False

Question 2)
True or False: You can pass a prop to a component by adding an attribute to the component being rendered, with the attribute’s value becoming the value of the passed-in prop.

• True
• False

Question 3)
What is the error in the code below?

function Greeting() {
return <h1>Hello, {props.name}</h1>
}
export default Greeting

• You need to add extra spacing after the function’s name.
• The Greeting function should receive a props parameter.
• You should always add a pair of parentheses after the return keyword.

 

Self review: Multiple components

Question 1)
True or False: In React, you need to import a component multiple times – as many times as you plan to render it from its parent’s return statement.

• True
• False

Question 2
True or false: You can render more than one child component from the parent component.

• True
• False

Question 3
What is wrong with this code?

function App() {
return (
<BlogCard />
<BlogCard />
<BlogCard />
)
}

• There is no JSX attribute used when rendering the BlogCard components.
• There is no props object passed to the App component.
• There is no root element.

 

Visit this link:  Module Quiz Answers

 

---

 

WEEK 2 QUIZ ANSWERS

Knowledge check: Events and errors

Question 1)
When handling a click event in react, you should use the following attribute:

• onClick
• OnClick
• Onclick
• on-click

Question 2)
Inside a JSX element, you can assign a JSX expression to the onClick handler to handle a click in React.

• False
• True

Question 3)
You can place an opening and a closing parenthesis after the name of the event-handling function that you assign to the onClick attribute.

• True
• False

Question 4)
The try…catch syntax can be used in React in certain cases.

• True
• False

Question 5)
Choose the valid example of an onclick event handler.

• <button onClick={handleClick()}>Click me</button>
• <button on-click=”handleClick”>Click me</button>
• <button onclick={handleClick}>Click me</button>
• <button onClick={handleClick}>Click me</button>

 

Self review: Dynamic events

Question 1)
In React, you are not allowed to code a separate function that should be run to handle a click event.

• True
• False

Question 2)
Event-handling attributes in React are named almost the same as in HTML. Syntactically, the only difference is in the capitalization.

• True
• False

Question 3)
What’s wrong with this code?

<button onClick={handleClick()}>
Click me
</button>

• The event-handling attribute should be all lowercased.
• You cannot invoke an event-handling function from a JSX expression.
• This code should work.

 

Knowledge check: Dynamic events and how to handle them

Question 1)
What code should be added to the element button to make this code snippet valid?

function App() {

function handleClick() {
console.log("clicked")
}

return (
<div className="App">
<button >Click me</button>
</div>

• onClick={handleClick()}
• onClick={handleClick}
• click=handleClick

Question 2)
Imagine that you have a variable named userLoggedIn and it’s set to the boolean of true. How would you complete the below clickHandler function declaration to toggle the value of the userLoggedIn boolean?

function clickHandler() {
}

• userLoggedIn = false
• userLoggedIn = true
• userLoggedIn = !userLoggedIn

Question 3)
Is a click handler on its own enough to change the values of variables in your React apps?

• No
• Yes

Question 4)
What are the ways to write an event-handling function in React. Select all that apply.

• Using a separate function expression
• With an inline anonymous ES5 function
• Using a separate function declaration
• With an inline, anonymous ES6 function (an arrow function)

Question 5)
Choose the appropriate code on line 3 of the following component – to handle a click event.

function App() {

function () {
console.log("clicked")
}

return (
<div className="App">
<button onClick={handleClick}>Click me</button>
</div>

• function HandleClick() {
• function handleClick() {
• function handleClick {

 

Knowledge check: Data flow

Question 1)
Usually, a React app consists of many components, organized as a component tree.

• True
• False

Question 2)
Uni-directional data flow is…

• The term that describes the one-way flow of components in a React app
• The term that describes the one-way flow of data in a React app.
• The term that describes the one-way flow of DOM updates in a React app

Question 3)
A component can, at any given time_______. Select all that apply.

• Pass data as props and receive data as props at the same time
• Pass data as props
• Receive data as props

Question 4)
You can only pass a single prop to a component.

• True
• False

Question 5)
The props parameter is:

• An array
• A boolean
• An object
• A string

Question 6)
Consider the following piece of code:

function MyMenu() { 
return ( 
<div> 
<Appetizers /> 
</div> 
) 
}

Which element of this code represents a child component?

• return
• <div>
• <Appetizers />
• MyMenu()

 

Knowledge Check: State the concept

Question 1)
In React, can state be considered data?

• Yes
• No

Question 2)
In React, can props be considered data?

• Yes
• No

Question 3)
Choose the correct statement.

• The props object represents data that is internal to a component, and state represents data that is external to a component.
• The props object represents data that is external to a component, and state represents data that is internal to a component.

Question 4)
What does the useState hook do?

• It allows a component to receive state from its parent.
• It allows a component to have its own state.

Question 5)
Based on the code below, is the userName variable external or internal data of the DisplayUser component?

function DisplayUser(props) {
return (
<h1>{props.userName}</h1>
);
}

• The userName value is data that is external to the DisplayUser component
• The userName value is data that is internal to the DisplayUser component

 

Knowledge check: Passing state

Question 1)
What is the Context API?

• A way to change the execution context of a function in JavaScript.
• An alternative way to working with state in React.

Question 2)
When working with useState to keep state in a variable, you should not use array destructuring.

• True
• False

Question 3)
If a state variable is destructured from useState, and set to variable name of user, the name of the function to update the user state variable should be…

• useUser
• useState
• userSetter
• setUser

Question 4)
What does the concept of “lifting up state” entail?

• It involves moving the state from the parent component to the child component.
• It involves moving the state from the child component to the parent component.

Question 5)
What is a negative result of lifting up state in a React app?

• Prop drilling.
• There are no negatives from lifting up state in React.
• It can significantly increase the number of components that you need to create.

 

Self review: Managing state in React

Question 1)
True or false? When lifting state up, you need to move the useState from a child component to a parent component.

• False.
• True.

Question 2)
If the state variable holds an array or a string value, once you pass that state via props from a parent to a child, you can then read the length property from the received prop in the child component.

• False
• True

Question 3)
What’s wrong with this code?

import React from "react";
import Fruits from "./Fruits";
import FruitsCounter from "./FruitsCounter";

function App() {
const [fruits] = useState([
{fruitName: 'apple', id: 1},
{fruitName: 'apple', id: 2},
{fruitName: 'plum', id: 3},
]);

• There’s nothing wrong with the provided code.
• If you don’t add the setFruits state-updating function when descructuring values from useState, the app won’t compile.
• The useState call should be React.useState.

 

Knowledge check: State or stateless

Question 1)
What is a stateless component?

• A component that doesn’t track its parent’s state.
• A component that doesn’t track its own state.

Question 2)
A stateful component must have a props object.

• False
• True

Question 3)
To turn a stateless component into a stateful component, you must pass it a props object.

• True
• False

Question 4)
The process of lifting up state can lead to:
Select all that apply.

• A stateless component becoming a stateful component.
• A stateful child component controlling the state of a stateful parent component.
• A stateful component becoming a stateless component.
• A stateful child component controlling the state of a stateless parent component.

Question 5)
A prop doesn’t have to always pass state.

• True
• False

 

Visit this link:  Module quiz: Data and state Quiz Answers

 

---

 

WEEK 3 QUIZ ANSWERS

Self review: Creating a route

Question 1)
What did you need to install in order to create routes?

• three.js
• react-router-dom
• react-dom
• router-dom

Question 2)
Instead of anchor tags, what tag did you use with React Router?

• the To tag
• the Link tag
• the to attribute
• the element attribute

Question 3)
What’s wrong with this code?

<Link to="/" className="nav-item" href="/">
Home
<Link>

• You cannot have hyphens in the value of the className attribute.
• The to attribute can’t have just the “/” value.
• The href attribute should not be used here.

 

Knowledge check: Navigation

Question 1)
Is the following description true or false? A Single Page Application allows the user to interact with the website without downloading entire new webpages. Instead, it rewrites the current webpage as the user interacts with it. The outcome is that the application will feel faster and more responsive to the user.

• True
• False

Question 2)
How do React components turn into the webpage that you see?

• In simple terms, a React component gets downloaded from the server every time a user interacts with a React app.
• In simple terms, a React component has a one-to-one relationship to a HTML element that is displayed on the webpage and React keeps track of which HTML elements need to be updated.
• In simple terms, React downloads a VDOM instance from the server to render all its pages.

Question 3)
A SPA can’t have regular anchor tag elements like a traditional web app can. The reason for this is that an anchor tag will load another html file from a server and refresh the page.

• True
• False

Question 4)
A total page refresh is not the way that a SPA works.

• True
• False

Question 5)
Complete the sentence: an SPA comes with its own special implementation of anchor tags and links, which only give an illusion of loading different pages to the end user, when in fact they simply…

• load a single component into multiple elements of the real DOM into which the virtual DOM tree gets mounted and updated
• load different components into a single element of the virtual DOM into which the real DOM tree gets mounted and updated
• load different components into a single element of the real DOM into which the virtual DOM tree gets mounted and updated

 

Knowledge check: Conditional updates

Question 1)
Select all the conditional structures that exist in JavaScript. Select all that apply.

• logical && operator
• ternary operator
• switch statement
• if-else statement

Question 2)
What will be the output if you ran this code in the browser console:

true && 5

• 5
• undefined
• true
• false

Question 3)
If the value of the test variable evaluates to true, what will the following code render?

< div > {
test && < h1 > Hello < /h1>} World</div >

• Hello World
• An empty div
• Hello
• World

Question 4)
If the value of morning is false, what will the following code render?

{
morning ? < h2 > Breakfast time! < /h2> : <h2>Lunch time!</h2 >
}

• Breakfast time!
• Lunch time!

Question 5)
Choose the correct syntax to build a new Date object in JavaScript?

• new Date();
• New Date();
• Date();
• new Date;

 

Self review: Displaying images

Question 1)
Is this code a correct way to import an image in React?

import avatar from "./assets/avatar.png"

function UserImage() {
return ( 
<div>
<img 
src={avatar}
alt = "User image" 
/>
< /div>

• Yes.
• No.

Question 2)
Is this code a correct way to import an image in React?

function UserImage() {
const avatarImg = "https://picsum.photos/400/265";
return ( 
<div>
<img 
src="avatar.png"
alt="User image" 
/>
</div>
)

• Yes
• No

Question 3)
What’s wrong with this code?

function ProfileImage() {
const profileImg = "https://picsum.photos/400/265";
return <img src={profileImg} alt="Profile image" />
}
export default ProfileImage;

• There should be parentheses after the return keyword and the img element should spread its attributes over multiple lines.
• You must surround the img element with a root, wrapping div element.
• Nothing. This code is correct.

 

Self review: Song selection

Question 1)
In plain JavaScript, how do you build an instance of the Audio constructor?

• New Audio();
• new Audio();
• Audio();

Question 2)
If an object instance of the Audio constructor is saved in a variable named “song”, what property on the “song” object can you use to check if the song is currently playing?

• song.pause();
• song.play()
• song.paused

Question 3)
What is wrong with this code?

function toggle() {
if(song.paused) {
song.pause()
} else {
song.play()
}
}

• The app’s logic doesn’t work. The code on line 3 and the code on line 5 should swap places.
• The condition in the if statement is wrong. It should be:
• if(song.paused())
• You need to have an else if condition, in between the if and else conditions.

 

Visit this link:  Module quiz: navigation, updating and assets in React.js Quiz Answers

 

---

 

WEEK 4 QUIZ ANSWERS

Visit this link:  Peer-graded Assignment: Peer review: Build a calculator app Solution