React Native – Hello World

I hope you have read the post about React Native – Introduction

Now, we will learn how to create a sample React Native application.

Prerequisites

In order to start with React Native, you should have the following experience.

  • Javascript
  • HTML/CSS

Tools

  • Node.js 6.x or later
  • Code Editor

After installing Node.js you need to install create-react-native-app. To install this execute a command in terminal.

npm install -g create-react-native-app

Now you can use create-react-native-app to create a new applications.

 


$ npm i -g create-react-native-app
$ create-react-native-app hello-world
$ cd hello-world
$ npm start

Now change your App.js with the following:


import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

You can run a react-native project by the following command.

– yarn android
– yarn ios # you need to use macOS to build the iOS project – use the Expo app if you need to do iOS development without a Mac
– yarn web

We will run the yarn web command and check this example. So that we don’t need any device to run,

yarn web will install expo-cli.

You will see the following output in the browser.

React Native – Introduction

React Native is an open-source mobile application framework created by Facebook, Inc. 3] It is used to develop applications for Android, iOS, Web, and UWP by enabling developers to use React along with native platform capabilities.

Create native apps for Android and iOS using React

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

Use a little—or a lot. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.

Written in JavaScript—rendered with native code

React primitives render to native platform UI, meaning your app uses the same native platform APIs other apps do.

Many platforms, one React. Create platform-specific versions of components so a single codebase can share code across platforms. With React Native, one team can maintain two platforms and share a common technology—React.

Native Development For Everyone

React Native lets you create truly native apps and doesn’t compromise your users’ experiences. It provides a core set of platform agnostic native components like ViewText, and Image that map directly to the platform’s native UI building blocks.

Seamless Cross-Platform

React components wrap existing native code and interact with native APIs via React’s declarative UI paradigm and JavaScript. This enables native app development for whole new teams of developers, and can let existing native teams work much faster.

Fast Refresh

See your changes as soon as you save. With the power of JavaScript, React Native lets you iterate at lightning speed. No more waiting for native builds to finish. Save, see, repeat.

Source:

https://en.wikipedia.org/wiki/React_Native

https://reactnative.dev/