Estrutura Básica – React Native

Os componentes do React são blocos de construção que podem receber dados, renderizar elementos na tela e interagir com o usuário.

Existem dois tipos principais de componentes do React: componentes de classe e componentes funcionais.

Os componentes de classe são classes do JavaScript que herdam da classe base do React chamada Component.

Os componentes funcionais são funções do JavaScript que retornam elementos do React.

Para iniciar o projeto podemos utilizar os componentes de função ou de classes.

Neste primeiro exemplo vamos utilizar os componentes de função

import React from 'react';
//importar o React- native da biblioteca do React

//importar os componentes do react-native que iremos utilizar no app
import {View, Text} from 'react-native';

View é o equivalente ao Div do HTML, é utilizado para organizar e posicionar a exibição dos componetes

export default function NomeFuncao () {
//export default faz a montagem (render) dos comandos html e Javascript utilizados
//return vai retornar os componetes que serão definidos
return (
	<View>

	</View>

);
};

Para exibir um texto na tela, vamos utilizar um componente de texto chamado Text que foi importado previamente no início do código na linha import {View, Text} from ‘react-native’;

export default function NomeFuncao () {
//export default faz a montagem (render) dos comandos html e Javascript utilizados
//return vai retornar os componetes que serão definidos
		return (
					<View>
						<Text> SENAI DE SUZANO </Text>
						<Text> Washington </Text>
					</View>
				);
};

Esta é a estrutura básica do app em React-native utilizando componentes de função.

Componentes de Classe

Utilizando componentes de classe devemos escrever todo o código dentro de um render.

import React, {Component} from 'react';
//importar o React-native da biblioteca do React

//importar os componentes do react-native que iremos utilizar no app
import {View, Text} from 'react-native';

export default class NomeFuncao extends Component {
  render () {
    return (

O restante do código é comum para os componentes de classe ou de função.