
COURSE – REACT BASICS QUIZ ANSWERS
Week 3: Navigation, Updating and Assets in React.js
Meta Front-End/Android Developer Professional Certificate
Complete Coursera Answers & Study Guide
Click to Enroll in Coursera Meta Front-End Professional Certificate
Navigation, Updating and Assets in React.js INTRODUCTION
This Coursera course, Navigation Updating and Assets in React.js is part of the Meta Front-End Developer Professional Certificate program. Through this module, you will understand how to use single and multi-page navigation systems and how to render or change content based on the user’s status or choice.
You will learn about components such as Routers for navigation between pages; Links for navigating within a page; Redirect for automatically redirecting from one page to another; and Switch for conditionally rendering only relevant components depending on the current URL.
Additionally, you will also be familiarized with topics like client-side routing, asynchronous data fetching, and component lifecycle management.
Learning Objectives
- Use media assets, such as audio and video, with React
- Demonstrate how to manipulate image assets using reference paths
- Explain the folder structure of a React project in terms of embedded or referenced assets
- Demonstrate the conditional implementation and rendering of multiple components
- Create and implement a route in the form of a navbar
- Describe navigation design in React, with a focus on single and multi-page navigation
SELF REVIEW: CREATING A ROUTE
1. What did you need to install in order to create routes?
- react-router-dom (CORRECT)
- react-dom
- three.js
- router-dom
Correct: Correct. That’s true, you need to install the react-router-dom package in order to create routes.
2. Instead of anchor tags, what tag did you use with React Router?
- the to attribute
- the Link tag (CORRECT)
- the To tag
- the element attribute
Correct: Correct. That’s true, when you use React Router, you need to use the Link tag instead of the anchor tag.
3. What’s wrong with this code?
<Link to="/" className="nav-item" href="/">
Home
<Link>
- The href attribute should not be used here. (CORRECT)
- You cannot have hyphens in the value of the className attribute.
- The to attribute can’t have just the “/” value.
Correct: Correct. You should not be using the href attribute here.
KNOWLEDGE CHECK: NAVIGATION
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 (CORRECT)
- False
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. (CORRECT)
- In simple terms, React downloads a VDOM instance from the server to render all its pages.
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 (CORRECT)
- False
4. A total page refresh is not the way that a SPA works.
- True (CORRECT)
- False
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 different components into a single element of the real DOM into which the virtual DOM tree gets mounted and updated (CORRECT)
- load different components into a single element of the virtual DOM into which the real DOM tree gets mounted and updated
- load a single component into multiple elements of the real DOM into which the virtual DOM tree gets mounted and updated
Correct: That’s correct. Different components are loaded into a single element of the real DOM, into which the virtual DOM tree gets mounted and updated.
KNOWLEDGE CHECK: CONDITIONAL UPDATES
1. Select all the conditional structures that exist in JavaScript. Select all that apply.
- switch statement (CORRECT)
- ternary operator (CORRECT)
- logical && operator (CORRECT)
- if-else statement (CORRECT)
Correct: Correct. The switch statement is one of the conditional structures available in JavaScript.
Correct: Correct. The ternary operator is one of the conditional structures available in JavaScript.
Correct: Correct. The logical && operator is one of the conditional structures available in JavaScript.
Correct: Correct. The if-else statement is one of the conditional structures available in JavaScript.
2. What will be the output if you ran this code in the browser console:
true && 5
- undefined
- false
- true
- 5 (CORRECT)
Correct: That’s correct! The value that gets output is: 5.
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
- Hello World (CORRECT)
- An empty div
- World
Correct: That’s correct! The value of test is true, so <div><h1>Hello</h1>World</div> will be rendered.
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! (CORRECT)
Correct: That’s right! The returned value will be “Lunch time!”.
5. Choose the correct syntax to build a new Date object in JavaScript?
- Date();
- new Date(); (CORRECT)
- New Date();
- new Date;
Correct: That’s correct. This code will result in a new object instance of the Date constructor.
SELF REVIEW: DISPLAYING IMAGES
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>
)
}
export default UserImage;
- Yes. (CORRECT)
- No.
Correct: That’s right, this code is the correct way to import an image in React.
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>
)
}
export default UserImage;
- Yes
- No (CORRECT)
Correct: Correct. This code is not valid. The src attribute needs to be as follows: src={avatarImg}
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;
- Nothing. This code is correct. (CORRECT)
- You must surround the img element with a root, wrapping div element.
- There should be parentheses after the return keyword and the img element should spread its attributes over multiple lines.
Correct: Correct. There’s nothing wrong with the code in the question.
SELF REVIEW: SONG SELECTION
1. In plain JavaScript, how do you build an instance of the Audio constructor?
- Audio();
- New Audio();
- new Audio(); (CORRECT)
Correct: Correct. This is the correct way to build an instance of the Audio constructor in vanilla JavaScript.
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.play()
- song.paused (CORRECT)
- song.pause();
Correct: Correct. This is the property that is used to check if the song is currently playing or not.
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. (CORRECT)
- 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.
Correct: Correct. The lines 3 and 5 need to switch places.
Coursera Meta Front-End Developer Professional Certificate Answers and Study Guide
Liking our content? Then don’t forget to ad us to your bookmarks so you can find us easily!
Weekly Breakdown | Meta Study Guides | Back to Top
MODULE QUIZ: NAVIGATION, UPDATING AND ASSETS IN REACT.JS
1. True or false? In React, you can use a ternary operator in a component’s return statement in React.
- True (CORRECT)
- False
Correct: Correct. In React, you can use a ternary operator in a component’s return statement in React.
2. React Router is…
- A stand-alone package that you can add to a React app. (CORRECT)
- A built-in part of React.
- A built-in part of React-DOM.
Correct: Correct. React Router is a stand-alone package that you can add to a React app.
3. React Router has a <Link> element.
- True (CORRECT)
- False
Correct: That’s correct! React Router has a <Link> element.
4. Please choose the valid command to install react-player.
- npm install react-player (CORRECT)
- npm-install react-player
- npm-install-react-player
Correct: Correct. This is the command to use.
5. True or false? webpack is a module bundler.
- True (CORRECT)
- False.
Correct: Correct. Webpack is a module bundler.
6. What will be the output of the code below?
- let name; if (Math.random() > 0.5) { name = “Mike”} else { name = “Susan”}
- It will always be Susan
- It will be 0.5
- It will always be Mike
- It will be sometimes Mike, and sometimes Susan, randomly (CORRECT)
Correct: Correct! The reason for this output is the if condition’s code: Math.random() > 0.5, which introduces randomness.
7. Is the following component syntactically correct?
import car from "./assets/images/car.jpg";
function CarImage() {
return (
<img
height={200}
src={car}
alt="Car image"
/>
);
};
export default CarImage;
- Yes (CORRECT)
- No
Correct: That’s correct! This code is syntactically correct.
8. What is an asset?
- Images, stylesheets, fonts (CORRECT)
- Components
- Images, video, and components
Correct: Correct. Images, stylesheets, and fonts are all examples of assets in a React app.
9. What is the syntax used to add a new dev dependency to a React app? Select all that apply.
- npm init some-package-name
- node init some-package-name
- npm i –save-dev some-package-name (CORRECT)
- npm install –save-dev some-package-name (CORRECT)
Correct: Correct! Using this command, you’ll add the some-package-name npm package as a dev dependency to your React app.
Correct: Correct! Using this command, you’ll add the some-package-name npm package as a dev dependency to your React app.
10. If your app can compile without it, you can keep an asset in a public folder.
- True (CORRECT)
- False
Correct: Correct. Indeed, if your app can compile without it, you can keep an asset in a public folder.
11. Which of the following statements are correct regarding how navigation is implemented in React? Select all that apply.
- Navigation in React is achieved by linking to HTML files
- In React, the entire app is loaded inside a single div, you’re not actually visiting different pages. (CORRECT)
- Different views are rendered when React makes changes to the Virtual DOM, with React updating the real DOM accordingly (CORRECT)
Correct: Well done. In React, the entire app is loaded inside a single div, you’re not actually visiting different pages, and Different views are rendered when React makes changes to the Virtual DOM, with React updating the real DOM accordingly.
Correct: Well done. In React, the entire app is loaded inside a single div, you’re not actually visiting different pages, and Different views are rendered when React makes changes to the Virtual DOM, with React updating the real DOM accordingly.
12. True or False?
You are building an app in React, and have written the following navigation link in your code:
<a href="/" className="nav-item">Contact Us!</a>
When the user clicks this link, the app will navigate to the ‘Contact Us!’ page.
- True
- False (CORRECT)
Correct: Well done. That’s right! Instead of navigating to the Contact Us page, a click on the anchor tag will refresh the page.
13. You are developing a clock app that displays an image of the sun when the time is 6 AM until 6 PM, and an image of the moon for the other hours. Your component code is written as follows:
function CurrentImage() {
const time = new Date().getHours();
return (
{hour >= 6 && hour <= 18
? <Daytime />
: <Nighttime />
}
Based on this code, what will be returned if the getHours function produces a value of 14?
- Daytime (CORRECT)
- Night-time
Correct: That’s right! Because the hour value meets the conditions of the ternary operator, the expression after the question mark will be returned.
14. True or false: You can use JavaScript’s logical AND operator in a React component’s return statement to conditionally render some JSX elements based on whether a value to the right of the AND operator evaluates to true.
- False (CORRECT)
- True
Correct: That’s correct: The logical AND operator is used to conditionally render some JSX elements based on whether a value to the LEFT of the AND operator evaluates to true.
15. You are developing a web-based clock app that allows the user to set alarms to go off at specific times.
Which of the following assets are ideally stored in an Assets folder within the src folder of your project? Choose all that apply.
- The robots.txt file, which is used to manage your app’s interaction with search engines
- An icon that appears in the browser tab for the app
- An image of a clock that is displayed in the app (CORRECT)
- An alarm sound that plays when the specified time is reached in your app (CORRECT)
Correct: That’s right! You should keep the sound file and image file in the Assets folder, as they will be used directly in your app components and are necessary for the app to work correctly.
Correct: That’s right! You should keep the sound file and image file in the Assets folder, as they will be used directly in your app components and are necessary for the app to work correctly.
16. In React, you can import an image as you would any other module.
- True (CORRECT)
- False
Correct: Well done. You can import an image like you would any other module. To use it, just evaluate it as a JSX expression (that is, enclose it inside curly braces).
17. When looking for a third-party NPM package to use in the NPM package ecosystem, how would you determine if the package is suitable and the right one you need? Select all that apply.
- Find a package with a clever sounding name
- Check the package’s GitHub page (CORRECT)
- Check the frequency of updates (CORRECT)
- Perform an internet search for the package name (CORRECT)
Correct: Well done. When looking for an NPM package, check the frequency of the updates, the GitHub page of the package and search for the package name to ensure you find a package suitable to your needs.
Correct: Well done. When looking for an NPM package, check the frequency of the updates, the GitHub page of the package and search for the package name to ensure you find a package suitable to your needs.
Correct: Well done. When looking for an NPM package, check the frequency of the updates, the GitHub page of the package and search for the package name to ensure you find a package suitable to your needs.
18. True or false?
When you render the React player in your app, you can add code that determines whether or not a video starts automatically when the page loads.
- True (CORRECT)
- False
Correct: That’s correct! In addition to linking a video URL, you can alter settings such as automatic playback and starting volume for the React player.
Interactive CSS CONCLUSION
Congratulations! You have completed the module on single and multi-page navigation, as well as the conditional rendering or changing of content in response to user status or choice. By now you should be familiar with how to navigate between pages and conditionally render content based on user input.
If you want to learn more about front-end web development, consider enrolling in Coursera’s Front-End Web Development specialization. In this specialization, you will explore further concepts related to front-end web development such as responsive design, Rest APIs and AJAX, meaningful transitions, managing data storage offline using IndexedDB and ServiceWorkers, and much more. Enroll now and get started today!
This Course is shared with other Meta Courses – Choose wich path to go
Subscribe to our site
Get new content delivered directly to your inbox.
Quiztudy Top Courses
Popular in Coursera
- Meta Marketing Analytics Professional Certificate.
- Google Digital Marketing & E-commerce Professional Certificate.
- Google UX Design Professional Certificate.
- Meta Social Media Marketing Professional Certificate
- Google Project Management Professional Certificate
- Meta Front-End Developer Professional Certificate
Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!