Introdução ao React Native: Componentes e Estrutura

React Native Sumário O que é ReactNative Principais componentes da biblioteca View ScrollView Images FlatList Forms Estrutura básica de um componente Props State React Fundamentos Props Written in JavaScriptrendered with native code Escrito em JavaScript renderizado com código nativo As primitivas do React são renderizadas na interface da plataforma nativa o que significa que seu aplicativo usa as mesmas APIs da plataforma nativa que outros aplicativos Hello Props Componentes Nativos View Text and Image Blocos de construção da UI User Interface Quem usa React Native React Native está sendo usado em milhares de aplicativos mas é provável que você já o tenha usado em um desses aplicativos Principais Componentes Principais componentes da biblioteca View ScrollView Images Text FlatList TextInput Forms Principais Componentes httpsreactnativedevdocsintroreactnativecomponents Componente View O componente mais fundamental para a criação de uma interface do usuário IU a View é um contêiner que suporta layout com flexbox styleestilo manipulação de toque e controles de acessibilidade Views mapeiam diretamente para a view nativa equivalente em qualquer plataforma em que o React Native esteja executando seja UIView div androidview etc A View foi projetado para ser aninhado dentro de outras views e pode ter de 0 a muitos filhos de qualquer tipo Componente View Este exemplo cria uma View que contém duas caixas coloridas e um componente de texto em uma linha com preenchimentopadding padding preencher o espaço em torno de um elemento httpsreactnativedevdocsview Componente View httpsreactnativedevdocsview httpsreactnativedevdocsflexbox Componente Text httpsreactnativedevdocstext Text é um componente React para exibir texto Text suporta nesting styling and touch handling Componente Image httpsreactnativedevdocsimage Um componente React para exibir diferentes tipos de imagens incluindo imagens de rede recursos estáticos imagens locais temporárias e imagens do disco local como o rolo da câmera Componente Image httpsreactnativedevdocsimage Um componente React para exibir diferentes tipos de imagens incluindo imagens de rede recursos estáticos imagens locais temporárias e imagens do disco local como o rolo da câmera Componente ScrollView httpsreactnativedevdocsscrollview Componente que envolve a plataforma ScrollView enquanto fornece integração com o sistema de resposta de travamento por toque Componente TextInput httpsreactnativedevdocstextinput Componente de entrada de texto via teclado Componente FlatList lista com várias linhas httpsreactnativedevdocsflatlist Uma interface de alto desempenho para renderizar listas simples e básicas suportando os recursos mais úteis Totalmente multiplataforma Modo horizontal opcional Retornos de chamada de visibilidade configuráveis Suporte de cabeçalho Header Suporte de rodapé Footer Suporte separador Separator Puxe para Atualizar Rolagem Suporte para ScrollToIndex Suporte a várias colunas Multiple Column Componente FlatList httpsreactnativedevdocsflatlist FlatList renderiza itens lentamente quando estão prestes a aparecer e remove itens que rolam para fora da tela para economizar memória e tempo de processamento FlatList também é útil se você deseja renderizar separadores entre seus itens várias colunas carregamento infinito de rolagem ou qualquer número de outros recursos compatíveis com ele Componente FlatList httpsreactnativedevdocsflatlist Componente FlatList httpsreactnativedevdocsflatlist Componente SectionList httpsreactnativedevdocssectionlist Uma interface de alto desempenho para renderizar listas seccionadas Componente SectionList httpsreactnativedevdocssectionlist Uma interface de alto desempenho para renderizar listas seccionadas React Fundamentos httpsreactnativedevdocsintroreact Componentes JSX props state httpsreactjsorgdocsgettingstartedhtml React Fundamentos Componentes httpsreactnativedevdocsintroreact React Fundamentos Componentes httpsreactnativedevdocsintroreact React Fundamentos Componentes httpsreactnativedevdocsintroreact Function Components X Class Components React Fundamentos Function Components httpsreactnativedevdocsintroreact Para definir seu componente Cat primeiro use a importação JavaScript para importar React e o Componente Text do React Native Seu Componente começa como uma função React Fundamentos Function Components httpsreactnativedevdocsintroreact Você pode pensar em componentes como uma plantamolde Tudo o que uma função componente retorna é renderizado como um elemento React Os elementos React permitem que você descreva o que deseja ver na tela Aqui o componente Cat renderiza um elemento Text Você pode exportar sua função componente em JavaScript com export default para uso em todo o aplicativo da seguinte forma React Fundamentos Function Components httpsreactnativedevdocsintroreact Você pode pensar em componentes como uma plantamolde Tudo o que uma função componente retorna é renderizado como um elemento React Os elementos React permitem que você descreva o que deseja ver na tela Aqui o componente Cat renderiza um elemento Text Você pode exportar sua função componente em JavaScript com export default para uso em todo o aplicativo da seguinte forma React Fundamentos Function Components httpsreactnativedevdocsintroreact A instrução de exportação export é usada ao criar módulos JavaScript para exportar funções objetos ou valores primitivos do módulo para que possam ser usados por outros programas com a instrução de importação import O que vimos é apenas uma das formas de exportar seu componente Dependendo da estrutura de arquivo do seu App você deve precisar usar uma convenção diferente Veja mais dicas aqui httpsmediumcomdailyjsjavascriptmodulecheatsheet7bd474f1d829 Agora observe mais de perto essa declaração de retorno TextHello I am your catText está usando um tipo de sintaxe JavaScript que facilita a escrita de elementos JSX React Fundamentos JSX httpsreactnativedevdocsintroreact Agora observe mais de perto essa declaração de retorno TextHello I am your catText está usando um tipo de sintaxe JavaScript que facilita a escrita de elementos JSX React e React Native usam JSX uma sintaxe que permite escrever elementos dentro do JavaScript da seguinte forma TextHello I am your catText Os documentos do React têm um guia abrangente sobre JSX que você pode consultar para aprender ainda mais httpsreactjsorgdocsjsxindepthhtml Como JSX é JavaScript você pode usar variáveis dentro dele Aqui você está declarando um nome para o gato name e incorporandoo com chaves dentro de Text React Fundamentos JSX httpsreactnativedevdocsintroreact Como JSX é JavaScript você pode usar variáveis dentro dele Aqui você está declarando um nome para o gato name e incorporandoo com chaves dentro de Text React Fundamentos JSX httpsreactnativedevdocsintroreact Qualquer expressão JavaScript funcionará entre chaves incluindo chamadas de função como getFullNameRum Tum Tugger React Fundamentos JSX httpsreactnativedevdocsintroreact Como o JSX está incluído na biblioteca do React ele não funcionará se você não importar o React from react na parte superior do seu arquivo import React from react primeira linha do arquivo React Fundamentos Custom Components httpsreactnativedevdocsintroreact Você já conheceu os principais componentes do React Native O React permite aninhar esses componentes um dentro do outro para criar novos componentes Esses componentes reutilizáveis e aninhados estão no centro do paradigma React Por exemplo você pode aninhar Text e TextInput dentro de uma View abaixo e o React Native os renderizará juntos React Fundamentos Custom Components httpsreactnativedevdocsintroreact React Fundamentos Múltiplos Components httpsreactnativedevdocsintroreact Você pode renderizar esse componente Cat várias vezes e em vários locais sem repetir seu código usando Cat React Fundamentos Múltiplos Components React Fundamentos Múltiplos Components httpsreactnativedevdocsintroreact Qualquer componente que renderize outros componentes é um componente pai Aqui o Cafe é o componente pai e cada Cat é um componente filho Você pode colocar quantos Cat quiser no seu Cafe Cada Cat renderiza um elemento exclusivo que você pode personalizar com acessórios React Fundamentos Props httpsreactnativedevdocsintroreact Props é a abreviação de propertiespropriedades Props permitem personalizar os componentes do React Por exemplo aqui você passa para cada Cat um nome diferente para Cat renderizar React Fundamentos Props httpsreactnativedevdocsintroreact Props é a abreviação de propertiespropriedades Props permitem personalizar os componentes do React A maioria dos componentes pode ser customizada quando criados com parâmetros diferentes Esses parâmetros de criação são chamados de props propertiespropriedades Seus próprios componentes também podem usar props Isso permite criar um único componente que pode ser usado em muitos locais diferentes do seu aplicativo com propriedades ligeiramente diferentes em cada local Use props NAME em seus componentes funcionais ou thisprops NAME em seus componentes de classe Aqui está um exemplo React Fundamentos State httpsreactnativedevdocsintroreact httpsreactnativedevdocstutorialcomponents Embora você possa pensar em props como argumentos usados para configurar como os componentes são renderizados state o estado é como o armazenamento de dados pessoais de um componente Sate é útil para manipular dados que mudam com o tempo ou provenientes da interação do usuário Estado dá memória aos seus componentes Como regra geral use props para configurar um componente quando ele for renderizado Use state para acompanhar os dados de componentes que você espera alterar ao longo do tempo React Fundamentos State httpsreactnativedevdocsintroreact httpsreactnativedevdocstutorialcomponents Diferente de props que são somente leitura e não devem ser modificados state permite que os componentes do React alterem sua saída ao longo do tempo em resposta a ações do usuário respostas de rede e qualquer outra coisa Qual é a diferença entre state e props no React Em um componente React os props são as variáveis que passamos de um componente pai para um componente filho Da mesma forma o estado também é uma variável com a diferença de que eles não são passados como parâmetros mas sim que o componente inicializa e os gerencia internamente React Fundamentos State function component httpsreactnativedevdocsintroreact httpsreactnativedevdocstutorialcomponents Você pode adicionar state um estado a um componente chamando o Hook gancho useState do React Um Hook é um tipo de função que permite conectarse aos recursosfeatures do React Por exemplo useState é um Hook que permite adicionar estado as funções componentes Você pode aprender mais sobre outros tipos de ganchos na documentação do React httpsreactjsorgdocshooksintrohtml React Fundamentos State function component React Fundamentos State function component httpsreactnativedevdocsintroreact httpsreactnativedevdocstutorialcomponents Primeiro você deseja importar o useState do React da seguinte maneira import React useState from react Em seguida você declara o estado do componente chamando useState dentro de sua função Neste exemplo useState cria uma variável de estado isHungry e cria também o método setIsHungry isHungry getter e setIsHungry setter useState retorna uma partupla o valor corrente do estado E uma função que permite atualizar este estado React Fundamentos State function component httpsreactnativedevdocsintroreact httpsreactnativedevdocstutorialcomponents Em seguida você adiciona o componente Button e fornece um prop onPress React Fundamentos State function component httpsreactnativedevdocsintroreact httpsreactnativedevdocstutorialcomponents Agora quando alguém pressiona o botão o onPress é acionado chamando o setIsHungry false Isso define a variável de estado isHungry como false Quando isHungry é false a prop do Button que está desativadadesabilitada é definida como true e seu título também muda React Fundamentos State function component httpsreactnativedevdocsintroreact httpsreactnativedevdocstutorialcomponents Você deve ter notado que embora isHungry seja uma const é aparentemente reatribuível O que está acontecendo é que quando uma função de configuração de estado como setIsHungry é chamada seu componente será renderizado novamente Nesse caso a função Cat será executada novamente e desta vez useState nos fornecerá o próximo valor de isHungry Por fim coloque seus gatos dentro de um componente Cafe React Fundamentos State function component httpsreactnativedevdocsintroreact httpsreactnativedevdocstutorialcomponents Veja o e acima Esses bits de JSX são fragmentos fragments httpsreactjsorgdocsfragmentshtml Os elementos JSX adjacentes devem ser agrupados em uma tag anexa Os fragmentos permitem fazer isso sem aninhar um elemento container desnecessário como a View