Meu Primeiro App com React Native - #05 States e Hooks

Nessa videoaula entenderemos outros dois conceitos importantes pra se trabalhar com React Native que são os states e os hooks.

O que são States e Hooks no React Native?

Estados são características dos componentes que mudam no ciclo de vida da aplicação. Um exemplo simples para entender os estados são em uma aplicação de cronômetro. A cada segundo o o estado deve ser alterado.

Para utilizar estados podemos usar classes e mais recentemente podemos utilizar hooks em funções.

Os hooks, por sua vez, facilitam o uso de diversos recursos do React através de funções.

Para utilizar hooks temos de importá-los no top leve do nosso arquivo:

import React, {useState,useEffect} from 'react';

Para se criar um estado, utilizamos a destruturação de arrays atrelada ao hook useState conforme exemplo abaixo:

const [product,setProduct]=useState('valor_inicial');

Para alterar o valor de um estado utilizamos o setState através de um evento ou através do hook useEffect:

useEffect(()=>{
   if(quantity > 0){
       Alert.alert('Novo produto foi adicionado');
   }
},[quantity]);

Abaixo segue um exemplo simples do uso de hooks e states:

import React, {useState,useEffect} from 'react';
import { Text, View, Button, Alert } from 'react-native';
import {css} from './assets/css/Css';
import Page from './views/Page';

export default function App() {
    const [product,setProduct]=useState('bola');
    const [quantity,setQuantity]=useState(0);

    useEffect(()=>{
       if(quantity > 0){
           Alert.alert('Novo produto foi adicionado');
       }
    },[quantity]);

    const props={
        empresa:'Webdesign em Foco',
        name:'Thiago',
        produto: product,
        quantidade: quantity
    };

  return (
    <View style={css.container}>
        <Text>{product}</Text>
        <Page {...props} />
        <Button title='Adicionar produtos' onPress={()=>setQuantity(quantity + 1)} />
    </View>
  );
}

Por hoje é só turma. Sucesso nos códigos e na vida!

Precisando de assessoria? webdesignemfoco@gmail.com