Creating your first React Native project
Receive new React tutorials.
After introducing React Native and seeing all the required prerequisites for creating a mobile application with React Native, let's now see how to create our first project from scratch.
Open a new terminal and run the following code to invoke the React Native CLI using the
$ npx react-native init firstapp
Note: Before continuing, you should, by now, have started your Android emulator or connected a real device to your machine.
Next, start the Metro Bundler using the following commands:
$ cd firstapp $ react-native start
You need to leave Metro running. So open a new terminal and run the following commands to compile and launch your application in the Android emulator:
$ cd firstapp $ react-native run-android
run-android command will compile and install the app in Android.
Note: If you are under a macOS and you want to install the app in an iOS emulator or real device, you need to use the
react-native run-ioscommand instead.
You need to wait for your app to be built. You’ll finally get the BUILD SUCCESSFUL message in your terminal and your app should be opened in the emulator or a real device if attached.
This is a screenshot:
This is a screenshot of our app running inside an Android emulator:
As, we previously mentioned, if you have Android SDK Platform Tools v29, you may get adb: error: cannot bind listener: Operation not permitted. In this case, you need to downgrade to v28. Refer the previous Testing on Android and Ubuntu 19.04 section.
Opening your project in Visual Studio Code
After running your app inside the Android emulator. Run the following command to open the project in Visual Studio Code from your project’s folder:
$ code .
The anatomy of a React Native project
In the left panel, we can see the structure of our project. It includes the typical folders and configuration files for a Node.js project such as the
package-lock.json files and the
node_modules folder. We have also other configuration files such as:
app.json: configures parts of our app that don’t belong in code. See this article.
watchman.config: The configuration file for Watchman, a file watch service,
.buckconfig: The configuration file for Buck, a build system created by Facebook,
.gitattributes: ignores all files in version control that should be unique to each development machine
We have the following folders:
android: The folder for the Android project,
ios: The folder for the iOS project,
__tests__: The folder for tests.
App.js: The main component in our React Native app,
index.js: The main file of our application where the components are registered.
In this part, we have created our first React Native project using the React Native CLI via the
npx command. We have also deployed our mobile application to our Android emulator. Finally, we have opened our project with Visual Studio Code and explained the basic anatomy of a React Native project.
Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.
You can reach the author via Twitter:Follow @ahmedbouchefra
About the author
Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.
Read our other tutorials
- Angular Tutorial
- Laravel 6 Tutorial
- React Tutorial
- React Hooks Tutorial
- React Native Tutorial
- Webpack Tutorial
- PHP Tutorial
- Django Tutorial
- Java Spring Tutorial
- Rails 6 Tutorial
- Ionic 4 Tutorial
- TypeScript Tutorial
- Bootstrap 4 Tutorial
- Electron Tutorial
- Cordova Tutorial
- HTML Tutorial
- GraphQL Tutorial
- CSS Grid Layout Tutorial
- PWA Tutorial