React Native Hello World App

Basic Concepts

Using create-react-native-app to create our project from above, let’s add a few basic controls.

Basic Controls with Button and Event

Let’s make sure we can edit the code and see the changes. Now open MyApp folder in Visual Studio Code and open the file MyApp.js. You can use any other editor to edit the text.

In the render() method, change the return to this:

<View style={styles.container}>
  <Text>Hello MyApp</Text>
  <Button title="Click Me"
    onPress = {()=>{console.log("Click Me is pressed.")}}
  />
</View>

We just change the text in Text component, and add Button with label “Click Me” and add the onPress event handle to log to the console using an arrow function.

After you save the code, you can reload the app, by pressing Control-D. Then select Refresh. Sometime, you might need to select Reload JS Bundle.

Image for post

Now you should see the updated screen.

Image for post

When you press on Click Me, you should see the console log back in the browser when you select the device.

Image for post

Here is a full code so far:

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello MyApp</Text>
        <Button title="Click Me" 
        onPress = {()=>{console.log("Click Me is pressed.")}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Anatomy of the Code

import: These lines import different libraries to be used in the code. react and react-native are the libraries we imported into be used. The class Button,StyleSheet, Text and View inside the curly brackets “{}” are classes without default export. On the other hand React has a default export so we don’t need the bracket.

export default: This allow an object to be import without bracket as mentioned above. It only has one default export per module. This class App required to have export default to run here. You can declare inline with class as seen above or add to the last line as below:

export default App;

class App extends: this is an object oriented class that inherit the React.Component. It gets all the functionalities provided by React.Component. It has useful constructor and render method.

render(): This is the method inherited from React.Component. You override this method to output a sing DOM element as the GUI. If you have multiple element you need to wrap it under one component like View. Notice that in the return statement, it has a different syntax. This is JSX code which is run in a preprocessing step that allows to use XML format to make the code more elegant.

<View>, <Text>, <Button>: They are in JSX format. These are react-native components of layout container, text, and button interface respectively.

const style: This is a constant object declaring as inline StyleSheet object. Notice that the object create method has dangling comma or trailing comma.

Stateless vs Stateful

Using Prop

Prop is short for property. It is intended for read-only object. The value should not be changed, another word it is immutable. This is called stateless. The component that uses the prop should not change its values. In the case of the component is a function, it should be a pure function.

You normally pass the prop to a component from parent component. We are going create a text component that display different names as follow:

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello MyApp</Text>
        <Button title="Click Me" 
        onPress = {()=>{console.log("Click Me is pressed.")}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

This class is looking for the props with the object username. So let’s set that from our main App class by adding the following elements in the return of the render method.

<Hello username="Alice" /><Hello username="Bob" />

Image for post

So this.props.username in Hello class will get the value from the App caller with the same name (username). Save the file and you should see the changes in the simulator as shown.

Using State

Unlike prop, state is mutable which means it can be changed. This is consider stateful. You update the state using setState() method and don’t change the state variable directly.

First let us add a label that display the state and a button to set a new state. But first we have to initialize the state so a value in the constructor of App.js class as follow:

constructor() {  super();  this.state = {    stateName: "nobody",  };}

Notice that the first line of the constructor we call super() to initialize the based class (React.Component). this.state is just an object with the property stateName. This is the variable that we will manipulate.

In our view, we will reuse the Hello component to display the state and a button to set the state with this:

<Hello username={this.state.stateName} />
<Button title="Set State"
  onPress = {() => this.onButtonPressedSetState()}
/>

The button action onPress calls to a method onButtonPressedSetState(). So let’s add that method inside the class.

onButtonPressedSetState() {
  this.setState({
    stateName: "My SetState"
  });
}

Image for post

Let’s save the file and reload the app to test. You should see “Greeting nobody!” in the label.

Image for post

When you press the button “Set State”, the label should change to “Greeting My SetState!”.

As you can see from these two examples, the prop was used to pass a variable to a component. While state in a component can be manipulated using setState method.