A Professional Environment for React Native, Part 1

React Native, a new framework, allows you to build mobile apps using JavaScript. It uses the same design as React.js, letting you compose a rich mobile UI from declarative components. Although many developers are talking about this technology, React Native is not yet approved by most professionals for several reasons:

• React Native isn’t fully stable yet. At the time of writing this, we are at version 0.40
• It can be scary to use a web technology in a mobile application
• It’s hard to find good React Native developers because knowing the React.js stack is not enough to maintain a mobile React Native app from A to Z!

To confront all these prejudices, this series will act as a guide, detailing how we see things in my development team. We will cover the entire React Native environment as well as discuss how to maintain a React Native application.

This series may be of interest to companies who want to implement a React Native solution and also of interest to anyone who is looking for the perfect tools to maintain a mobile application in React Native. Let’s start here in part 1 by exploring the React Native environment.

The environment

The React Native environment is pretty consistent. To manage all of the parts of such an application, you will need a native stack, a JavaScript stack, and specific components from React Native.

Let's examine all the aspects of the React Native environment:

• The Native part consists of two important pieces of software: Android Studio (Android) and Xcode (iOS). Both the pieces of software are provided with their emulators, so there is no need for a physical device! The negative point of Android Studio, however, is that you need to download the SDK, and you will have to find the good versions and download them all. In addition, these two programs take up a lot of room on your hard disk!
• The JavaScript part naturally consists of Node.js, but we must add Watchman to that to check the changes in a file in real time.
• The React Native CLI will automate the linking of all software. You only have to run react-native init helloworld to create a project and react-native run-ios --scheme 'Dev' to launch the project on an iOS simulator in debug mode. The supplied react-native controls will load almost everything!

You have, no doubt, come to our first conclusion. React Native has a lot of prerequisites, and although it makes sense to have as much dependency as possible, you will have to master them all, which can take some time.

And also a lot of space on your hard drive!

Try this as your starting point if you want more information on getting started with React Native.

Atom, linter, and flow

A developer never starts coding without his text editor and his little tricks, just as a woodcutter never goes out into the forest without his ax!

More than 80% of people around me use Atom as a text editor. And they are not wrong! React Native is 100% OpenSource, and Atom is also open source. And it is full of plug-ins and themes of all kinds.

I personally use a lot of plug-ins, such as color-picker, file-icons, indent-guide-improved, minimap, etc., but there are some plug-ins that should be essential for every JavaScript coder, especially for your React Native application.

linter-eslint

To work alone or in a group, you must have a common syntax for all your files. To do this, we use linter-eslint with the fbjs configurations. This plugin provides the following:

• Good indentation
• Good syntax on how to define variables, objects, classes, etc.
• Indications on non-existent, unused variables and functions

And many other great benefits.

Flow

One question you may be thinking is what is the biggest problem with using JavaScript? One issue with using JavaScript has always been that it's a language that has no type. In fact, there are types, such as String, Number, Boolean, Function, etc., but that's just not enough. There is no static type.

To deal with this, we use Flow, which allows you to perform type check before run-time. This is, of course, useful for predicting bugs! There is even a plug-in version for Atom: linter-flow.

Conclusion

At this point, you should have everything you need to create your first React Native mobile applications. Here are some great examples of apps that are out there already.

Check out part 2 in this series where I cover the tools that can help you maintain your React Native apps.

About the author

Pierre Monge (liroo.pierre@gmail.com) is a 21 year old student. He is a developer in C, JavaScript, and all things related to web development, and he has recently been creating mobile applications. He is currently working as an intern at a company named Azendoo, where he is developing a 100% React Native application.