Navigation, Updating and Assets in React.js INTRODUCTION

SELF REVIEW: CREATING A ROUTE

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

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

3. What’s wrong with this code?

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

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. 

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

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.

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

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…

KNOWLEDGE CHECK: CONDITIONAL UPDATES

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

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

true && 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 >
}

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

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

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

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;

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;

3. W​hat’s wrong with this code?

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

SELF REVIEW: SONG SELECTION

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

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?

3. W​hat is wrong with this code?

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

Coursera Meta Front-End Developer Professional Certificate Answers and Study Guide

Weekly Breakdown | Meta Study Guides | Back to Top

MODULE QUIZ: NAVIGATION, UPDATING AND ASSETS IN REACT.JS

1. T​rue or false? In React, you can use a ternary operator in a component’s return statement in React.

2. React Router is…

3. React Router has a <Link> element.

4. P​lease choose the valid command to install react-player.

5. True or false? webpack is a module bundler.

6. What will be the output of the code below?

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;

8. What is an asset?

9. What is the syntax used to add a new dev dependency to a React app? Select all that apply. 

10. 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.      

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.      

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?

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.      

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.      

16. In React, you can import an image as you would any other module.      

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.      

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.       

Interactive CSS CONCLUSION

This Course is shared with other Meta Courses – Choose wich path to go