Section 1: Installing Node.js and npm

  1. Open a web browser and go to the official Node.js website: https://nodejs.org
  2. On the Node.js website, you will see two versions available for download: LTS (Long-Term Support) and Current. It is recommended to download the LTS version for stable and reliable development.
  3. Click on the “LTS” button to download the LTS version of Node.js. The website should automatically detect your operating system as Windows and provide the appropriate installer.
  4. Once the installer is downloaded, locate the downloaded file (usually in the Downloads folder) and double-click on it to start the installation.
  5. The Node.js setup wizard will open. Click “Next” to proceed.
  6. Read and accept the license agreement, then click “Next”.
  7. Choose the installation location for Node.js or leave the default location as is. Click “Next”.
  8. Select the components to install. It is recommended to keep the default selections, which include Node.js runtime and npm package manager. Click “Next”.
  9. Choose the additional tasks you want the installer to perform. It is recommended to keep the default options selected. Click “Next”.
  10. Finally, click the “Install” button to start the installation process.
  11. The installer will now install Node.js and npm on your Windows machine. This may take a few moments.
  12. Once the installation is complete, click the “Finish” button.
  13. To verify the installation, open a Command Prompt or PowerShell window and type the following command:

This command will display the version of Node.js installed on your system. Additionally, you can run the following command to check the version of npm:

If both commands display the version numbers without any errors, it means Node.js and npm are successfully installed on your Windows machine.

Section 2: Setting up the Java Development Kit (JDK)

  1. Visit the Oracle website: https://www.oracle.com/java/technologies/javase-jdk11-downloads.html
  2. On the Java SE Development Kit 11 Downloads page, scroll down to find the section labeled “Java SE Development Kit 11”. Choose the appropriate installer based on your Windows architecture (32-bit or 64-bit). Click the download link to initiate the download.
  3. Once the installer is downloaded, locate the downloaded file (usually in the Downloads folder) and double-click on it to start the installation.
  4. The JDK installer will open. Click “Next” to proceed.
  5. Read and accept the license agreement, then click “Next.”
  6. Choose the installation location for the JDK or leave the default location as is. Click “Next”.
  7. On the “Choose Install Features” screen, you can select the features you want to install. It is recommended to keep the default selections, which include the Development Tools and the Public JRE. Click “Next”.
  8. On the “Choose Install Location” screen, you can specify the location where the JDK files will be installed. It is recommended to keep the default location or choose a preferred location. Click “Next”.
  9. The installer will now start installing the JDK. This process may take a few moments.
  10. Once the installation is complete, you will see a confirmation screen. Click “Close” to exit the installer.
  11. To verify the JDK installation, open a Command Prompt or PowerShell window and type the following command:

This command will display the installed JDK version. Additionally, you can run the following command to check the version of the Java Compiler:

If both commands display the version numbers without any errors, it means the JDK is successfully installed on your Windows machine.

Section 3: Installing Android Studio and Android SDK

  1. Visit the official Android Studio website: https://developer.android.com/studio
  2. Click on the “Download Android Studio” button to start the download.
  3. Once the download is complete, locate the downloaded file and double-click on it to begin the installation process.
  4. The Android Studio Setup wizard will open. Click “Next” to proceed.
  5. Read and accept the terms and conditions, then click “Next”.
  6. Choose the installation type. It is recommended to select the “Standard” installation, which includes the Android SDK and other necessary components. Click “Next”.
  7. Select the installation location or keep the default location, then click “Next”.
  8. Choose the start menu folder for Android Studio or keep the default name, then click “Install”.
  9. The installation process will begin, and it may take some time to complete.
  10. Once the installation is finished, click “Next” and then “Finish” to exit the setup wizard.
  11. After the installation, launch Android Studio. It will prompt you to select the UI theme and suggest downloading additional components. Choose the desired options and click “Next”.
  12. Android Studio will then download and install the necessary components, including the Android SDK. This process may take some time, depending on your internet speed.
  13. Once the installation and setup are complete, you will see the Android Studio welcome screen.
  14. To verify that the Android SDK is installed correctly, click on the “Configure” button at the bottom right corner of the welcome screen, and then select “SDK Manager”.
  15. The SDK Manager window will open, showing the installed SDK components. Ensure that the necessary Android SDK versions and tools are installed. If any components are missing, select them and click the “Apply” or “Install” button to download and install them.

Section 4: Configuring the Android Device Emulator

  1. Open Android Studio on your Windows machine.
  2. From the Android Studio welcome screen, click on “Configure” and select “AVD Manager”.
  3. The Android Virtual Device (AVD) Manager will open, displaying a list of existing virtual devices (if any).
  4. Click on the “Create Virtual Device” button to create a new virtual device.
  5. In the “Select Hardware” screen, choose a device definition that matches your desired virtual device specifications. You can select from various device types, such as Pixel, Nexus, or other popular Android devices. Click “Next”.
  6. In the “System Image” screen, select the desired Android version for the virtual device. Choose the recommended or latest version, and click “Next”.
  7. On the “Verify Configuration” screen, you can customize additional settings for the virtual device, such as the device name, screen orientation, and more. Modify the settings according to your preferences, and click “Finish”.
  8. The AVD Manager will now create the virtual device based on your selections. This process may take a few minutes, as it downloads the necessary system image if it’s not already installed.
  9. Once the virtual device is created, you will see it listed in the AVD Manager with its name and specifications.
  10. To launch the Android Emulator, click on the “Play” button (green triangle icon) next to the virtual device in the AVD Manager.
  11. The Android Emulator will start, and you will see the Android device booting up with the selected Android version.
  12. Once the Android Emulator is fully loaded, you can interact with it just like a physical Android device.

Section 5: Installing React Native CLI and Creating a New Project

  1. Open a Command Prompt or Terminal window on your Windows machine.
  2. Install the React Native CLI globally by running the following command:

This command will download and install the React Native CLI package globally on your system.

3. Once the installation is complete, you can verify the installation by running the following command:

This command will display the installed version of the React Native CLI.

4. Now, navigate to the directory where you want to create your new React Native project using the cd command. For example:

Replace path/to/project-directory with the actual path to your desired project directory.

5. Once you are in the desired directory, create a new React Native project by running the following command:

Replace YourProjectName with the desired name for your project. This command will create a new React Native project with the specified name in the current directory.

6. The project creation process may take a few minutes, as it downloads and sets up the necessary project files and dependencies.

7. Once the project creation is complete, navigate into the project directory using the cd command:

Replace YourProjectName with the actual name of your project.

Section 6: Running the React Native App on the Emulator

  1. Make sure you have set up the Android emulator based on your development environment.
  2. Open a Command Prompt or Terminal window and navigate to the root directory of your React Native project.
  3. Run the following command to start the Metro Bundler, which bundles your app’s JavaScript code:

Keep the Metro Bundler running in the background.

4. For Android:

  • Open a new Command Prompt or Terminal window (while keeping the Metro Bundler window open) and navigate to the root directory of your React Native project.
  • Run the following command to install and launch your app on the Android emulator:
  • The React Native packager will build the app and install it on the running Android emulator. You will see the app running on the emulator.

5. If all goes well, your React Native app will be launched on the emulator, and you can interact with it just like a real device.

Section 7: Set up an editor for React Native development

Setting up Visual Studio Code (VS Code):

  1. Download and install Visual Studio Code from the official website: https://code.visualstudio.com/
  2. Launch VS Code and open the Extensions sidebar by clicking the square icon on the left sidebar or by pressing Ctrl + Shift + X.
  3. Search for and install the following extensions:
  • “React Native Tools” by Microsoft: This extension provides useful features for React Native development, such as IntelliSense, debugging support, and more.
  • “ESLint” by Dirk Baeumer: This extension helps with code linting and formatting to ensure clean and consistent code.

4. Once the extensions are installed, you can customize the editor settings to suit your preferences. You can access the settings by clicking on the gear icon in the lower left corner or by pressing Ctrl + ,.

5. Additionally, it is recommended to install the “Prettier — Code formatter” extension by Prettier for code formatting.

Congratulations! You have successfully done with your React Native development setup. You can now make changes to your code and see them reflected in real-time on the emulator as you continue to develop your app.

Categories: React Native Tags: #React Native, #iOS, #Android, #Mobile App Development,

Comments