**Course Title:** Building Mobile Applications with React Native **Section Title:** Introduction to React Native and Setup **Topic:** Creating your first React Native application. In the previous topics, we covered an overview of React Native and its benefits, set up our development environment, and understood the architecture of React Native applications. Now, it's time to dive in and create our first React Native application. **Step 1: Create a new React Native project** To create a new React Native project, we'll use the React Native CLI. Open your terminal and run the following command: ```bash npx react-native init AwesomeProject ``` This will create a new React Native project called `AwesomeProject` in a directory with the same name. **Step 2: Explore the project structure** Let's take a look at the project structure: ```bash AwesomeProject/ android/ ios/ node_modules/ index.js App.js package.json ``` Here's a brief explanation of each directory/file: * `android/` and `ios/` directories contain the platform-specific code for Android and iOS, respectively. * `node_modules/` directory contains the dependencies installed by npm. * `index.js` is the entry point of our application. * `App.js` is the main component of our application. * `package.json` contains metadata about our application. **Step 3: Run the application** To run the application, navigate to the project directory and run the following command: ```bash npx react-native run-android ``` or ```bash npx react-native run-ios ``` This will start the development server and launch the application on a physical device or emulator. **Understanding the `App.js` file** The `App.js` file is the main component of our application. It's where we define the user interface and behavior of our application. Let's take a look at the default code: ```jsx import React from 'react'; import { SafeAreaView, StyleSheet, Text } from 'react-native'; const App = () => { return ( <SafeAreaView style={styles.container}> <Text>Welcome to my Awesome App</Text> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, }); export default App; ``` Here's a brief explanation of the code: * We import `React` and some components from `react-native`. * We define a functional component called `App`. * We return a `SafeAreaView` component with a style and a `Text` component. * We define a styles object using `StyleSheet.create()`. * We export the `App` component as the default export. **Adding a button component** Let's add a button component to our application. We'll use the `Button` component from `react-native`. Here's the updated code: ```jsx import React from 'react'; import { SafeAreaView, StyleSheet, Text, Button } from 'react-native'; const App = () => { const handlePress = () => { console.log('Button pressed!'); }; return ( <SafeAreaView style={styles.container}> <Text>Welcome to my Awesome App</Text> <Button title="Press me" onPress={handlePress} /> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, }); export default App; ``` Here's what we added: * We imported the `Button` component from `react-native`. * We defined a `handlePress` function that logs a message to the console. * We added a `Button` component with a title and an `onPress` event handler. **Conclusion** In this topic, we created our first React Native application from scratch. We explored the project structure, ran the application, and added a button component. We covered some key concepts, including: * Creating a new React Native project using the React Native CLI * Understanding the project structure * Running the application * Defining a functional component * Using components from `react-native` **What's next?** In the next topic, we'll dive into the core components of React Native, including `View`, `Text`, `Image`, and `ScrollView`. **External resources** * React Native documentation: [https://reactnative.dev/docs](https://reactnative.dev/docs) * React Native CLI documentation: [https://github.com/react-native-community/cli](https://github.com/react-native-community/cli) **Leave a comment or ask for help** If you have any questions or need help with this topic, please leave a comment below.