We’ve set up our app and tested it—now it’s time to dive into the code and start doing some actual development!

Modifying the JSX

The first thing we’ll do is start playing with the JSX that’s in the App.js file.

Let’s modify the text in the app by changing the <Text> component.

<Text>Hello World</Text>

Once you make the change, the app should automatically update. It’s just like magic!

This process of updating the app when we save the file is called live updating, it’s one of the features we get by using Expo.

Styles

Now let’s add a little color into our app, towards the bottom of the file, modify the styles constant.

const styles = StyleSheet.create({
  container: {
    ...
    backgroundColor: 'blue',
    ...
  }
})

Modifying the backgroundColor field will change the background color of the app to be blue. You can put any common color in place of blue and it should work!

Debugging Errors

Inevitably, as you develop your app you’ll run into errors. Luckily it’s really easy to fix them when we run our app with Expo.

Let’s test this out by creating a syntax error.

Remove the </Text> closing tag for the Text component and save.

<Text>Hello World

This will throw an error, which should be visible on your device. With the helpful error message, it’s really easy to discover exactly where the error occurred and what the problem is.

Fix the error, save, and the app should load up again!