Creating Your First React Native App

# CHAPTER 5

Creating Your First React Native App #

1. Introduction #

2. Learning Objectives #

• Identify the core files and folders in an Expo project structure.

• Understand the role of App.js as the root entry point.

• Modify the default code to display custom text.

• Run the Metro Bundler and view the app on a physical device.

• Utilize Fast Refresh to see code changes instantly.

3. The Expo Project File Structure #

• nodemodules/: This massive folder contains all the third-party JavaScript libraries React Native needs to run. Never modify files here.

• package.json: The command center of your app. It lists your app's name, version, and the names of all the packages installed in nodemodules.

• app.json: The Expo configuration file. This is where you configure the app's icon, splash screen color, and final native package names (e.g., com.yourcompany.app).

• App.js: The heart of your application. This is the very first file that runs when your app launches.

4. Dissecting App.js #

// 1. IMPORT STATEMENTS: We pull in the tools we need from the libraries.
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

// 2. THE COMPONENT: This is the main function that returns the UI.
export default function App() {
  return (
    // <View> is exactly like a <div> in HTML. It acts as a container.
    <View style={styles.container}>
      {/* <Text> is required to display any words on the screen! */}
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

// 3. THE STYLES: This is where we write CSS-like rules to design our app.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: &#039;#fff&#039;,
    alignItems: &#039;center&#039;,
    justifyContent: &#039;center&#039;,
  },
});

5. Running the App (Metro Bundler) #

1. 1. Open the integrated terminal in VS Code (Ctrl + ~ or Cmd + ~).

1. 2. Type npx expo start and press Enter.

1. 3. This launches the Metro Bundler. Metro is a local web server running on your computer. Its job is to take your JavaScript code, bundle it into one massive file, and stream it to your phone over Wi-Fi.

1. 4. Scan the massive QR code with the Expo Go app on your physical phone (or press a to launch your Android emulator).

6. The Magic of Fast Refresh #

1. 1. In App.js, change <Text>Open up App.js...</Text> to <Text>Hello React Native! I built this!</Text>.

1. 2. Press Save (Ctrl + S or Cmd + S).

1. 3. Look at your phone. Instantly, the text on your phone updates.

7. Debugging Basics #

1. 1. Read the red screen. It will tell you exactly what went wrong: *Can't find variable: Txt*.

1. 2. Look at your VS Code terminal. It will tell you the exact file and line number where the error occurred.

1. 3. Fix the typo, hit Save, and the red screen will instantly disappear!

8. Visual Learning: The App Ecosystem #

[ package.json ] --(Defines Dependencies)--> [ node_modules ]
                                                   |
[ App.js ] <--(Imports React tools from)-----------+
    |
(Exports UI)
    v
[ Metro Bundler Server ]
    |
(Transmits over Wi-Fi on Save)
    v
[ Mobile Phone Screen ]

9. Common Mistakes #

• Writing text directly inside a View: If you write <View>Hello World</View>, your app will instantly crash with an error. In web development, a <div> can hold text directly. In React Native, a <View> CANNOT hold text. All text strings MUST be wrapped strictly inside a <Text> component!

10. Best Practices #

• Console Logging: The easiest way to debug logic is using console.log("Button clicked!");. But where does this print? It does NOT print on the phone screen. It prints in the VS Code terminal window where the Metro Bundler is running!

11. Mini Project: Customize the Welcome Screen #

1. 1. Ensure your app is running on your phone via npx expo start.

1. 2. Open App.js.

1. 3. Change the <Text> to say "Welcome to my very first Mobile App!".

1. 4. Go down to the styles object. Change backgroundColor: '#fff' (White) to backgroundColor: 'dodgerblue'.

1. 5. Hit Save. Watch your phone instantly transform into a blue welcome screen. Congratulations, you are officially a mobile app developer!

12. Practice Exercises #

1. 1. What file is considered the "Command Center" of a Node/Expo project, holding the list of installed third-party libraries?

1. 2. If you change a line of code in App.js and hit save, what feature automatically updates the UI on your phone without requiring a full recompilation?

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain the purpose of the App.js file in a React Native Expo project. How does it relate to the component tree?

• Q: Contrast the developer experience of React Native's "Fast Refresh" with traditional native Android/iOS compilation. Why is Fast Refresh a major selling point for development teams?

• Q: Describe how you would troubleshoot a red "ReferenceError" screen appearing on your physical device during development.

15. FAQs #

16. Summary #

17. Next Chapter Recommendation #