Introduction to React Native INTRODUCTION

KNOWLEDGE CHECK: INTRODUCTION TO REACT NATIVE

1. React Native uses the following tech stack to build cross-platform native apps. Select the correct answer.

2. React Native can build native mobile apps on the following platforms. Select all that apply.

3. Which of the following statements are true about React Native?

4. If you are new to mobile development and don’t want to write any custom native code, what do you think is the best way to build your React Native app?

5. With Expo, you can push updates to the app Over the Air (OTA). This means you do not have to make updates via the app store!

6. To be proficient in React Native, which programming languages should you also be proficient in? Select all that apply.

7. You develop apps in React Basic that use the same codebase for multiple mobile platforms. What kind of mobile developer does this make you?      

8. You are brand-new to mobile development and would like to set up a development environment for React Native. Which environment would be ideal?     

9. Before you install the Expo package, which preliminary steps should you take? 
Choose all that apply.     

10. What are the biggest benefits of using React Native are? Select all that apply.

11. Which of the following statements are true about React Native Code?

12. Expo is an open-source platform that adds a layer of abstraction on top of React Native apps.  Which of the following are benefits of this? Check all that apply.

SELF REVIEW: YOUR FIRST REACT NATIVE COMPONENT

1. When you created a footer component for the Little Lemon app, which one of these statements should you have used to import the footer component into the App component.

2. Which of the following core components should you have used to create the footer component for Little Lemon? Select all that apply.

3. Which one of the following code snippets contains the correct code for representing the Little Lemon footer component?

export default function LittleLemonFooter() { 
  return ( 
    <View 
      style={{ 
        backgroundColor: '#F4CE14', 
        marginBottom: 10, 
        fontSize: 18, 
        color: 'black', 
        textAlign: 'center', 
      }}> 
        All rights reserved by Little Lemon, 2022{' '} 
    </View> 
  ); 
} 

export default function LittleLemonFooter() { 
  return ( 
    <View 
      style={{ 
        backgroundColor: '#F4CE14', 
        marginBottom: 10, 
      }}> 
      <Text 
        style={{ 
          fontSize: 18, 
          color: 'black', 
          textAlign: 'center', 
        }}> 
        All rights reserved by Little Lemon, 2022{' '} 
      </Text> 
    </View> 
  ); 
} 
(CORRECT)

4. Which component type is built into the react-native package and comes ready-to-use?      

5. Custom Components in React are reusable throughout the app. True or false?

KNOWLEDGE CHECK: REACT NATIVE COMPONENTS

1. Which of the following are core components in React Native? Select all that apply.

2. React Native uses component-based architecture, and code is reused between components. True or false?

3. Which of the following make up React Native components? Select all that apply.

4. Custom Native components are written in the following languages. Select all that apply.

5. Study the code below and choose the correct output that you will expect to see on the emulator.

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


const Cat = () => {
  return (
    <View>
      <Text>I am also a cat!</Text>
    </View>
  );
 }
 
 const Cafe = () => {
   return (
     <View>
       <Text>Welcome!</Text>
       <Cat />
       <Cat />
       <Cat />
     </View>
   );
 }
 
 export default Cafe;

SELF REVIEW: BUILD A REACT NATIVE SCREEN

1. Which one of the following code snippets represents the correct parent view component for wrapping the Welcome screen?     

2. Which of the following core components should you have used to create the Welcome screen for Little Lemon? Select all that apply.

3. Which one of the following code snippets correctly represents the Little Lemon app’s Welcome screen, as created in the previous exercise?

export default function WelcomeScreen() { 
  return ( 
    <View style={{ flex: 1 }}> 
      <Text 
        style={{ 
          padding: 40, 
          fontSize: 30, 
          color: '#EDEFEE', 
        }}> 
        Welcome to Little Lemon 
      </Text> 
      <Text 
        style={{ 
          fontSize: 24, 
          padding: 20, 
          marginVertical: 8, 
          color: '#EDEFEE', 
        }}> 
        Little Lemon is a charming neighborhood bistro that serves simple food   and classic cocktails in a lively but casual environment. We would love to hear your experience with us! 
      
      </Text> 
    </View> 
  ); 
} 

export default function WelcomeScreen() { 
  return ( 
    <View style={{ flex: 1 }}> 
      <Text 
        style={{ 
          padding: 40, 
          fontSize: 30, 
          color: '#EDEFEE', 
          textAlign: 'center', 
        }}> 
        Welcome to Little Lemon 
      </Text> 
      <Text 
        style={{ 
          fontSize: 24, 
          padding: 20, 
          marginVertical: 8, 
          color: '#EDEFEE', 
          textAlign: 'center', 
        }}> 
        Little Lemon is a charming neighborhood bistro that serves simple food and classic cocktails in a lively but casual environment. We would   love to hear your experience with us! 
      </Text> 
    </View> 
  ); 
} 
} 

(CORRECT)

4. The View component can be nested inside other views and can have zero or many children within it. True or false?

5. You have created a View component for your app and would like it to take 50% of the space on the screen. Which of the following styling parameter settings would you apply to achieve this?

SELF REVIEW: BUILD A SCROLLABLE COMPONENT

1. Which core component in React Native should you have imported to build the scrollable Welcome screen?

2. Which of the following core components should you have used to create the scrollable Welcome screen for Little Lemon? Select all that apply.

3. Which code snippets represent the final code for creating a ScrollView that wraps your Welcome screen?

4. Which of the following are true statements about the ScrollView component? Check all that apply.

5. You would like to create a list for your app that is scrolled horizontally. Which ScrollView prop would you pass to accomplish this?  

KNOWLEDGE CHECK: VIEWS, TEXT AND SCROLLABLE COMPONENTS

 1. A View component can be nested inside other views. Select the correct option.

2. Which of the following code blocks are correct and will not throw any errors? Select all that apply.

<View>
  <Text>
    Some text
  </View>
</Text>

<View>
  <Text>
    Some text
  </Text>
</View>
(CORRECT)

<View>
  Some text
</View>

<View>
  <Text>Some text
    <Text> Some more text</Text>
  </Text>
</View>
(CORRECT)

3. Study the code below and select the image that best represents how the code will render on the emulator.

import React from "react";
import { View, Text } from "react-native";
const ViewBoxesWithColorAndText = () => {
  return (
    <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
      <View style={{ backgroundColor: "blue", flex: 0.5 }} />
      <View style={{ backgroundColor: "red", flex: 0.3 }} />
    </View>
  );
};
export default ViewBoxesWithColorAndText;

4. Which of the following statements are true about the ScrollView component? Select all that apply.

5. Study the code below and choose the correct output that you will expect to see on the emulator.

<Text style={{ fontWeight: 'bold' }}>
  I am bold
  <Text style={{ color: 'red' }}> and red</Text>
</Text>

SELF REVIEW: STYLE A COMPONENT

1. Which one of these approaches is recommended for more manageable code when styling components in this exercise?

2. From the exercise you completed, which one of these code snippets represents the styling used for the Little Lemon footer text?

footerText: { 
    fontSize: 18, 
    color: 'black', 
    textAlign: 'center', 
    font: 'italic', 
  }, 

footerText: { 
    fontSize: 18, 
    color: 'black', 
    textAlign: 'center', 
fontStyle: 'italic', 
 }
(CORRECT)

footerText: { 
    fontSize: 18, 
    color: 'black', 
    textAlign: 'center', 
    fontWeight: 'italic', 
  }, 

3.  Which one of these code snippets represents the final code for your StyleSheet that contains the styles for the Welcome screen?

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerText: {
    padding: 40,
    fontSize: 30,
    color: '#EDEFEE',
    textAlign: 'center',
  },
  regularText: {
    fontSize: 24,
    padding: 20,
    marginVertical: 8,
    color: '#EDEFEE',
    textAlign: 'center',
  },
});
(CORRECT)

const styles = StyleSheet.initialize({
  container: {
    flex: 1,
  },
  headerText: {
    padding: 40,
    fontSize: 30,
    color: '#EDEFEE',
    textAlign: 'center',
  },
  regularText: {
    fontSize: 24,
    padding: 20,
    marginVertical: 8,
    color: '#EDEFEE',
    textAlign: 'center',
  },
});

4. The StyleSheetAPI helps abstract the component styles from the component’s render and results inreadable and meaningful code.  True or false?

5. Which of these are true about the StyleSheetAPI in React Native?  

MODULE QUIZ: INTRODUCTION TO REACT NATIVE

1. Of the following, what are some benefits of React Native? Select all that apply.

2. React Native components can be categorized into the following groups. Select all that apply.

3. Which of the following statements are true about React Native?

4. If you are new to mobile development, what is the recommended way to set up React Native?

5. With Expo, you can push the Over The Air (OTA) updates. This is because:

6. Which of the following is true about the View component? 

7. Styles should not be abstracted away from the render function of a component, as this would make the code harder to read and understand. True or false?

8. Which job title would be most applicable if you learned React Native and used it to develop applications?

9. You are asked to write a readable and clean component. Which of the following code snippets better matches this description?

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';


export default function LittleLemonHeader() {
  return (
    <View style={headerStyles.container}>
      <Text style={headerStyles.headerText}>
         Little Lemon
         <Text style={headerStyles.innerText}> Cafe</Text>
      </Text>
  </View>
  );
}

const headerStyles = StyleSheet.create({
  container: {
    flex: 0.1,
    backgroundColor: '#F4CE14',
  },
  headerText: {
    padding: 40,
    fontSize: 30,
    color: 'black',
    textAlign: 'center',
  },
  innerText: {
    fontWeight: 'bold',
  },
});

import * as React from 'react';
import { View, Text } from 'react-native';


export default function LittleLemonHeader() {
  return (
    <View style={{ flex: 0.1, backgroundColor: '#F4CE14' }}>
<Text style={{ padding: 40, fontSize: 30, color: 'black', textAlign: "center" }}>
        Little Lemon
        <Text style={{ fontWeight: 'bold' }}> Cafe</Text>
      </Text>
    </View>
  );
}

10. Which of the following code snippets are correct and will not throw any errors? Select all that apply.

<ScrollView>
  <Text>Some text
    <Text> Some more text</Text>
  </Text>
</ScrollView>
(CORRECT)  

<ScrollView>
  Some text
</ScrollView>

<ScrollView>
  <Text>
    Some text 
  </ScrollView>
</Text>

<ScrollView>
  <Text>
    Some text
  </Text>
</ScrollView>
(CORRECT)