Understanding of React Native Development with Hello World Program

Introduction

As an ancient tradition, here is the Hello World program for the understanding of React Native development. I hope you have already gone through the Just Started section. Here we have started our journey for the beginners so Let’s get started.

React and React Native are close to each other but React Native uses native components instead of web components as building blocks. Here we will understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props. If you already know React, you still need to learn some React-Native-specific stuff, like the native components.

Basic Hello World program to start with

import React from 'react';
import { Text, View } from 'react-native';
export default HelloWorldApp = () => {
  render() {
    return (
      <View>
        <Text>Hello World!</Text>
      </View>
    );
  }
}

Getting started with React Native will help you to make your first React Native app. You can replace your existing code in your App.js and can run your app.

You heard that React Native apps are made of JavaScript but you will found some of the things might not look like JavaScript here. But don’t worry we will describe it all.

What is ECMAScript?

Let’s talk about JS. JavaScript was created in May 1995 by Brendan Eich while at Netscape. Sometime between 1996 and 1997, Netscape took JavaScript to the ECMA standards organization to carve out and maintain a specification for the language to enable other browser vendors to implement based on the work they had done. ECMAScript is the name of the official standard with JavaScript being the most well-known implementation of the standard. Versions of JavaScript are defined by the specification that bears the official name of the language. For example, the first standard version of JavaScript was ECMAScript 1. It’s common practice now to abbreviate the standards specification to simply ESX (X will be changing). ES1, the first version of the JavaScript language standard, was released in June 1997 and after that, standards were kept evolving.

Es6

ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn’t used yet in web development.

React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. import, from, classand extends 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 the sample code as this tutorial has. If you want, this page has a good overview of ES2015 features.

What is JSX?

The other unusual thing in this code example is <View><Text>Hello world!</Text></View>. This is JSX (JavaScript + XML) – a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language (Like PHP in HTML). In React, this is reversed. JSX lets you write your markup language inside the code. It looks like HTML on the web, except instead of web things like <div> or <span>, you use React components. In this case, <Text> is a built-in component that just displays some text and View is like the <div> or <span>.

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.

For more Basic React Native components you can visit here.

If you have any doubt or you want to share something about the topic you can comment below or contact us here.

Hope you liked it. 🙂