Hello World

In accordance with the ancient traditions of our people, we must first build an app that does nothing except say “Hello, world!”. Here it is:

import React, { Component } from ‘react’;

import { Text, View } from ‘react-native’;

export default class HelloWorldApp extends Component {

render() {

return (

<View style={{ flex: 1, justifyContent: “center”, alignItems: “center” }}>

<Text>Hello, world!</Text>

</View>

);

}

}

 

If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your App.js file to create a real app on your local machine.

What’s going on here?

Some of the things in here might not look like JavaScript to you. Don’t panic. This is the future.

First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn’t used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. import, from, class, and extends in the example above are all ES2015 features.

The other unusual thing in this code example is <View><Text>Hello world!</Text></View>. This is JSX – a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <div> or <span>, you use React components. In this case, <Text> is a built-in component that just displays some text and View is like the <div> or <span>.

Components

So this code is defining HelloWorldApp, a new Component. When you’re building a React Native app, you’ll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple – the only thing that’s required is a render function which returns some JSX to render.