react-native
  1. react-native-first-app-hello-world
PreviousNext

React-Native First App: Hello World

Syntax

The basic syntax for creating a React Native app is as follows:

npx react-native init MyFirstApp
cd MyFirstApp
npx react-native start
npx react-native run-android

Example

Open App.js and replace the default code with the following:

import React from 'react';
import { Text, View } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello World!</Text>
    </View>
  );
}

export default App;

Output

When you run the app using the npx react-native run-android command, you should see a screen with the text "Hello World!" displayed in the center of the screen.

Explanation

The App.js file is the starting point of a React Native app. In this example, we are importing the Text and View components from react-native.

The View component is used to group and position child components, while the Text component is used to display text.

The flex property is used to specify how a component should grow or shrink in relation to other components. In this example, we are using flex: 1 to ensure that the View component takes up the full height and width of the screen.

The justifyContent and alignItems properties are used to position child components within the View. In this example, we are using justifyContent: "center" and alignItems: "center" to center the Text component within the View.

Use

React Native is a powerful framework for building cross-platform mobile apps using JavaScript and React. With React Native, you can write once and deploy to both iOS and Android platforms.

The basic building blocks of a React Native app are components such as View, Text, Image, Button, and ScrollView. These components can be combined to create complex UIs that are optimized for performance on mobile devices.

Important Points

  • React Native uses a flexbox layout system for positioning components.
  • React Native supports hot reloading, which allows for faster development cycles.
  • React Native comes with a rich set of built-in components and APIs for interacting with device hardware and sensors.

Summary

React Native is a powerful framework for building cross-platform mobile apps using JavaScript and React. With the basic building blocks of View and Text components, you can start building your first app in just a few minutes.

Environment SetupView
Published on: