React Tutorial 102: Create a React Native App

A CodeMix eLearning Tutorial

Create a simple React-Native application that gets a list of characters from the Star Wars universe.

For a hands-on learning experience, an interactive version of this tutorial is included in CodeMix.

Try it Yourself

What is CodeMix eLearning? | Discover Other Tutorials | View Steps

# React 102: Create a React Native App

### 01

# Welcome to React 102!

In this tutorial, we will create a simple React-Native application that will get a list of characters from the Star Wars universe. A new project `tutorial-react102` has been added to your workspace.

Alternatively, you can also create this project from cli with the steps below:
-- install `expo` npm package globally using `npm install -g expo-cli`
-- call `expo init tutorial-react102 --template blank`.

If you want to test your app  on some actual device, you also need to have `Expo` application installed to it and having this app connected to your dev machine via tunnel (e.g. to IPhone connected with cable) or being in same LAN through Wi-Fi.
While React.js is used for manipulating DOM for Web platform, React Native compiles to native mobile platform components. 
Syntax and workflow is quite similar for both React and React Native but components are different.

### 02

# Install React Native tools

Install React Native tools globally using either your OS shell like `cmd`/`bash` or the integrated Terminal+ provided by CodeMix

1. Open shell/terminal
2. Execute `npm install -g react-native`
 
### 03

# Install NPM Dependencies

To work with a React project, you first need to install required Node modules. For this we will use the Terminal+ view.

You need to run `npm install` to install the corresponding Node modules needed to properly work with React Native API inside this project, including the command needed to serve the application easily from development.

1. Type `npm install`
2. Press `Enter`

The Terminal+ view in CodeMix will automatically configure the Node and NPM versions for you. If you need to change this, you can at any time via project properties.

Node and NPM installation can take up to several minutes.

### 04

# Install Table Component Dependency

React Native doesn't support table out of the box - we'll need to use custom table implementation in our app. Execute the following command in Terminal+:

1. Execute `npm install --save react-native-table-component` in Terminal+

### 05

# Create StarWarsPeople.js

Let's create a new React Native component responsible for retrieving the list or characters and rendering it.

1. Right click on `tutorial-react102` in Project Explorer, select  `New > Folder`, enter name `src`
2. Right click on created `src` folder, select  `New > Folder`, enter name `components`
3. Right-click on `src/components`
4. Select `New > JavaScript File`
5. Type `StarWarsPeople.js` for the name

You can read more about React Components <a href="https://reactjs.org/docs/react-component.html" target="_blank" rel="nofollow noopener">here</a>
### 06

# Import Basic Component Dependencies
Let's add some fundamental React dependencies so we can get started with our Component. 
**TIP**: As you start typing import, you will notice several proposals including the `import statement` template. This will insert an `import { } from "module"` snippet for you. You can then use content assist and Tab to enter the module and symbol names.

```
import { React, Component } from "react";
import { Text, View, StyleSheet } from 'react-native'
import { Table, Row, Rows } from 'react-native-table-component';

```

### 07

# Create the Component Class

Let's create a state object to hold the currently retrieved list of characters.

**TIP**: CodeMix provides intelligent suggestions in JavaScript,TypeScript and even in JSX sections. Suggestions include React specific elements, attributes, fields and methods.

```
class StarWarsPeople extends Component {

constructor() {
        super();
        this.state = {
            people: new Array()
        };
    }

}
```

### 08

# Fetch List of Characters from Web Service

*fetchStarWarsPeople method:* We use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank" rel="nofollow noopener">fetch API</a> and a <a href="https://javascript.info/promise-chaining" target="_blank" rel="nofollow noopener">Promise chain</a> to request data from the Star Wars  web service, and handle the response. On a successful fetch, we update the state of the component with the list of characters returned.

*componentDidMount method:* This is a <a href="https://reactjs.org/docs/react-component.html#the-component-lifecycle" target="_blank" rel="nofollow noopener">React lifecycle method</a> that is called when the component is inserted into the tree, we call the fetchStarWarsPeople method here to ensure the list of characters is fetched when the component is first loaded.

```
	fetchStarWarsPeople() {
	    fetch('https://swapi.co/api/people/?format=json')
	        .then(results => {
	            if (!results.ok) {
	                throw Error(results.statusText);
	            }
	            return results.json();
	        }).then(data => {
	            this.setState({ people: data.results });
	        }).catch(error => {
	            console.log(error);
	        });
	}
	
	componentDidMount() {
	    this.fetchStarWarsPeople();
	}

```

### 09

# Write HTML in JSX to Render Component

*render method*: One of the strong points of React is the <a href="https://reactjs.org/docs/introducing-jsx.html" target="_blank" rel="nofollow noopener">JSX syntax</a>, allowing you easily describe the UI right in your JavaScript component - no separate files, no cumbersome `document.createElement` calls.

This is the most interesting part of our component, if the character list has already been fetched, we use the map array function to create a new array, peopleArray,  which holds a list of actual character data in form of small string arrays containing [name, birth year] pairs. Then we use `<Table>` component with one `<Row>` containing header text and then - `<Rows>` element, which iterates through  peopleArray, creating row for each of its elements. This would result in table containing Star Wars characters data to be rendered

Note that you can use content assist - it will give you a names of React Native components as you type, along with attributes of these elements,  so you don't have to look up documentation as you type.

```
render() {
		if (this.state.people.length > 0) {
			const peopleArray = this.state.people.map(person => {
				return [person.name,person.birth_year];
			});
			return (
                <View style={styles.container}>
                    <Table borderStyle={styles.border}>
                        <Row data={['Name', 'Birth Year']} style={styles.head} textStyle={styles.text}/>
                        <Rows data={peopleArray} textStyle={styles.text}/>
                    </Table>
                </View>
			);
		} else {
			return (<Text></Text>);
		}
	}

```

### 10

# Add styles declaration

As you can see, table header and rows are using different styles to give our table better look. Let's define them below StarWarsPeople class

```
const styles = StyleSheet.create({
  border: {borderWidth: 2, borderColor: '#c8e1ff'},
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6 }
});

```

### 11

# Use Component to Show Characters

So our component is now ready for action, let's export it by adding the following line at the end of StarWarsPeople.js file.

```
export default StarWarsPeople;
```

Besides that we need to modify `App.js` file to show our StarWarsPeople component. Firstly, let's define imports section which imports StarwWarsPeople, as well as some necessary React stuff. After that, we create App component, which has an only `render()` method. This method is pretty simple and just returns `<StarWarsPeople/>`

```
import React, {Component} from 'react';

import StarWarsPeople from './src/components/StarWarsPeople';

export default class App extends Component {
    render() {
        return(
            <StarWarsPeople/>
        );
    }

}
```

### 12

# Launch the App

Please follow the below steps to run the app on an actual device:
-- Connect the device to your dev machine via a tunnel (e.g. to IPhone connected with cable) or being in same LAN through Wi-Fi.
-- Execute `npm start` in Terminal, possibly adding target platform to it: `--android` or `--ios`.
-- Terminal output should look like: `Expo DevTools is running at http://localhost:19001` . 
-- Open this URL in your browser (if it wouldn't open automatically). 
-- In opened window please switch the type of your connection with device if necessary and then scan provided QR code using your device.

Another option is having corresponding (Android or iOS) emulator set up and configured.

You can read more about debugging on actual device <a href="https://facebook.github.io/react-native/docs/running-on-device" target="_blank" rel="nofollow noopener">here</a>

Refer <a href="https://facebook.github.io/react-native/docs/signed-apk-android" target="_blank" rel="nofollow noopener">this article</a> if you want to create signed Android apk from your app.

And that's it - you've done with your first React Native app! If you want to know more about React & React Native programming in CodeMix, please refer <a href="https://www.genuitec.com/tech/react-in-eclipse/" target="_blank">this article</a>.

### 13

# Nice Job!!!

You've finished the React 102 tutorial. As you are learning React, why not check out <a href="https://reactjs.org/community/examples.html" target="_blank" rel="nofollow noopener">React Examples</a> for good examples of challenges you may face.

Explore other courses <a href="https://www.genuitec.com/elearning/" target="_blank">here</a>.