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
index.android.js file to create a real app on your local machine.
extends, and the
() => syntax in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just 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 built-in component that just displays some text.
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.
Good point. To make components do more interesting things, you need to learn about Props.
Improve this page by sending a pull request!