Cara Install React Native + Full Setup [2024]

Summary

This instructional video script guides viewers through the process of installing React Native for app development. It covers the initial setup, including the installation of Node.js, JDK, and the React Native CLI using Chocolatey, a package manager. The script proceeds to explain the installation of Android Studio, emphasizing the SDK and emulator setup. It also touches on configuring environment variables and installing essential tools like Windows Terminal, Git, GitHub, and Visual Studio Code with various extensions to enhance coding efficiency. The tutorial concludes with creating a new React Native project and running it on an Android emulator, providing a comprehensive start-to-end guide for beginners in mobile app development.

Takeaways

• 😀 Install React Native by visiting reactnative.dev and following the 'Get Started' guide.
• 🔧 Install Node.js and JDK as prerequisites using a package manager like Chocolatey for easier setup.
• 📥 Download and install Chocolatey by running commands in PowerShell as an administrator.
• 💻 Use Chocolatey to install Node.js LTS and Microsoft Open JDK 17 with simple command line instructions.
• 📱 Install Android Studio to access the SDK and emulator, which are necessary for Android app development.
• 🛠️ Configure environment variables for Android development by setting 'ANDROID_HOME' to the Android SDK path.
• 📝 Install Windows Terminal for an enhanced command line experience with better features and customization.
• 🔄 Download and install Git and GitHub Desktop for version control and collaboration.
• 💡 Install Visual Studio Code, a popular code editor, and configure it with necessary extensions for development.
• 🎨 Install themes, icons, and formatting extensions in Visual Studio Code to improve the coding experience.
• 🚀 Create a new React Native project using the 'npx react-native init' command in the command prompt.

Q & A

What is the first step in learning how to install React Native?

The first step is to search for 'React Native' on Google and visit the official website at reactnative.dev.

Which section on the React Native website should you click to start the installation process?

You should click on the 'Get Started' section and then select 'React Native CLI Quickstart'.

What are the prerequisites for installing React Native?

The prerequisites include installing Node.js, JDK, and a package manager like Chocolatey.

Why is Chocolatey recommended for installing Node.js and JDK?

Chocolatey simplifies the installation process by allowing you to install software with a single command in the Command Prompt, eliminating the need for manual downloads and installations.

How do you install Chocolatey on Windows?

You can install Chocolatey by opening PowerShell as an administrator, pasting the installation command provided by the Chocolatey website, and pressing Enter.

What is the purpose of installing Android Studio?

While not necessary for all React Native development, Android Studio is used to access the Android SDK and emulator, which are needed for testing Android apps.

How do you download and install Android Studio?

Visit the Android Studio download page, select the appropriate version, and follow the installation prompts. After installation, you can download additional components like the SDK Platform and Build Tools through the SDK Manager.

Why is it important to set environment variables for Android development?

Setting environment variables like 'ANDROID_HOME' helps the system recognize the location of the Android SDK, which is necessary for running Android-related commands and tools.

What is the benefit of using Windows Terminal over the traditional Command Prompt?

Windows Terminal offers a more modern interface, better support for multiple tabs, and improved text rendering, making it a more user-friendly option for developers.

How do you install Git and GitHub Desktop?

Download the Git installer from the official website, run the installer, and follow the prompts. For GitHub Desktop, download the installer and run it to complete the installation.

Why is Visual Studio Code recommended for React Native development?

Visual Studio Code is a popular and versatile code editor developed by Microsoft, offering extensive support for React Native through extensions and a user-friendly interface.

What are some useful extensions for Visual Studio Code in React Native development?

Some useful extensions include Atom One Dark theme, Material Icon Theme, Prettier for code formatting, Color Highlight, ES7 React/Redux/GraphQL snippets, and React Native Tools.

How do you create a new React Native project?

Open the Command Prompt, navigate to the desired directory, and run the command 'npx react-native init <ProjectName>' to create a new project.

What is the role of the Android Virtual Device Manager in testing React Native apps?

The Android Virtual Device Manager in Android Studio is used to create and manage emulators for testing Android apps, which is essential for React Native app development targeting Android devices.