React Native CLI Quickstart

--- tags: React ,React Native --- > [name=Sandy RuRu] [time=Tue, Aug 03, 2021 9:59 AM] [color=#907bf7]      ![React_icon](https://reactnative.dev/img/header_logo.svg =120x120)   # React Native CLI Quickstart You will need **Node**, the React Native command line interface, a **JDK**, and **Android Studio**. ## Installing dependencies We recommend installing Node via Chocolatey, a popular package manager for Windows. :cherry_blossom: CHOCOLATEY ![Chocolatey_icon](https://chocolatey.org/assets/images/global-shared/logo-square.svg =30x30) https://chocolatey.org/install#individual :::info :bulb: Note `Get-ExecutionPolicy`. If it returns `Restricted`, then run `Set-ExecutionPolicy AllSigned` or `Set-ExecutionPolicy Bypass -Scope Process`. ::: Now run the following command: ```=powershell Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1')) ``` :cherry_blossom: Node, JDK React Native also requires Java SE Development Kit (JDK), which can be installed using Chocolatey as well. ```=cmd choco install -y nodejs.install openjdk8 ```   ```=cmd choco install nodejs --version=12.9.0 ``` Check that you are using the correct node version ( >= 12.13.0 ): ```=cmd choco install nodejs --version=12.13.0 node --version ``` ```=cmd choco install nodejs --version=16.6.0 node --version ``` ## Android development environment :cherry_blossom: Download and install [Android Studio](https://developer.android.com/studio/index.html) :cherry_blossom: Configure the `ANDROID_HOME` environment variable ``` %LOCALAPPDATA%\Android\Sdk ``` :cherry_blossom: Open a new powershell window ```=powershell Get-ChildItem -Path Env:\ ``` Verify `ANDROID_HOME` has been added. :cherry_blossom: Add platform-tools to `Path` ``` %LOCALAPPDATA%\Android\Sdk\platform-tools ``` :cherry_blossom: Create a new AVD Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the ==Q API Level 29 image==. :cherry_blossom: Install the Android SDK Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the ==Android 10 (Q)== SDK in particular. Look for and expand the `Android 10 (Q)` entry, then make sure the following items are checked: - Android SDK Platform 29 - Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image :::info :bulb: Note If you don't have ==HAXM== installed, click on "==Install HAXM==" or follow **[these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows)** to set it up, then go back to the AVD Manager. ::: ## React Native Command Line Interface With `npx react-native <command>`, the current stable version of the CLI will be downloaded and executed at the time the command is run. ## Creating a new application :::warning :fire: Warning If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues. >`yarn global remove react-native-cli` or >`npm uninstall -g react-native-cli` > > `yarn global add @react-native-community/cli` > `yarn global add react-native-cli` ::: You can access it without installing anything globally using npx, which ships with Node.js. ```=cmd npx react-native init AwesomeProject ``` ---  If you want to start a new project with a specific React Native version ```=cmd npx react-native init AwesomeProject --version X.XX.X ``` e.g ```=cmd npx react-native init miniApp --version 0.52.2 ``` or ```=cmd npx react-native init miniApp --version 0.52.2 --template=react-native@0.52.2 ``` You can also start a project with a custom React Native template, like TypeScript. ```=cmd npx react-native init AwesomeTSProject --template react-native-template-typescript ``` ## Running your React Native application :cherry_blossom: **Step 1: Start Metro** ```=cmd npx react-native start ``` or ```=cmd yarn react-native start ``` or ```=cmd yarn start ``` `react-native start` starts Metro Bundler. :::info :bulb: Note If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project. ::: :cherry_blossom: **Step 2: Start your application** Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: ```=cmd npx react-native run-android ``` or ```=cmd yarn react-native run-android ``` or ```=cmd yarn android ``` If everything is set up correctly, you should see your new app running in your Android emulator shortly. ## Modifying your app Open `App.js` in your text editor of choice and edit some lines. Press the `R` key twice or select `Reload` from the Developer Menu (`Ctrl + M`) to see your changes! ---