What is React Native?

React is a component-oriented front-end framework developed by Facebook, used for making native applications.

CLI Tool

Firstly, we start with installing Homebrew (https://brew.sh/) Homebrew is package management software that can be used with mac.

$ brew install node
$ brew install watchman
$ npm install -g react-native-cli

You can now install the ReactNative development environment. From here, I actually start up the application.

$ react-native init trainee
$ cd trainee/
$ react-native run-ios

A bunch of files folders are created by init. This time, we focus only on App.js.

App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Let's take a look at the source code from the class above. By setting export default class hogehoge in App.js, this class is rendered at the top of the application.

App.js

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

There are many Tag that can be used, but basically we use Image, Text, View, etc. If you simulate a character in Text and reload the simulator (command R), I think that you can see that it actually changed.

Next, pay attention to style.

App.js

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Here, the style of each component (Text or Image) is defined. For example

App.js

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },

This styling sets fontSize to be 20, placing text in the middle, and displaying around 10 spaces around the text and the edge. This welcome style is in one of the Text tags in the class App.

App.js

<Text style={styles.welcome}>
    Welcome to React Native!
</Text>

By doing this, you can use the styling you defined by writing welcome defined in styles in Text like <Text style = {styles.welcome}>.

A little bit more detailed grammar

Regarding export

export is one that explicitly writes to a class you want to import in a separate file. There are 2 patterns to write this:

export default class App

or

export class App

If we write with export default, there are 2 rules as following:

• There should be only 1 export for one file
• Remove curly brackets {} when importing (if you do not export with default, use import {App} from './App')

The merit of writing as default is that you can freely change the name when importing. For example, in App.js, when you create a component named App and import it from a different file As usual we import like this:

import App from './App'

You can also import with a different name. This is because there is a property that only one can be exported to one file when using default

import AwsomeApp from './App'

Regarding extends

export default class App extends Component

Next, I will explain the extended Component that follows the App. This means that the App inherits the Component class.

By inheriting, it is possible to make it possible to use the function (function, variable) of the class of the inheritance source at the successor destination.

A render function which is also found in the class App is an example.

App.js

render(){
  return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
  )
}

The render function used when creating the screen of the component is a function defined in the Component class. And the function of rendering the return value on the screen is defined in the Component class, so If you write the component inside return of the render function, it will be rendered on the screen.

Conclusion

This time, I explained the raw mechanism of ReactNative, how to mount screen, and many things else Next time I will try to summarize the routing in React. Thank you for reading!