**Course Title:** Building Mobile Applications with React Native **Section Title:** Introduction to React Native and Setup **Topic:** Set up the development environment and create a basic Hello World app using React Native.(Lab topic) ### Objective By the end of this lab, you will be able to set up a development environment for React Native and create a basic "Hello World" app using React Native. ### Prerequisites Before starting this lab, ensure that you have: * A basic understanding of JavaScript and React concepts * A computer with a compatible operating system (Windows, macOS, or Linux) * A code editor or IDE of your choice (e.g., Visual Studio Code) ### Setting up the Development Environment #### Step 1: Install Node.js Before installing React Native, make sure you have Node.js (version 14 or higher) installed on your system. You can download the latest version of Node.js from the official Node.js website: <https://nodejs.org/en/download/> #### Step 2: Install React Native CLI Once you have Node.js installed, install the React Native CLI using npm or yarn: ```bash npm install -g react-native-cli ``` or ```bash yarn global add react-native-cli ``` Verify that the React Native CLI has been installed successfully by running: ```bash npx react-native --version ``` #### Step 3: Install Expo Expo is a framework that simplifies the development process for React Native applications. Install Expo using npm or yarn: ```bash npm install -g expo-cli ``` or ```bash yarn global add expo-cli ``` Verify that Expo has been installed successfully by running: ```bash expo --version ``` ### Creating a Basic Hello World App #### Step 1: Create a new React Native project Using the React Native CLI, create a new React Native project: ```bash npx react-native init HelloWorld ``` This command will create a new React Native project called "HelloWorld" using the latest template. #### Step 2: Move into the project directory Change into the project directory: ```bash cd HelloWorld ``` #### Step 3: Install dependencies Install the required dependencies using npm or yarn: ```bash npm install ``` or ```bash yarn ``` #### Step 4: Start the development server Start the development server using the following command: ```bash npx react-native start ``` This command will start the development server and provide you with a QR code to use with the Expo app. #### Step 5: Run the app on a physical device or emulator Using the Expo app, scan the QR code provided by the development server to run the app on a physical device or emulator. ### Open the `App.js` file In your code editor or IDE, open the `App.js` file in the project directory. This file contains the main application code. ```jsx import React from 'react'; import { View, Text } from 'react-native'; const App = () => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Hello, world!</Text> </View> ); }; export default App; ``` ### Explanation * The `App.js` file is the entry point of the React Native application. * We import React and React Native components, such as `View` and `Text`. * We create a new React component named `App` using the `const` keyword. * We return a JSX element inside the `App` component, which is a `View` element that contains a `Text` element displaying the text "Hello, world!". * We use styles to position the text in the center of the screen. ### Conclusion In this lab, you have successfully set up a development environment for React Native and created a basic "Hello World" app using React Native. You have learned how to install Node.js, React Native CLI, and Expo, and how to create a new React Native project. You have also learned how to write JSX code and use styles in React Native. ### What's Next? In the next topic, we will cover 'Understanding core components (View, Text, Image, ScrollView)' from the 'Core Components and Styling' section. If you have any questions or need further clarification on any of the concepts covered in this lab, feel free to ask for help in the comments section below.