You have a request ? Contact Us Join Us
Home
Meta
React Native

Capstone (React App)

Coursera: Meta React Native Specialization. Starting the project, Project Functionality, Final graded quiz
Capstone React App


Module Quiz: Starting the project

1. In order for Git to track a file, where should you place it?
  • The staging area
  • The modified area
  • The production area
2. What Git command allows you to see which files were changed and what exactly these changes are within the files?
  • git diff
  • git log
  • git status
3. Which Git command allows you to review specific file changes, including the dates, times, and users who made the changes?
  • git bisect <date> <file>
  • git blame <date> <file>
  • git log <date> <file>
4. Imagine you have a React Native application built with Expo that has been published in the Google Play Store and AppStore. Suddenly, your team locates a critical bug and promptly fixes it. Now it’s time to roll out a new version to your users. What would be the quickest way to execute the rollout?
  • Rolling back to a previous version using the Apple and Google Store consoles
  • Using the Expo OTA (Over the air updates) service to push the update
  • Quickly submitting a new build to the stores to be approved
5. What are some of the features that React Native enables to enjoy a great developer experience? Select all that apply.
  • A fast refresh, giving almost instant feedback for your changes in React Components
  • Over the air updates to overcome the burden of traditional store reviews.
  • Easy Debugging with Chrome Developer tools.
6. How many columns are generally used in a mobile grid system? 
  • 8
  • 4 
  • 12 
7. What is the purpose of UI? Select all that apply. 
  • UI makes it possible for users to communicate with technology. 
  • With UI, users can interact with on screen elements. 
  • UI is a methodology design that is used to produce goods that offer customers useful and meaningful experiences . 
  • UI presents interactive, visual elements of an app to users. 
8. True or false. To create a smooth animation in Figma, you can use the Clever animate option. 
  • True 
  • False 
9. What is the very first step when creating a wireframe in Figma? 
  • Gather requirements 
  • Create a frame 
  • Create a grid 
10. Complete the following sentence. In Figma, the ___________________is the background for all your designs and where you'll create and evaluate your work. 
  • The right side bar 
  • The menu 
  • Canvas

Module Quiz: Project Functionality

1. Which of the following are features supported by the FlatList component? Select all that apply. 
  • Fully cross platform 
  • Sectional support 
  • Header, footer and separator support 
  • Pull to refresh support 
2. Which of the following are required props of the FlatList component? Select all that apply. 
  • sections 
  • renderItem 
  • data 
  • keyExtractor 
3. While using React Navigation, which methods allow you to move from one screen to another? 
  • navigation.goTo('Details') 
  • navigation.pop('Details')
  • navigation.navigate('Details')
4. Which option is used to set specific options for each screen and customize its header bar in React Navigation? 
  • options 
  • screenOptions 
  • headerOptions
5. Observe the code below. Which request method is used by the fetch call? 
const response = await fetch(
 'https://raw.githubusercontent.com/Meta-Mobile-Developer-PC/Working-With- Data-API/main/menu-items-by-category.json');
  • GET 
  • POST 
  • PUT 
6. Which of the following statements about JSON syntax are correct? Select all that apply. 
  • Keys and values are separated with a colon. 
  • Elements in an array are separated with commas. 
  • Objects are separated by enclosing each one in square brackets. 
7. When populating data from AsyncStorage in your React Native applications once they start up, what’s the best place to enter your code? 
  • Inside the render part of your component 
  • In a separate file, so your code is clean and concise 
  • Inside a useEffect with no dependencies, so the code only runs after the application has rendered for the first time 
8. What API removes all AsyncStorage data for all the clients and the libraries? 
  • multiRemove 
  • clear 
  • removeItem 
9. When using Expo SQLite, what’s the best place for opening a database connection in a React Native application? 
  • Inside a useEffect hook with no dependencies 
  • In a separate file, just to keep the code cleaner and more concise 
  • In the application entry point component, but outside, right at the top of the file 
10.
What’s the SQL keyword that allows you to insert variables as extra parameters and not inside the SQL query itself? 
  • The ? keyword 
  • The ! keyword 
  • The INSERT keyword 

Final graded quiz

1. Which of the following are valid React Native component categories? Select all that apply:
  • Your native custom components
  • Core Components
  • None of the above
  • Community Components
2. The FlatList component offers a prop that allows you to configure a separator component between each item. What is the name of the prop?
  • SectionSeparatorComponent
  • ListSeparatorComponent
  • ItemSeparatorComponent
3. Observe the emulator screen below.
Emulator












Which of the following code snippets will produce this output on the emulator?
import React from 'react'; 
import { View, Image, StyleSheet } from 'react-native'; 

const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    margin: 10, 
  }, 
  logo: { 
    width: 100, 
    height: 100, 
    flex:1 
  }, 
}); 
const DisplayAnImageWithStyle = () => { 
  return ( 
    <View style={styles.container}> 
      <Image 
        resizeMode={"contain"} 
        style={styles.logo} 
        source={require('./logo.png')} 
      /> 
    </View> 
  ); 
} 
export default DisplayAnImageWithStyle; 

import React from 'react'; 
import { View, Image, StyleSheet } from 'react-native'; 

const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    margin: 10, 
  }, 
  logo: { 
    width: 100, 
    height: 100, 
    flex:1 
  }, 
}); 

const DisplayAnImageWithStyle = () => { 
  return ( 
    <View style={styles.container}> 
      <Image 
        resizeMode={"stretch"} 
        style={styles.logo} 
        source={require('./logo.png')} 
      /> 
    </View> 
  ); 
} 

export default DisplayAnImageWithStyle; 

import React from 'react'; 
import { View, Image, StyleSheet } from 'react-native'; 

const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    margin: 10, 
  }, 
  logo: { 
    width: 100, 
    height: 100, 
    flex:1 
  }, 
}); 

const DisplayAnImageWithStyle = () => { 
  return ( 
    <View style={styles.container}> 
      <Image 
        resizeMode={"cover"} 
        style={styles.logo} 
        source={require('./logo.png')} 
      /> 
    </View> 
  ); 
} 

export default DisplayAnImageWithStyle; 

4. You have used the following code to implement the authentication flow in the Capstone project with React Navigation.
isUserOnboarded ? (
 <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
 </>
) : (
 <>
    <Stack.Screen name="Onboarding" component={OnboardingScreen} />
 </>
);
This defines different screens for a stack navigator, depending on a condition. This condition determines whether the user has completed the onboarding flow or not and it’s expressed in code by the below snippet.
Imagine you are in the Profile Screen and you decide to sign out by pressing the Log Out button. This clears out any data previously stored in disk and resets the isUserOnboarded flag. How does React Navigation react to that change?
  • React Navigation transitions to the Onboarding Screen and unmounts the Home and Profile screens from the navigator, having only the Onboarding Screen in the stack.
  • React Navigation pushes the Onboarding Screen onto the existing stack and transitions there. After that, the stack navigator contains three screens in total.
  • React Navigation stays in the Profile Screen and does not transition to the Onboarding flow unless you press the Back button or quit/restart the application.
5. Imagine you would like to convert a valid JSON object into a JSON string in JavaScript. Which method allows you to accomplish that?
  • JSON.stringify()
  • JSON.parse()
  • Using the string constructor: String(JSON)
6. The following code snippet is used to retrieve the menu items from a remote server.
const [response, setResponse] = React.useState([]);
 
const fetchData = async () => {
    const response = await fetch(
    'https://raw.githubusercontent.com/Meta-Mobile-Developer-PC/Working-With- Data-API/main/menu-items-by-category.json'
    );
    setResponse(response);
};
The endpoint used returns the items in an array format and the response is set into the local state. Would the code below work as intended?
  • No, you need to pass a second parameter to the fetch function to specify the method used in the HTTP request, which is get in this case.
  • Yes, the data is retrieved using the fetch function. Fetching data is an asynchronous operation, so the await keyword should be used. Since the endpoint returns an array, the local state is set with the proper data type.
  • No, the response should be transformed into proper JSON prior to setting the state. For that, a new line should be added after the fetch call: const json = await response.json();
7. The AsyncStorage API methods mergeItem and setItem can be used interchangeably. True or false?
  • True
  • False
8. How can you improve the APIs provided by Expo SQLite when interacting with the database?
  • By wrapping the db.transaction calls into Promises so the caller code can use async and await keywords.
  • By moving the SQL transactions into the server.
  • By combining the API calls with AsyncStorage.
9. Which git command will show you the current state of the local working directory?
  • git diff
  • git status
  • git pull
10. When creating a form, why should you space input fields? Select all that apply:
  • To make better use of screen space.
  • To improve the user interface.
  • So users can identify the labels that refer to the input.
  • To implement logical grouping to make the form more understandable.

#Meta #React Native

Post a Comment

© ‧ TeamsCloud ‧ All rights reserved. Developed by Teams
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.