7 Best Practices for Building a Large Scale React Application

Introduction to React Application

Once you have experience in web development using React, you will consider developing an app using React Native. This is what we would have known before developing an app using React Native. The best part is that if you’ve used to React for your web app development then you can proceed with the same structure.

1. Device-specific compatibility

When doing web development, you should consider browser-specific compatibility.

The cross-browsing problem is particularly difficult for developers to deal with within countries like China, Korea (Internet Explorer).

Since the OS version is different for each device, you need to consider the native API that can be applied in common. In the web, the API and CSS that can be used as the version increases, but the lower version is included in the app side.

Rather, as the OS version increases (based on Android), APIs that can be used are limited due to security issues.

2. Style

Mobile devices all have different screens (horizontal and vertical sizes) even if they have the same OS version. Because of this, React Native provides layout creation using flexbox by default. However, not all screens can be fully responded, so you must always proceed while viewing the UI results on multiple devices.

3. Some differences from React

If you create multiple screens with react native, you will use react-navigation to build React application. However, it works a little differently from react. React-router-dom doesn’t nest stack.

See also  Factory Reset of Android Phone: Quick Guide Just in 5 Minutes

In general, the route is defined for each page within the Switch component for each page. React navigation overlaps the stack to provide a screen, so the way it works is a little different.

React navigation also provides a switch component, but usually, it is mainly used for login handling by determining whether the token is valid or not.

Since the stack is overlapped, it cannot be mounted again when re-entering after the initial screen entry. Since the mount is not re-mounted, the life cycle application method such as componentDidMount must be different. In react-navigation, the screen itself provides a lifecycle for focusing.

4. IOS and Android simultaneous development

React Native makes sense to support both platform development. However, if you create a UI without thinking and use the API supported by React Native, it is very difficult to create an app that supports both platforms at the same time. Naturally, the OS of both platforms is completely different and the version of each OS is different, so you need to take all these into consideration and develop. Hence it is recommended to Hire dedicated react js developers from a reputed development company.

The policies for each platform are also very different, so if you plan to develop both platforms in one project, you must understand the policies for each platform in detail before proceeding.

5. Performance compared to native language development

React Native is developed based on javascript and runs the app by calling native API through the bridge. There are many articles that point out bridge bottlenecks and performance versus native apps as issues.

See also  Ultimate Starter Kit Android Developer Guides To Learn Quick and Fast in 30 Mins

If the developer-only builds the logic well, the performance is very good, and the productivity benefits are also gained.

6. React native init vs expo init

When you start to React Native, there are two ways to start a project. React native init uses API provided by default, and if there is a necessary module, you can create and use it yourself. However, it takes a little more labor to set up and manage the initial development environment.

the expo has the advantage of having very little initial labor. You can proceed without installing an android studio or Xcode. After creating a project with expo-CLI, install the Expo client on the mobile to complete the development environment setting. Also, you can get started very easily by using the APIs provided by the expo.

However, the expo has obvious drawbacks.

●       The build file size is very large

●       Only provided API can be used (direct module production is not possible)

●       Bluetooth not available

●       Direct background handling is not possible

●       The latest specifications such as Hermes the engine is not available (0.60 currently unavailable based on expo version)

●       Very narrow ecosystem

It is still difficult to develop a large-scale and feature-rich app with the expo.

Further visit: Choose From These 2 For Best iOS App: React Native Vs Swift

7. Introduction of static type language (flow, typescript..)

Flow is not introduced, so it is impossible to understand clearly. In case you are not familiar with typescript, it is not easy to define a module or type tightly. If you are not familiar with react native, it is a good way to develop by actively using external modules. As the ecosystem is not as big as React, there are few typescript-based modules, and there are many modules that are not defined in @types.

See also  React vs Angular: What Will Be Better For Your Front-End - 8 Points To Know

When you use the expo to proceed with the project there, the ecosystem will become even more narrow. If you apply typescript to the expo, the ecosystem becomes very, very narrow. Expo itself is written in typescript, but submodules are not.


If you are new to React Native, we recommend not applying typescript. Expo has many drawbacks, but if you build your own project, you can get tired of it before you even proceed, so using expo for learning is a very good choice.

Shahid Mansuri

Shahid Mansuri Co-founder Peerbits, one of the leading mobile app development company the USA, in 2011 which provides Blockchain app development services. His visionary leadership and flamboyant management style have yield fruitful results for the company. He believes in sharing his strong knowledge base with a learned concentration on entrepreneurship and business.

Share and Enjoy !

2 thoughts on “7 Best Practices for Building a Large Scale React Application

  1. Pingback: 7 Best Practices for Building a Large Scale React Application – TechTravelHub – News by Ava

Leave a Reply

Your email address will not be published. Required fields are marked *