The easiest way to setup and run React-Native on your machine is with Expo Cli. Expo is a framework built on React-Native and, while it has alot of features, the feature relevant to us right now is that it can get you writing and running React-Native app within minutes.
REQUIREMENTS
- A recent version of Node.js.
- An iOS/Android device (emulator or physical phone).
Then open your command line / bash, use npm to install the Expo CLI command line utility:
npm install -g expo-cli
Then run this command to create a new React Native project called "FirstProject":
expo init FirstProject
go into th folder:
cd AwesomeProject
run npm start # you can also use: expo start to start the development server.
RUNNING REACT NATIVE APP ON A PHYSICAL DEVICE
- Donwload and Install the expo client on your iOS or Android phone, you can get it from the Google Play Store or Apple App Store.
- Connect your phone to the same wireless network as your computer.
- Android Users, use the Expo app to scan the QR code from your terminal to open your project.
- iOS Users, use the built-in QR code scanner of the Camera app.
RUNNING REACT NATIVE APP ON AN EMULATOR / VIRTUAL DEVICE
WINDOWS 10/11
- Download and install Chocolately .
React Native also requires Java SE Development Kit (JDK), which can be installed using Chocolatey as well.
Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the command:
choco install -y nodejs.install openjdk8
- Download and install Android Studio. During installation of the Android Studio make sure the boxes next to all of the following items are checked:
~ Android SDK
~ Android SDK Platform
~ Android Virtual Device
Then, click "Next" to install all of these components.
If the checkboxes are grayed out, you will have a chance to install these components later on.
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
- 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. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
To do that, open Android Studio, click on "Configure" button and select "SDK MANAGER".
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. 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
~ Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 29.0.2 is selected.
Finally, click "Apply" to download and install the Android SDK and related build tools.
- Configure the ANDROID_HOME environment variable
The React Native tools require some environment variables to be set up in order to build apps with native code.
~ Open the Windows Control Panel.
~ Click on User Accounts, then click User Accounts again
~ Click on Change my environment variables
~ Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK.
The default location for this folder is:
C:\Users\currentusername\AppData\Local\Android\Sdk
But You can confirm/find the actual location of the SDK in the Android Studio "Settings" dialog, under Appearance & Behavior → System Settings → Android SDK.
Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.
Open powershell
Copy and paste Get-ChildItem -Path Env:\ into powershell
Verify ANDROID_HOME has been added
- Add platform-tools to Path
~ Open the Windows Control Panel.
~ Click on User Accounts, then click User Accounts again
~ Click on Change my environment variables
~ Select the Path variable.
~ Click Edit.
~ Click New and add the path to platform-tools to the list.
The defualt location for this folder is: C:\Users\currentusername\AppData\Local\Android\Sdk\plartform-tools
Once you've set these up, you can launch your app on an Android Virtual Device by running npm run android, or on the iOS Simulator by running npm run ios (macOS only), please make sure your virtual device is switched on.
Now that you have successfully run the app, let's modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.
CONCLUSION
We have successfully setup our environment to run React-Native using the Expo Cli. Before proceeding to learn how to use React-Native to develop cross-plartform applications, having a basic knowledge of react will give you a headstart and make React-Native concepts Easier to grab/understand, having said that, here are links to a React for beginners series by that introduces you to React while building a Todo application:
please follow through the way they are ordered
1 - Introduction
2 - Working with React Form and Handling Event
3 - How to add CSS in Reactjs App
4 - How to Edit Todos Items in a React Application
5 - How to persist state of your React component in local storage
6 - Getting Started With the React lifecycle methods
7 - React Hooks: The Practical Guide for Beginners
8 - How to use SVG Icons in your React Project
9 - How to Handle Routing in a React Application using the React Router library
10 - How to implement Hamburger Menu in React
11 - How to Deploy React App to GitHub Pages
And That's it!
Congratulations! You've successfully run and modified your First React Native app. And after going through the 11 links to 11 artices above, you can confidently open a react native course!.