Creating first application on React Native

What is React Native?

React Native is a framework for developing cross-platform applications. It allows creating and using components in the same way as we usually do in React, but they are rendered not in HTML, but in the native controls of the operating system under which our application will be built.

So, we have a familiar JavaScript, JSX and CSS (in fact, this is a polyfill that implements a subset of CSS). JavaScript has some unpleasant feature: your code will execute the JavaScriptCore engine (the one that comes with WebKit) on both Android and iOS. However, you will debug the code in debugging mode and run the tests in node.js and Chrome, thus on the V8 engine.

Keep in mind:

• React Native uses JavaScriptCore on simulators and iOS devices, emulators and Android devices. JavaScriptCore does not use JIT.

• When using a debugger, all code is run inside the debugging environment (for example, in Chrome). The communication with native code occurs via WebSocket. So when debugging, you are using V8.

Tools

Development environment

I am personally a fan of WebStorm which is a bit heavyweight and interface overloaded IDE based on IntelliJ IDEA by JetBrains. However, it is a stunningly powerful and convenient tool. Currently, the set of tools for working with React and React Native is badly integrated into WebStorm.

When WebStorm processes operations, and there is too little free RAM in the system, I come to the good old vim. In principle, it is not forbidden to use it with React Native, especially if you plug in the JSX syntax highlighting.

You can also give a chance to the symbiosis of Facebook and GitHub – Nuclide. This editor is a set of extensions for Atom and is positioned by Facebook as a first-class solution for developing on React Native. Honestly, in my case, this editor turned out to incredibly resource-intensive and I refused to use it.

Preparation

For our application development, we use the tool of Facebook – Create React Native App. It is not difficult to install it:

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

Unfortunately, if you have already installed the fifth version of npm, then nothing happens.

Either install the fourth version of npm or try yarn – a new package manager from Facebook, in which everything works fine.

Next, create the framework for our future application:

$ create-react-native-app example

Tooling

Fundamentally, we currently have everything to start the development process. However, it is recommended to install a few more useful tools that will simplify our development in the future.

Create React Native App comes with Expo. Expo is a set of tools, libraries, and services that simplify the React Native development. Expo SDK allows you to access system functionality (such as camera, contacts, local data storage, and so on). This means that you do not need Xcode or Android Studio and the ability to write native code. Also, it means that your code becomes fully cross-platform with the help of this abstraction layer.

Moreover, you do not even need Xcode and iOS simulator to run the application. With the help of Expo, you can run the application in debug mode directly on the phone. To do this, you need to install the Expo client for iOS or Android on your phone.

Also, for the greater convenience of development, I recommend installing Expo XDE, which exists in versions for MacOS, Windows and Linux.

And last but not least: we need a good debugger. By default, Google Chrome opens as debugger. This is not bad, but not convenient enough. There are third-party debuggers, one of the best is React Native Debugger.

And last but not the least: you need a good debugger. By default, you will have Google Chrome as a debugger. It is not bad, but not convenient enough. There are lots of third-party debuggers. One of the best debuggers is React Native Debugger.

Due to the fact that the standard React Native packager runs on 8081 port and Expo packager runs on 19001 port, you need to specify this port in your debugger.

Hello, World!

Thus, everything is ready for launching our first application. Now, we need to choose where we want to run it. Due to the fact that I work on MacOS and I have XCode installed, I choose a simulator.

$ cd example

$ npm run ios

In case you don’t have MacOS, you can run your application directly on the device. Launch the Expo client and scan the QR-code that will be output after the launch.

$ cd example

$ npm start

You should see the following text on the window:

Open up App.js to start working on your app!

Changes you make will automatically reload.

Shake your phone to open the developer menu.

Now, open App.ks and replace the following

<Text>Open up App.js to start working on your app!</Text>

<Text>Changes you make will automatically reload.</Text>

<Text>Shake your phone to open the developer menu.</Text>



with

<Text>Hello, World!</Text>

Hot Reload will be executed and you will see “Hello, World” in your application.

What happens here? Our template code seems to be the simple HTML. However, we use React components instead of web elements such as <div> and <span>. In this case, <Text> stands for an integrated component responsible for a text display.

export default class App extends React.Component {

 render() {

   return (

     <View style={styles.container}>

       <Text>Hello, World!</Text>

     </View>

   );

 }

}

This code declares a new App component. Everything that you spot on your display is a set of components. A component may be quite simple: the only requirement is a render function that returns JSX. In the next part, I will show you how to create the components in a more compact manner.