React Native First Application Hello World

React Native First Application Hello World

Steps to create React Native application

  • First, you have to start your emulator (Android Emulator) and make it live.

  • Create a directory (ReactNative) in your drive.

  • Open "Command Prompt" or "Terminal" and go to your ReactNative directory.

  • Write a command npx react-native init HelloWorld to initialize your app "HelloWorld".

  • Go to your directory location "HelloWorld" and run the command react-native run-android. It will start Node server and launch your application in a virtual device emulator.

React Native Code Explanation

  • import React, {Component} from 'react': imports the library and other components from react module and assign then to variable React.

  • 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. It is a fundamental component for 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.

  • 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.