Simple “Hello World”

Learn the Basics of React Native

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, state, and props. If you already know React, you still need to learn some React Native specific stuff, like the native components.

Simple “Hello World”

We must first build an app that does nothing except say, "Hello, world!"

We define the HelloWorldApp function, a functional component that behaves similarly to React for the Web. This function returns a View component with some styles and aText as its child.

The 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 is doing.

Code Explanation of React Native

  • import React, {Component} from 'react': imports the library and other components from react module and assigns them to the variable React.
  • Const instruction: sets to display the platform-specific message.
  • Export default class App extends Component: defines the classes that extend the React Component. The export default class modifier makes the class "public". This block of code defines the components that represent the user interface.
  • render(): a function that returns a React element.
  • return(): returns the result of layout and UI components.
  • View: a container that supports the layout accessibility controls is a fundamental component of building the UI.
  • Text: a React component for displaying text.
  • Style: a property used for styling the components using StyleSheet.
  • styles: used to design individual components.

    • {styles.instructions}>{instructions}:

  • const styles = StyleSheet.create({}): The StyleSheet class creates the style object that controls the layout and appearance of components. It is similar to Cascading Style Sheets (CSS) used on the Web.