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,
is a built-in component that just displays some text.
So this code is defining
HelloWorldApp, a new
Component, and it's registering it with the
AppRegistry. 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.
AppRegistry just tells React Native which component is the root one for the whole application. You won't be thinking about
AppRegistry a lot - there will probably just be one call to
AppRegistry.registerComponent in your whole app. It's included in these examples so you can paste the whole thing into your
index.android.js file and get it running.
Good point. To make components do more interesting things, you need to learn about Props.
You can edit the content above on GitHub and send us a pull request!