In this lesson, we will create our first React Native application: a simple "Hello World" app. This will help you get familiar with the basic structure of a React Native project and understand how to run your app on a simulator or a real device.

• Understand the basic structure of a React Native project.
• Learn how to create a new React Native project.
• Write and run a simple "Hello World" app.

• Ensure you have set up your development environment as described in the previous lesson.

To create a new React Native project, follow these steps:

1. Open your terminal and navigate to the directory where you want to create your project.

2. Run the following command to create a new React Native project:

   npx react-native init HelloWorldApp
   

   This command will create a new directory called HelloWorldApp with all the necessary files and dependencies.

3. Navigate into your project directory:

   cd HelloWorldApp
   

Here is a brief overview of the key files and directories in a new React Native project:

• node_modules/: Contains all the project dependencies.
• ios/: Contains the iOS-specific code and configuration.
• android/: Contains the Android-specific code and configuration.
• App.js: The main entry point of your application.
• index.js: The entry point for the React Native application.

1. Open the App.js file in your code editor. You will see the following default code:

   import React from 'react';
   import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
   
   const App = () => {
     return (
       <SafeAreaView>
         <View style={styles.container}>
           <Text style={styles.text}>Welcome to React Native</Text>
         </View>
       </SafeAreaView>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
     },
     text: {
       fontSize: 20,
     },
   });
   
   export default App;
   

2. Modify the code to display "Hello World" instead of "Welcome to React Native":

   import React from 'react';
   import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
   
   const App = () => {
     return (
       <SafeAreaView>
         <View style={styles.container}>
           <Text style={styles.text}>Hello World</Text>
         </View>
       </SafeAreaView>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
     },
     text: {
       fontSize: 20,
     },
   });
   
   export default App;
   

3. Save the file.

1. Open your terminal and navigate to your project directory.

2. Run the following command to start the Metro bundler:

   npx react-native start
   

3. Open a new terminal window and navigate to your project directory.

4. Run the following command to start the iOS simulator:

   npx react-native run-ios
   

1. Open your terminal and navigate to your project directory.

2. Run the following command to start the Metro bundler:

   npx react-native start
   

3. Open a new terminal window and navigate to your project directory.

4. Run the following command to start the Android emulator:

   npx react-native run-android
   

1. Connect your device to your computer via USB.
2. Enable developer mode and USB debugging on your device.
3. Follow the same steps as for the emulator, but ensure your device is selected as the target.

1. Change the text from "Hello World" to your name.
2. Change the font size to 30.

1. Modify the App.js file:

   import React from 'react';
   import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
   
   const App = () => {
     return (
       <SafeAreaView>
         <View style={styles.container}>
           <Text style={styles.text}>Hello, [Your Name]</Text>
         </View>
       </SafeAreaView>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
     },
     text: {
       fontSize: 30,
     },
   });
   
   export default App;
   

2. Save the file and run the app again.

• Ensure your development environment is set up correctly. Refer to the previous lesson if you encounter issues.
• Check for typos in your code, especially in import statements and component names.
• Make sure the Metro bundler is running before you try to run your app on a simulator or device.

Congratulations! You have successfully created and run your first React Native app. In this lesson, you learned how to set up a new project, understand the basic project structure, and write a simple "Hello World" app. This foundational knowledge will be crucial as you progress through the course and build more complex applications.