React Native App Cre­ation Step By Step Using Expo CLI Or React Native CLI

19 Apr 2021

React Native is an open-source plat­form that busi­ness­es have been using since 2015 to design & devel­op mobile appli­ca­tions. Accord­ing to the Stack Over­flow Devel­op­er Sur­vey 2020, near­ly 58% of respon­dents are inclined towards React Native for cross-chan­nel app cre­ation. By now, we talked about the ben­e­fits of React native as a dis­tinc­tive frame­work for native appli­ca­tion devel­op­ment. Now, we will guide you about React native app cre­ation step by step, right from envi­ron­ment set­up to instal­la­tion of required soft­ware & sup­port­ing libraries.

Learn­ing some­thing new is always entic­ing; how­ev­er, some of you might not be inter­est­ed in div­ing into the details when it comes to gain­ing tech­ni­cal knowledge. 

You need not wor­ry; it won’t be slug­gish learn­ing; rather, you will be amazed to know about dif­fer­ent stages that will lead to your planned React Native App. Even if you are not devel­op­ing your React Native app on your own, this arti­cle will add a lot to your knowl­edge & strength­en your tech­ni­cal under­stand­ing of mobile app devel­op­ment for all of your users across the web. 

Step 1: Get­ting start­ed with React Native 

To start with React Native, you can count on any OSs, name­ly Win­dows, Lin­ux, or Mac OS. macOS has both Android and iOS envi­ron­ments, where­as  Win­dows & Lin­ux sup­port Android envi­ron­ments only. Two ways of get­ting start­ed with React Native are:

Instal­la­tion of Expo CLI:

For nov­el learn­ers & devel­op­ers, Expo CLI is best to get start­ed with. It has all the rel­e­vant tools with the lat­est ver­sion of Node.js to start with app devel­op­ment. More­over, a phone or emu­la­tor is enough to get you going. Get Node 12 LTS or lat­er on your device to deploy this method. To install Expo CLI com­mand-line utility:

Npm install ‑g expo-cli 

Instal­la­tion of React Native CLI

When you are plan­ning to design some com­plex archi­tec­tured mobile app, it’s bet­ter to count on React Native CLI. You can install React Native CLI on any of the oper­at­ing sys­tems of your choice. 

  • For macOS: You need to install Node, the React Native CLI, a JDK, Android Studio/XCode. Ini­tial­ly, you can install Node and Watch­man from Home­brew in the ter­mi­nal. Make sure that the ver­sion of Node is 8.r or above. Here, the util­i­ty of Watch­man is to keep an eye on the changes in the filesystem. 
  • For Win­dows: Fol­low the sequence of installing Node, React’s CLI, Python, a JDK, and Android Stu­dio. There ain’t any spec­i­fi­ca­tion for the edi­tor; you can choose IDE as per your con­ve­nience. To avoid unex­pect­ed issues, check for the cur­rent & sta­ble ver­sion of CLI by putting the com­mand npx react-native <com­mand>

Step 2: Instal­la­tion of Xcode 

Those of you using MacOS for the React Native App Cre­ation will be installing XCode via App Store. Make sure that you down­load the lat­est ver­sion of XCode, or keep it up-to-date, to avoid any com­pat­i­bil­i­ty issues. Install com­mand-line tools from pref­er­ences under the loca­tion pan­el & iOS emu­la­tor. You need to install CocoaPods, which can be done by: 

sudo gem install cocoapods 

Step 3: Instal­la­tion of Android Studio 

Mov­ing fur­ther, down­load Android Stu­dio to install. Select cus­tom mode of instal­la­tion & count on all nec­es­sary check­box­es, includ­ing Android SDK, Android SDK plat­form, Android vir­tu­al plat­form. If those box­es are greyed out, you have the choice to select & install those com­po­nents lat­er. Don’t for­get to set up an emu­la­tor for your Android app devel­op­ment. You can explore sup­port­ing libraries and soft­ware on the offi­cial web­site of React Native & down­load the ones required as per the tech­no­log­i­cal upgrades. 

Step 4: Instal­la­tion of IDEs 

You can select the IDEs/code edi­tors of your choice like Atom, Nuclide, Intel­liJ, Visu­al Code Stu­dio, Sub­lime Text Edi­tor, etc. You can use any of these to edit the source code for the devel­op­ment of your mobile app. If you have any con­fu­sion, it’s bet­ter to com­pare them and go with the option that seems hand­i­er to you. 

Step 5: Cre­ation 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
cd Test­Pro­ject
npm start 

Once you ini­ti­ate the devel­op­ment serv­er, run Expo client app by con­nect­ing both of them via the same wire­less net­work. You can use QR code to do the same & launch your app on the vir­tu­al device using USB. To launch your app on a real/virtual device on Android use the com­mand, npm run android & for doing the same on an iOS sim­u­la­tor run the com­mand 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
cd Test­Pro­ject
npm react-native start 

Above com­mand will ini­ti­ate Metro Bundler devel­op­ment serv­er. After the set­up 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 eas­i­er for you to devel­op & test.

Step 6: React Native Project Structure 

Now that you have your Test­Pro­ject ready, it’s impor­tant to under­stand the project archi­tec­ture of your React Native app. 

Above men­tioned ones are all the direc­to­ry files of your mobile app. These small­er mod­ules have all the infor­ma­tion grouped dis­tinct­ly as per their util­i­ty & appli­ca­tion. Like package.json has all updates & ver­sions of your app grouped, node_modules direc­to­ry is ini­tial­ized & have depen­den­cies installed required to set up your app on the device. 

The more you learn in detail, the more famil­iar you will get with React Native plat­form & frame­works work­ing environment.

We hope that this arti­cle has helped you under­stand React Native app cre­ation step by step & under­stand the dif­fer­ent stages of devel­op­ment of your mobile app. The demand for cross-plat­form solu­tions wants every busi­ness to be every­where. Now, if you have decid­ed about get­ting one for your busi­ness, dis­cuss with us at [email protected].

Is this artical helpful?
Share this post :