React Components

COURSE – REACT BASICS QUIZ ANSWERS

Week 1: React Components

Meta Front-End/Android Developer Professional Certificate

Complete Coursera Answers & Study Guide

Click to Enroll in Coursera Meta Front-End Professional Certificate

TABLE OF CONTENT

React Components INTRODUCTION

React.js is a popular library for developing single-page web applications. React components allow developers to build their own user interfaces (UIs) and create interactive, dynamic user experiences. In this module of the Meta Front-End Developer Professional Certificate on Coursera, you will explore React’s features and learn how to use React components to create effective UIs. You will also become familiar with JSX syntax for styling React components and discover best practices for React application development. By the end of this module, you should be able to apply React components in your own projects confidently.

The course instructors will provide an overview of React fundamentals such as state, props, and events. With the help of video lectures, demonstrations, and coding exercises, this module will equip you with the fundamentals you need to become a React developer. You will be able to create React components from scratch and make your React web applications work seamlessly with other JavaScript libraries.

Learning Objectives

  • Explain the concepts behind React and component architecture
  • Create a component to serve a specific purpose
  • Create a component folder and demonstrate how to create and import files within that folder
  • Use and manipulate props and components to effect visual results
  • Describe how to use assets within an app to apply styling and functional components

SELF REVIEW: YOUR FIRST COMPONENT

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

  • True (CORRECT)
  • False

Correct: Yes, it is correct that a function declaration is a way to create a component in React.

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 (CORRECT)
  • False

Correct: Yes, it is correct that you can surround multiple lines of code in a pair of parentheses so that all that code can be returned from a component.

3. I​s this valid component code?

function Example() { return (<h1>Example</h1>) }
  • Y​es (CORRECT)
  • I​t would be valid, if it was spread over multiple lines.
  • N​o

Correct: This code shows a component named Example. It is defined as a function, it does not receive any parameters, and it has a return statement with <h1> Example</h1> text in a pair of parentheses.

SELF REVIEW: CREATING AND IMPORTING COMPONENTS

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

  • True
  • False (CORRECT)

Correct: That’s correct! You can, and should, save all the components as separate files.

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

  • True
  • False (CORRECT)

Correct: That’s correct! You should use the import keyword to import one component into another in React.

3. The code that follows is the first line of the App.js file. W​hat does this line do?

  • import Sidebar from “./Sidebar”;
  • I​t imports a Sidebar component from the Sidebar.js file, which is located in the same folder as the App.js file. (CORRECT)
  • I​t imports a Sidebar component from the Sidebar folder into the App.js file.
  • I​t imports a Sidebar component into the Sidebar folder, and then this entire folder is imported into the App.js file.

Correct: This line of code imports a Sidebar component from the Sidebar.js file in the same folder as the App.js file.

KNOWLEDGE CHECK: REACT COMPONENTS AND WHERE THEY LIVE

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

  • lowerCamelCase
  • PascalCase (UpperCamelCase) (CORRECT)
  • kebab-cased

Correct: Correct! The first letter should be uppercased, with all the following words starting with an uppercased letter, without spaces.

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; 
  • import “Example”;
  • import Example from “./Example”; (CORRECT)

Correct: That’s correct! The syntax has the following structure: import ComponentName from “./ComponentName”

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 (CORRECT)

Correct: That’s correct! You cannot omit the “./”

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

  • export default;
  • export example;
  • export default Example; (CORRECT)
  • export standard Example;

Correct: That’s right! The correct syntax includes the keywords “export”, followed by “default”, followed by the name of the component.

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 App component on the screen.
  • It will render the Example component on the screen. (CORRECT)
  • It will show a warning.
  • It will throw an error.

Correct: That’s correct. This return statement will show the Example component on the screen.

SELF REVIEW: PASSING PROPS

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

  • True (CORRECT)
  • False

Correct: Yes, it is correct that props is an object in React.

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 (CORRECT)
  • False

Correct: Yes, this statement is correct.

3. W​hat is the error in the code below?

function Greeting() {
    return <h1>Hello, {props.name}</h1>
}
export default Greeting
  • Y​ou should always add a pair of parentheses after the return keyword.
  • Y​ou need to add extra spacing after the function’s name.
  • The Greeting function should receive a props parameter. (CORRECT)

Correct: The Greeting function should receive a props parameter.

SELF REVIEW: MULTIPLE COMPONENTS

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 (CORRECT)

Correct : You should import the component only once, and then you’re allowed to render it as many times as needed.

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

  • True (CORRECT)
  • False

Correct: Yes. You can render as many of the same component, or as many different components as you like, from the parent component.

3. W​hat is wrong with this code?

function App() {
    return (
        <BlogCard />
        <BlogCard />
        <BlogCard />
    )
}
  • T​here is no JSX attribute used when rendering the BlogCard components.
  • T​here is no root element. (CORRECT)
  • T​here is no props object passed to the App component.

Correct: You must wrap all the returned BlogCard compoents in a wrapping element, such as a div.

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

Subscribe to Our Newsletter

React Basics MODULE QUIZ 1

1. Why is React using the concept of components? 

  • It allows you to build more modular apps. (CORRECT)
  • It helps accessibility readers for people who are visually impaired. 
  • It allows the browser to render your pages faster. 
  • It improves the styling of your pages.

Correct!

2. What is the absolute minimum code that a component must have to be able to show something on a screen when rendered? 

  • A named function declaration and a return statement with at least a single element with some text inside of it. (CORRECT)
  • A named function declaration and an array of items inside of the function’s body
  • A named function declaration and some variables in the function’s body.
  • A named function declaration.

Correct: Correct! This is the absolute minimum of code a component must have to end up being rendered in the browser.

3. What are the benefits of using props? 

  • Props allow parent components to pass data to children components. (CORRECT)
  • Props allow developers to write custom HTML tags. 
  • Props allow children components to update the values of each prop independent from their parent component.

Correct: That’s correct! Props facilitate the passing of data from parents to children components.

4. You are tasked with building a web layout using React. The layout should have a header, a footer, and three products showing various data in the main part of the page. Choose the preferred component structure. 

  • It should have a separate component for each link, paragraph, heading, etc. 
  • It should have the following components: Header, Main, Product, Footer (with the Product component being imported into Main and rendered three times). (CORRECT)
  • It should all fit into a single component named App component.

Correct: That’s correct. Having such component structure would make all the building blocks of your React app at a correct amount of modularity. 

5. Which of the following keywords can you usually find in a React component? 

  • function, props, export, import, contain 
  • modular, expression, prop, default 
  • module, function, prop, exported, default 
  • function, props, return, export, default (CORRECT)

Correct: That’s correct! These are all valid keywords, and they are commonly found in most React components.

6. What is create-react-app?

  • It’s a command you can use in a component.
  • It’s a stand-alone application on the web. 
  • It’s a command you run when you want to serve your app in the browser. 
  • It’s an npm package used to build a boilerplate React app. (CORRECT)

Correct: That’s correct! The create-react-app is a npm package that you can use to build a boilerplate React app.

7. Imagine you want to build a brand new React app, named “example”. Choose the correct command to build a starter React app to work off of. 

  • npm install react-app example  
  • node init react-app example
  • npm initialize react-app example 
  • npm init react-app example (CORRECT)

Correct: Using this command, you’ll build a brand-new boilerplate React app, named “example”.

8. True or false? When you write arrow functions, for any number of parameters other than a single parameter, using parentheses around parameters is compulsory.

  • True. (CORRECT)
  • False

Correct: When you write arrow functions, for any number of parameters other than a single parameter, using parentheses around parameters is compulsory.

9. T​rue or false? You can use function calls in JSX.

  • T​rue (CORRECT)
  • F​alse

Correct: You can use function calls in JSX.

10. T​rue or false? When an arrow function has a single parameter, you do not need to add parentheses around the item parameter (to the left of the arrow).

  • True (CORRECT)
  • False

Correct: When an arrow function has a single parameter, you do not need to add parentheses around the item parameter (to the left of the arrow).

11. True or false? React enables developers to build SPAs (single page applications).

  • False
  • True (CORRECT)

Correct: Well done. A technology that loads a single web page and performs updates to the DOM on this single web page based on user interaction with this web page in known as a SPA. Indeed, React allows developers to build SPAs.      

12. A React component is much like a regular JavaScript function.    

  • True (CORRECT)
  • False

Correct: Well done. A React component is indeed much like a regular JavaScript function.    

13. T​rue or false? For a component to render something on the page, it needs to return one or more JSX elements.

  • False
  • True. (CORRECT)

Correct: For a component to render something on the page, it needs to return it as one or more JSX elements.

14. As a new developer, what’s the part of the create-react-app-generated starter app structure that you should focus on?      

  • the ‘src’ folder (CORRECT)
  • the ‘public’ folder     
  • the package.json file     

Correct: Well done. The ‘src’ folder is the folder in which you’ll be developing almost all the functionality of your React app.    

15. Imagine that you have an App component and a Footer component in the same location, at the root of the src folder. Choose the proper way to import the Footer component into the App component.

  • import Footer from “./Footer”; (CORRECT)
  • import “Footer” from “Footer”;
  • import Footer from Footer.js;
  • <Footer />

Correct: This is a proper way to import the Footer component in this situation.

16. In React, functional components are reusable blocks of code that act like a JavaScript function and you can pass data from one component to another using props. Which of the following statements are true? Select all that apply. 

  • Props are passed using JSX syntax. (CORRECT)
  • Props are like a JavaScript object. (CORRECT)
  • When two components communicate with each other, the component sending the props data is known as the parent and the one receiving the data is known as the child. (CORRECT)

Correct: That’s correct. It’s helpful to think of props as arguments that components can accept and are passed using JSX.
Correct: That’s correct. Props are like a JavaScript object in that they can accept many data types including strings, integers, functions, arrays and objects.     
Correct: That’s correct. Data flow is one-directional which means that a parent component can send the same data to one or more child components, but it’s not possible to communicate from the child components back to the parent component using props.     

17. Which of the following can be defined as a parameter within a functional component?      

  • Return statement     
  • function    
  • props (CORRECT)

Correct: That’s correct. The props object can be defined as a parameter within a function component.

18. True or false. You need to define how React should render a component. Can you use a regular JavaScript function to complete this action?      

  • False
  • True (CORRECT)

Correct: Correct! You can define how React renders a component using a regular JavaScript function.  

19. T​rue or false? Using React, you can easily convert a CSS rule to a JavaScript object, where each key-value pair describes a CSS declaration.

  • True (CORRECT)
  • False

Correct: Correct! Using React, you can easily convert a CSS rule to a JavaScript object, where each key-value pair describes a CSS declaration.

20. You would like to use JSX to display a user’s location on a webpage, and you have defined the following JavaScript variable:

  • const location = Boston;  ​​
  • Which of the following lines of code uses the correct syntax for embedding this variable in an HTML paragraph element?
  • const result = <p>location</p>;
  • const result = <p>{location}</p>; (CORRECT)
  • constresult = <p>Boston</p>;
  • const result = <p>”location”</p>;

Correct: That’s right! The JavaScript variable should be placed between the paragraph tags and enclosed in curly braces.

21. True or false? When using an img element in your React component, you can set the value of the src attribute using a JSX expression.

  • False
  • True (CORRECT)

Correct: You can set the value of the src attribute using a JSX expression?

React Components CONCLUSION

The React.js library provides the means to produce rich and interactive user interfaces for single page web applications. Through this module, you have learned how to use React components, utilize JSX syntax to style content, and how props and state can be used within a React application. With these skills in hand, you are now equipped to begin building your own sophisticated web applications using React.

If you found this Module: Introduction to React.js helpful and would like to continue learning more about front-end development with JavaScript, we encourage you TO enroll in our follow up course on Coursera today!

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

Previous Front-End
Previous Android
Next Week 2

Subscribe to our site

Get new content delivered directly to your inbox.

Quiztudy Top Courses

Popular in Coursera

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!

Subscribe