React Native App Creation Step By Step Using Expo CLI Or React Native CLI
React Native is an open-source platform that businesses have been using since 2015 to design & develop mobile applications. According to the Stack Overflow Developer Survey 2020, nearly 58% of respondents are inclined towards React Native for cross-channel app creation. By now, we talked about the benefits of React native as a distinctive framework for native application development. Now, we will guide you about React native app creation step by step, right from environment setup to installation of required software & supporting libraries.
Learning something new is always enticing; however, some of you might not be interested in diving into the details when it comes to gaining technical knowledge.
You need not worry; it won’t be sluggish learning; rather, you will be amazed to know about different stages that will lead to your planned React Native App. Even if you are not developing your React Native app on your own, this article will add a lot to your knowledge & strengthen your technical understanding of mobile app development for all of your users across the web.
Step 1: Getting started with React Native
To start with React Native, you can count on any OSs, namely Windows, Linux, or Mac OS. macOS has both Android and iOS environments, whereas Windows & Linux support Android environments only. Two ways of getting started with React Native are:
Installation of Expo CLI:
For novel learners & developers, Expo CLI is best to get started with. It has all the relevant tools with the latest version of Node.js to start with app development. Moreover, a phone or emulator is enough to get you going. Get Node 12 LTS or later on your device to deploy this method. To install Expo CLI command-line utility:
|Npm install ‑g expo-cli|
Installation of React Native CLI:
When you are planning to design some complex architectured mobile app, it’s better to count on React Native CLI. You can install React Native CLI on any of the operating systems of your choice.
- For macOS: You need to install Node, the React Native CLI, a JDK, Android Studio/XCode. Initially, you can install Node and Watchman from Homebrew in the terminal. Make sure that the version of Node is 8.r or above. Here, the utility of Watchman is to keep an eye on the changes in the filesystem.
- For Windows: Follow the sequence of installing Node, React’s CLI, Python, a JDK, and Android Studio. There ain’t any specification for the editor; you can choose IDE as per your convenience. To avoid unexpected issues, check for the current & stable version of CLI by putting the command npx react-native <command>.
Step 2: Installation of Xcode
Those of you using MacOS for the React Native App Creation will be installing XCode via App Store. Make sure that you download the latest version of XCode, or keep it up-to-date, to avoid any compatibility issues. Install command-line tools from preferences under the location panel & iOS emulator. You need to install CocoaPods, which can be done by:
|sudo gem install cocoapods|
Step 3: Installation of Android Studio
Moving further, download Android Studio to install. Select custom mode of installation & count on all necessary checkboxes, including Android SDK, Android SDK platform, Android virtual platform. If those boxes are greyed out, you have the choice to select & install those components later. Don’t forget to set up an emulator for your Android app development. You can explore supporting libraries and software on the official website of React Native & download the ones required as per the technological upgrades.
Step 4: Installation of IDEs
You can select the IDEs/code editors of your choice like Atom, Nuclide, IntelliJ, Visual Code Studio, Sublime Text Editor, etc. You can use any of these to edit the source code for the development of your mobile app. If you have any confusion, it’s better to compare them and go with the option that seems handier to you.
Step 5: Creation of React native app
Using Expo CLI
Start a new project using Expo CLI, let’s say you name it ‘Test Project’.
|Expo init TestProject
Once you initiate the development server, run Expo client app by connecting both of them via the same wireless network. You can use QR code to do the same & launch your app on the virtual device using USB. To launch your app on a real/virtual device on Android use the command, npm run android & for doing the same on an iOS simulator run the command npm run ios.
Using React Native CLI
Start a new project using React Native CLI, let’s say you name it ‘Test Project’.
|Npx react-native init TestProject
npm react-native start
Above command will initiate Metro Bundler development server. After the setup of Android Studio/Xcode, you can launch your React Native app on a real/virtual Android device using npm react-native run-android & for MacOS users npm react-native run-ios. This will bring your mobile app on the device & make it easier for you to develop & test.
Step 6: React Native Project Structure
Now that you have your TestProject ready, it’s important to understand the project architecture of your React Native app.
Above mentioned ones are all the directory files of your mobile app. These smaller modules have all the information grouped distinctly as per their utility & application. Like package.json has all updates & versions of your app grouped, node_modules directory is initialized & have dependencies installed required to set up your app on the device.
The more you learn in detail, the more familiar you will get with React Native platform & frameworks working environment.
We hope that this article has helped you understand React Native app creation step by step & understand the different stages of development of your mobile app. The demand for cross-platform solutions wants every business to be everywhere. Now, if you have decided about getting one for your business, discuss with us at [email protected].