Getting Started With React Native

Introduction

In the fast-growing world of mobile app development, the demand for the cross-platform solution has been increasing day by day. Organisations are constantly looking for efficient ways to reach a wider number of audiences without compromising the user experience. In this blog we will be knowing about React Native in brief.

What is React Native?

React Native is a popular open source i.e. free to use for public library developed by Facebook. It allows developers to create mobile apps using JavaScript and React. The ability to enable truly native apps for both iOS and Android platforms from a single code base makes it stand out. This not only help save resources and time but also ensures a high-quality user experience across different devices.

Advantages

Cost-Effective: Since it utilizes single code base to develop apps for multiple platforms, development costs are significantly reduced. This feature makes it an attractive choice for startups and businesses looking to minimize their cost.
Community Support: Being open source it has a large community. This network support reduces the problem-solving time.
Cross-platform Support: The main advantage of React Native is its ability to support cross-platform development from a single code base i.e. it allows you to create app for iOS and Android platform from single code base.
Hot Reloading: It allows developers to see the result of their code immediately without losing the current state of the app. This enhances the development speed and makes debugging easier.

Setting up Development Environment

Before you start working with React Native you need to setup your development environment. It requires Node and npm (Node Package Manager). Additionally, we will be installing Expo (a set of tool and services that makes the development easier).

// Install Nodejs and NPM --- Linux command
sudo apt install nodejs

// Check Nodejs version
node -v   or   node --version

# Install Expo CLI globally
npm install -g expo-cli

Creating First React Native Project

Now that our environment setup is done, let’s create our very first React Native project using Expo. Follow the commands below to create:

// Create a new React Native project
expo init MyReactNativeApp
cd MyReactNativeApp

// Start the development server
expo start

Project Structure

React Native has similar directory structure that we have for any web application. The important directories are:

assets: The assets folder contains all the images, fonts and other statics assets required for the application. It basically contains public resources.
components: The components folder will contain all the reusable components that you will be creating.
screens: It will be having all the screens that will be displayed into the app. It basically contains main application screens.
node_modules: This folder contains all the dependencies that is installed via npm (Node Package Manager).
app.js: This is the main file in the application as it is the entry point of your application.

Conclusion

Getting started with React Native can be an exciting journey if you are already familiar with the React. This blog has provided you with the basics of React native, setting up development environments, creating first project and understanding the directory structure. Keep Exploring Keep Learning!

For more such blogs and updates follow Front-end Competency.

Follow NashTech Blogs for more amazing blogs.