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!
Instructions
Watch the video and follow along on your own computer.