"Hello World!" em React Native

Exemplo de código aplicado: Fazendo Hello World! em React-Native

Neste tutorial será demonstrado e explicado um código simples feito em React-Native que apresenta na tela inicial do aplicativo a frase "Hello World!". Primeiramente precisamos entender o que é um componente para entender o que esse código realmente gera. <\p>

Componentes são os partes essenciais de qualquer aplicativo React. Simplificando, um componente é uma classe ou função JavaScript que opcionalmente aceita entradas, como propriedades (props) e retorna um elemento React que descreve como uma seção da interface do usuário (interface do usuário) deve aparecer.<\p>

import React, {Component} 'from react';

Este import é utilzado pois a estrutura que o Hello World será apresentado é um tipo de componente, sendo este a unidade base de todas as aplicações React e React-Native.

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

Aqui são importados as tags JavaScript de react-native que serão utilizados no objeto da aplicação. View é a tag responsável por gerar um container em que a informação será apresentado e renderizada. Por se tratar de um container, ela pode ser usada mais de 1 vez em um mesmo componente como também pode ter View filhos dentro da mesma. Text é a tag responsável por inserir texto dentro do container que será visualizado.

Abaixo vemos a classe App que é um componente. Tudo que está dentro de render será o que será visto na interface. O return dado retornará o container que possui a frase "Hello World!" para o render que logo o exibirá.

export default class App extends Component{
      render(){
          return(<
             <View>
                <Text> Hello World!</Text>
             </View> 
          );
      }
}