Setting Up React Native on Your PC and Creating a Simple "Hello World" App

React Native is a popular framework for building mobile applications using JavaScript and React. This blog will guide you through setting up React Native on your PC from scratch and creating a simple "Hello World" app. We will cover every command you need to start React Native development and explain the file structure for beginners.

Prerequisites

Before we begin, ensure you have the following installed on your PC:

Node.js: Download and install from nodejs.org.
npm (Node Package Manager): This comes with Node.js.
Visual Studio Code: A code editor, which you can download from code.visualstudio.com.

Step 1: Install React Native CLI

First, we need to install the React Native CLI globally on your system. Open your terminal or command prompt and run the following command:

npm install -g react-native-cli

Step 2: Set Up the Development Environment

For React Native development, you need to set up the environment for either Android or iOS. Here, we will focus on setting up for Android.

Install Android Studio:
- Download and install Android Studio from developer.android.com/studio.
- During installation, ensure you install the Android SDK, Android SDK Platform, and Android Virtual Device.

Set Up Android Environment Variables:

Open the terminal and run the following commands to set up the environment variables:

  export ANDROID_HOME=$HOME/Library/Android/sdk
  export PATH=$PATH:$ANDROID_HOME/emulator
  export PATH=$PATH:$ANDROID_HOME/tools
  export PATH=$PATH:$ANDROID_HOME/tools/bin
  export PATH=$PATH:$ANDROID_HOME/platform-tools

Create a Virtual Device:
- Open Android Studio.
- Go to "AVD Manager" and create a new virtual device.

Step 3: Create a New React Native Project

Now, let's create a new React Native project. Run the following command in your terminal:

npx react-native init HelloWorldApp

This command creates a new directory called HelloWorldApp with the necessary files and folders.

Step 4: Understanding the File Structure

Here’s a brief overview of the file structure created by React Native:

node_modules/: Contains all the dependencies and modules required for the project.
android/: Contains the Android-specific code and configuration.
ios/: Contains the iOS-specific code and configuration.
App.js: The main entry point for your React Native application.
index.js: The entry point for the application, responsible for registering the main component.
package.json: Lists the project dependencies and scripts.
babel.config.js: Configuration file for Babel, a JavaScript compiler.
metro.config.js: Configuration file for Metro, the JavaScript bundler for React Native.

Step 5: Running the App

To run the app on an Android emulator, follow these steps:

Start the Metro Bundler:
- Navigate to your project directory:
```
  cd HelloWorldApp
```
- Start the Metro Bundler:
```
  npx react-native start
```
Run the App:
- Open a new terminal window and navigate to your project directory.
- Run the following command to start the app on the Android emulator:
```
  npx react-native run-android
```

If everything is set up correctly, you should see the default React Native welcome screen on your emulator.

Step 6: Creating a Simple "Hello World" App

Now, let's modify the App.js file to display "Hello World". Open App.js in your code editor and replace its contents with the following code:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default App;

Step 7: Running the "Hello World" App

Save the changes and run the app again using the following command:

npx react-native run-android

You should now see "Hello World" displayed on your emulator screen.

Conclusion

Congratulations! You have successfully set up React Native on your PC and created a simple "Hello World" app. This is just the beginning of your React Native journey. As you continue to explore, you'll discover the powerful features and capabilities that React Native offers for building mobile applications.

Happy coding!