Logo
mobile app development

Build Your First App With React Native in 2023

A simple tutorial to help you build your app with React Native.

react native app development

In this article, we will be teaching the basics when it comes to React Native and also further explaining how to create your first app with React Native.

This post can be very useful for those who have only used JavaScript in their coding journey. So, fasten your seat belts and get ready to learn something new.

What is React Native?

In simple words, React Native is a JavaScript library that is used for the purpose of building and developing UI (User Interface). React Native also known as React JS is maintained by the developer’s community of Facebook.

React Native only uses JavaScript for building mobile applications but because JavaScript uses the same design as React JS. The end result gets a very rich mobile user interface from using these declarative components.

We highly encourage those to also read this React app building tutorial who do not have much experience in JavaScript as it is a brief and easy article that provides some valuable insights regarding building a React Native application. There are so many benefits of using react native for mobile app development, react native is an open-source framework that allows you to develop a mobile application.

Although it's not a mandatory step, still, we highly recommend creating a couple of sketch designs regarding your app so that you can get some sort of guidance regarding your app's aim. Creating some sketches is great as you get the rough idea of the app's flow and it also saves a lot of time. 

Install React

The first and the obvious step is to install react, here is the LINK where you can download it from. When it comes to building a React Native application, there are two ways by which it can be done:

a) you can use a toolchain to build the app

Or

b) you can move ahead without using any toolchain.

Our team of experts suggests that it is better to proceed with toolchain as it helps to smoothen out the process of app building. Let's take an example of an Expo, a toolchain that was turned into the create-react-native-app library that removes many barriers from the front-end development segment.

For today, let’s move ahead without the use of toolchain but don’t worry at the end of this article we will be sharing a few of the most popular reasons why to use React toolchains with you.

Once React is installed starting with the Folder Structure

  • Add a folder in the root and name it 'app'
  • Now move the App.js file into the root of 'app'
  • Then update the index.js import statement to 'import App from ./app/App.js'
  • At last, create folders inside 'app'

Few terms and their functions that you need to be aware of:

  • Screens: These are known to be our main views.

  • Assets: There two folders in this directory called images and animations.

  • Components: This is the location where you will put all your shared components.

  • Config: You can set up your app’s color scheme in a colors.js file to keep things managed.

Creating an App

Firstly, install it once globally:

$ npm install -g create-react-native-app

 # or

$ yarn global add create-react-native-app

You need to make sure to use Node v6 or a version after it with npm v3 or npm v4 version of Yarn. We are not asking you to use the npm v5 because of the bugs issues faced in that npm version.

Then to create an app, run:

$ create-react-native-app my-app

$ cd my-app

After running the above-mentioned line of codes, a directory will be created by the name 'my-app' inside the current working directory. This will further generate the initial structure of the project inside 'my-app' so go ahead and install all its dependencies.

If you are previous experience with React Native, you will be aware of the fact that you won't be seeing any 'android' or 'ios' directories. So once the installation is complete, some commands are to be run in the project directory by you:

1. With npm start

It will run your app in development mode with an interactive prompt and to run it without a prompt, use the '--no-interactive' flag.

If you want to view it, then open it in the Expo app on your mobile phone to view the file. And it will reload itself if you save edits to your files. With this, you can also see the build errors surfaced and log at the terminal.

2. With npm test

It runs the JEST test runner for your tests.

3. With npm run ios

It's like npm start, but this also attempts to open your app in the iOS Simulator if you're on a Mac device or have it installed.

4. With npm run android

Like npm start, this one also attempts to open your app on a connected Android device or even an emulator. But it requires an installation of Android build tools.

5. With npm run eject

It will start the process of 'ejecting from Create React Native App's build scripts. And then you'll be asked a few questions about how you'd like to build your project.

Reasons to Use React Toolchains

Here are the few of the main reasons why you should use React toolchains when building an app with React Native:

  • With toolchains, you can perform live-editing CSS and JavaScript in the development phase.
  • The React toolchains optimize the output for production.
  • By using toolchains, you can easily detect common mistakes in the early stages.
  • The react toolchains support the third-party libraries from the npm versions.
  • Toolchains further help in providing scaling to many components and files.

We hope you liked this short and quick guide on how to build an app using React Native.

Aparna <span>Growth Strategist</span>
Written By
Aparna Growth Strategist

Aparna is a growth specialist with handsful knowledge in business development. She values marketing as key a driver for sales, keeping up with the latest in the Mobile App industry. Her getting things done attitude makes her a magnet for the trickiest of tasks. In free times, which are few and far between, you can catch up with her at a game of Fussball.

Want To Hire The Best Service Provider?
MobileAppDaily will help you explore the best service providers depending on your vision, budget, project requirements and industry. Get in touch and create a list of best-suited companies for your needs.

Featured Blogs

mobile app development

Peer-to-Peer Mobile Payment Apps And Their Role In 2023

4 min read  

After witnessing the major events throughout the year, we can say that Digitalization has been the buzzword of the year. Entrepreneurs are coming forward and digitizing their businesses because that’s the need of the hour. And one of the things that are helping them achieve that aim is Peer-to

mobile app development

Which Cloud Solution Is Best For Your Web App Development in 2023?

4 min read  

Storing data can now be classified as one of the main priorities in all fields. In the last two decades, there has been an unparalleled rise in mobile as well as computer users. It doesn't matter if your business is small or large-scale, the main aim here is to thrive on data and make an accessi

mobile app development

LinkedIn Report Shows Flutters To Be The Most Preferred Skill Among Software Engineers

4 min read  

Flutter, an open-source mobile application development framework by Google and was released in 2015 at the Dart developer summit. And since then it has become a hit among app developers. Flutter is used to develop applications for Android and iOS and now with the recent announcements in Google I/O 2

mobile app development

Kotlin: New Programming Language For Android Apps Announced By Google

4 min read  

Google is continuously in news this week due to its this year's I/O conference and new announcement. Google can be considered as the pioneer of the new tech almost in every branch of technology. Every year developers and users around the globe keep crossed their fingers and excited about what ne

Featured Interviews

Interview

Interview With Coyote Jackson, Director of Product Management, PubNub

MobileAppDaily had a word with Coyote Jackson, Director of Product Management, PubNub. We spoke to him about his journey in the global Data Stream Network and real-time infrastructure-as-a-service company. Learn more about him.

MAD Team 4 min read  
Interview

Interview With Laetitia Gazel Anthoine, Founder and CEO, Connecthings

MobileAppDaily had a word with Laetitia Gazel Anthoine, Founder and CEO, Connecthings. We spoke to her about her idea behind Connecthings and thoughts about the company’s services.

MAD Team 4 min read  
Interview

Interview With Gregg Temperley, Founder Of ParcelBroker App

MobileAppDaily had a word with Gregg Temperley, Founder. We spoke to him about his idea behind such an excellent app and his whole journey during the development process.

MAD Team 4 min read  
Interview

Interview With George Deglin, CEO Of OneSignal

MobileAppDaily had a word with George Deglin, the CEO and co-founder of OneSignal, a leading customer messaging and engagement solution, we learn multiple facets related to customer engagement, personalization, and the future of mobile marketing.

MAD Team 4 min read  
MAD Originals
MAD Originals

Cut to the chase content that’s credible, insightful & actionable.

Get the latest mashup of the App Industry Exclusively Inboxed

  • PRODUCTS
  • SERVICES
  • BOTH
Join our expansive network, build connections and expand your brand presence.