React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components,
props. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
Let's do this thing.
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:
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?
extends in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, this page has a good overview of ES2015 features.
The other unusual thing in this code example is
<span>, you use React components. In this case,
<Text> is a Core Component that displays some text and
View is like the
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 basic - the only thing that's required is a
render function which returns some JSX to render.
This app doesn't do very much
Good point. To make components do more interesting things, you need to learn about Props.