Key Things React Native Developers Should Know to Start Developing an Application

Published in

Mindful Engineering

4 min readApr 7, 2022

React Native Beginning image — By MindInventory

What is React Native?

React native is a trending open-source framework created by meta platforms (Facebook) in 2015, which allows us to create cross-platform mobile applications using Javascript.

React Native is designed for building a mobile application on various platforms like iOS, Android, and also web applications. Many platforms and companies are using react-native (Facebook, Instagram, Skype, Flipkart, Pinterest, Walmart, Uber Eats, etc…).

Prerequisites

Before you start learning to react native, you must have basic knowledge of JavaScript, HTML, and CSS.

If you have worked with React.js before, you already have more than enough knowledge to start React Native.

React Native Environment Setup

You can create React Native project by using the following ways.

Development Tools

Xcode and Android studio (If React Native CLI).
Code Editor (Visual Studio Code, Webstorm, Atom, etc…).

How Does React Native Work?

As we have mentioned above, React Native creates a cross-platform application. So React Native used thread architecture for code compiling. React Native has three threads.

UI thread (often called main)
JavaScript thread
Background thread

Key Concepts Of React Native

Before starting work with React Native, we need to learn some key(core) concepts of React Native. Because key(core) concepts are used for creating and building react native apps. We will cover the following key(core) concepts of React Native in this topic.

These all are the main key(core) concepts of React Native. All these concepts are widely used to develop React Native apps.

JSX

JSX stands for JavaScript XML. JSX allows us to write HTML elements in JavaScript. Using JSX you can write abridged HTML/XML in the same file as you write JavaScript code.

JSX looks like the below.

let element = <Text>Hello World</Text>;

Style

We can style our application using JavaScript. All the core components accept a prop named style , The style prop will be a plain JavaScript object. We can also pass an array of styles to style for applying multiple style objects. We can use StyleSheet.create to define several styles in one place.

The style’s names and values look like CSS, except names are written using camel casing, e.g. backgroundColor rather than background-color.

Component

A Component is considered to be the core building block of the React Native application. We can split the UI into separate pieces that can be reused and handled independently. Every React component has its own structure, methods as well as APIs. They can be reused as per your need. A React component takes an optional input and returns a React element which is rendered on the screen.

React Native has mainly two types of components.

State

The state is a plain JavaScript object that is used to represent information about the component’s current situation. Also, we can call state as an instance of React Component Class can be defined as an object of a set of observable properties that control the behavior of the component. The state can hold information about components, that may change over the lifetime of the component.

Let's see an example of a state.

In this example, we learn how can state initialize and update in class and functional components.

Class Component

Functional Component

Props

Props stand for Properties. Props are basically used to pass data from one component to another component. Props are read-only components. A prop is an object which stores the value of attributes of a tag and works similarly to the HTML attributes. Props can be passed in a uni-directional flow. (one way from parent to child). Props are immutable so we cannot modify the props from inside the component.

Let's see an example of Props.

In this example, we learn how can pass props from one component to another component.

Class Component

Functional Component

Navigation

React Navigation is responsible for managing the presentation, and transition between multiple screens. If you want to implement navigation, we need to install a separate library React Navigation.

React Navigation basically provides three types of navigation.

Networking (API calling)

Networking is used to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server. Javascript is providing the default fetch method for a network request.

You can also use Axios external package for network requests.

Let's see an example of Networking.

Conclusion

In this article, we have tried to cover the basic concepts of React Native. Above mentioned all concepts are fundamentals of React Native, all concepts are often used while you are creating or building a mobile application with react-native. We hope after reading this article you will be able to work with React Native.