Education Ecosystem Blog

React Native is a front-end mobile framework that enables developers to build portable mobile apps. With React Native, you can easily start developing apps for multiple platforms such as iOS, Android, and Windows, and not worry about any portability issues.

Under the hood, it takes advantage of the native app components making it super easy to build apps that work on the platforms mentioned above.

React Framework utilizes React.js library to build the components. So, as a beginner, you need a working knowledge of React.js. You can get started with React.js by going through React.js category page.

React Native is relatively new and is backed by Facebook. Even broadcasting platforms such as Livecoding.tv have seen an increase in React.js and React Native broadcast due to its bright future. All this makes now a good time to learn React Native or React.

However, before we dive into some of the basic examples of React Native, let’s go through its  notable features.

• You can build native mobile apps with React and JavaScript.
• It offers an instant preview to your changes, enabling you to be as productive as possible.
• It works great with other technologies and can be embedded whenever needed. For example, it works great with popular mobile programming languages like Java, Objective-C, and Scala.

For a front-end developer, learning React Native can give a definite edge. Also, familiarity with React is also needed for proper usage. Without an understanding of React, you will not be able to take full advantage of the React Native framework. Check out the React resource here to get started.

Getting Started: Installing React Native

For the sake of simplicity, we will only be going to install React Native for Mac and iOS Mobile Operating System. If you intend to develop on a different OS, please check out the detailed installation guide here.

First, you need to install Homebrew, a popular package manager for MacOS. Once this is done, proceed to install Python2  and Watchman. Watchman is a file watching service used by React Native to help you gain insight on your files and any changes that happen to them during the course of your project development.

To install them on your on your development machine, run the following commands on iOS terminal:

brew install node
brew install watchman

To make proper use of React Native, you also need to install React Native CLI, by running the following command:

npm install - g react-native-cli

Next, you need to setup Xcode. It can easily be done using the Mac AppStore. Set it up and let’s get started with a React Native app.

Creating your first React Native app

Now, let’s us go through creating a simple, “Hello, World” app.

To create a new project, you need to initiate the following command. Let’s call our first project, “HelloLiveCoding.”

react-native init HelloLiveCoding

Once done, change directory to the new folder using the command below.

cd HelloLiveCoding

To test that everything is setup properly, run the following command.

react-native run-ios

If the command fails with an error, you might have missed a step or two. If you see the iOS simulator running, everything is working as expected and now we can proceed to the next step.

Hello LiveCoding

Before we start, it is important to understand that we are building native components which are simple web building blocks.

Importing necessary libraries to work with.

To get started, you need to edit the index.ios.js file. To compile the code and see a live feedback of your work, you need to press Command⌘ + R.

Copy-paste the following code into your index.ios.js file:

import React, { Component } from ‘react’’
import { AppRegistry, Text } from ‘react-native’;

These two import functions work with the new ES2016 JavaScript official standard. It should be noted that most browsers do not support the new standard, but you don’t have to worry about them just yet.

The first “import statement” imports component from the react library. Components are the basic UI units used in React to layout the app. It is reusable and assists faster development.

The second import statement imports AppRegistry and Text from React Native. We will discuss both Component and AppRegistry later in the tutorial. For now, let’s write more code.

class HelloLiveCoding extends Component {
 render() {
   return (
     <Text>Hello Livecoding!</Text>
   );
 }
}

As you can see, we are using JavaScript to our advantage! The new ES6 standard has introduced the use of JavaScript. Even though multiple platforms out there don’t support the ES6 standard completely, many tools and libraries enable the use of JavaScript by converting them to legacy whenever needed.

In the above code, we create a class, “HelloWorldApp”, which extends the “Component” class. As discussed earlier, React utilizes component to ensure reusability and faster development.

render() function renders the code to the mobile app.

<Text>Hello Livecoding! </Text> is where all the fun starts. What you see here is JSX. JSX is a simple JavaScript syntax extension that enable XML use in JavaScript code. Also, it is similar to XML in implementation. Text tag here renders simple text on the mobile app.

Now, all you need to do is add the following code into your index.ios.js or Android equivalent file.

AppRegistry.registerComponent(“HelloLiveCoding”, () => HelloLiveCoding);

With this code of line, HelloLiveCoding is registered with the AppRegistry as a component. Basically, the philosophy behind developing a React Native app is to work with component and then have a starting point to render the whole app designed around it. In this case, the starting component is HelloLiveCoding.

AppRegistry defines the starting point of the app and enables the app to get started. So, if you register one component in your whole app, you are ready to go.

Conclusion

In this tutorial, we have learned about React Native and how we can get started. However, there is a lot to learn. For example, a few more concepts such as Props, style, and state are important to understand the basics of React Native. We conclude this part and will touch on all the other important concepts in the part 2 of the series where we discuss  So, stay tuned!

Meanwhile, you can browse through hundreds of Livecoding.tv videos here.

You can talentec from United States teaching react.js

So, what do you think about React Native? Will you try it out in future? Let us know in the comment section below.