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.
- First of all, we need to import
Reactto be able to use
JSX, which will then be transformed to the native components of each platform.
- On line 2, we import the
Then we find the
HelloWorldApp function, which is a functional component and behaves in the same way as in React for the web. This function returns a
View component with some styles and a
Text as its child.
Text component allows us to render a text, while the
View component renders a container. This container has several styles applied, let's analyze what each one is doing.
The first style that we find is
flex: 1, the
flex prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
The following style is
justifyContent: "center". This aligns children of a container in the center of the container's main axis. Finally, we have
alignItems: "center", which aligns children of a container in the center of the container's cross axis.
from 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.
Most components can be customized when they are created, with different parameters. These creation parameters are called props.
Your own components can also use
props. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to
props.YOUR_PROP_NAME in your functional components or
this.props.YOUR_PROP_NAME in your class components. Here's an example:
name as a prop lets us customize the
Greeting component, so we can reuse that component for each of our greetings. This example also uses the
Greeting component in JSX. The power to do this is what makes React so cool.
Unlike props that are read-only and should not be modified, the
state allows React components to change their output over time in response to user actions, network responses and anything else.
In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
In the following example we will show the same above counter example using classes.