{"id":3396,"date":"2022-03-12T07:04:00","date_gmt":"2022-03-12T10:04:00","guid":{"rendered":"https:\/\/uds.com.br\/blog\/?p=3396"},"modified":"2024-04-29T17:01:52","modified_gmt":"2024-04-29T20:01:52","slug":"react-native-o-que-e","status":"publish","type":"post","link":"https:\/\/uds.com.br\/blog\/react-native-o-que-e\/","title":{"rendered":"React Native: O que \u00e9, como funciona e quais as vantagens?"},"content":{"rendered":"\n

O React Native \u00e9 um framework h\u00edbrido utilizado para escrever aplicativos m\u00f3veis multiplataforma e que tem chamado a aten\u00e7\u00e3o dos desenvolvedores por suas caracter\u00edsticas, facilidades e uma s\u00e9rie de vantagens.<\/p>\n\n\n\n

Baseado em ReactJS \u2013 a biblioteca JavaScript do Facebook \u2013, o React Native \u00e9 focado na interface do usu\u00e1rio<\/strong><\/a>, o que faz com que os aplicativos carreguem mais rapidamente e tenham fluidez.<\/p>\n\n\n\n

N\u00e3o \u00e9 de se admirar que o React Native venha conquistando desenvolvedores e empresas ao oferecer uma maneira de construir aplicativos m\u00f3veis de forma mais simples e otimizada. Criado para ser compat\u00edvel com as plataformas Android e iOS, basta codificar uma vez para ambas, o que ajuda a economizar tempo de desenvolvimento.<\/p>\n\n\n\n

Por sua versatilidade, esse framework \u00e9 adotado com sucesso por centenas de empresas em todo o mundo, incluindo Tesla, Tableau, Discord, Airbnb, Uber, Microsoft, Bloomberg, Walmart e Meta\/Facebook (a \u201cm\u00e3e\u201d do React Native).<\/p>\n\n\n\n

\"O<\/figure>\n\n\n\n

Como e quando o React Native surgiu?<\/strong><\/h2>\n\n\n\n

O React Native nasceu em 2013 em um hackathon entre desenvolvedores do Facebook. Lan\u00e7ado ao p\u00fablico em 2015, em apenas tr\u00eas anos se tornou o segundo reposit\u00f3rio mais popular no GitHub, e hoje continua sendo um dos frameworks de desenvolvimento mais usados para construir aplicativos m\u00f3veis para iOS e Android. Ainda hoje pertence \u00e0 Meta Platforms, Inc., mas \u00e9 open source.<\/p>\n\n\n\n

\"O<\/figure>\n\n\n\n

\u201cHello World\u201d: Como o React Native funciona?<\/strong><\/h2>\n\n\n\n

O React Native possui um conjunto de componentes que interagem com as APIs nativas e operam simultaneamente em plataformas iOS e Android para criar um aplicativo m\u00f3vel com apar\u00eancia nativa.<\/p>\n\n\n\n

Em outras palavras, os aplicativos criados em React Native t\u00eam acesso direto a todas as APIs nativas e visualiza\u00e7\u00f5es oferecidas pelo sistema operacional m\u00f3vel subjacente. \u00c9 por isso que eles t\u00eam o mesmo efeito e desempenho de um aplicativo nativo.<\/p>\n\n\n\n

Ao construir um aplicativo em React Native, usa-se uma mistura de JavaScript e marca\u00e7\u00e3o XML: a sintaxe JSX. Ent\u00e3o, a partir dessa \u201cponte\u201d (chamada de \u201cNative Bridge\u201d), o React Native invoca as APIs de renderiza\u00e7\u00e3o nativas em Objective-C (para iOS) ou Java (para Android).<\/p>\n\n\n\n

A \u201cponte\u201d \u00e9 estruturada em C++\/Java e \u00e9 respons\u00e1vel pela comunica\u00e7\u00e3o entre o thread nativo e o JavaScript. Um protocolo personalizado faz a comunica\u00e7\u00e3o entre as propriedades entre as partes.<\/p>\n\n\n\n

Isso significa que o app ser\u00e1 renderizado usando componentes reais de interface do usu\u00e1rio m\u00f3vel, e n\u00e3o visualiza\u00e7\u00f5es Web, j\u00e1 que ele n\u00e3o direciona o navegador, mas atua dentro da pr\u00f3pria plataforma.<\/p>\n\n\n\n

J\u00e1 os componentes b\u00e1sicos, como Visualiza\u00e7\u00e3o, Texto e Imagem, s\u00e3o como blocos de constru\u00e7\u00e3o de interface do usu\u00e1rio nativos da plataforma.<\/p>\n\n\n\n

\"Exemplo
Exemplo do Componente Text dentro da hierarquia do React Native.
(Fonte: Facebook Open Source | Meta Platforms, Inc.)<\/figcaption><\/figure><\/div>\n\n\n\n
\"O<\/figure>\n\n\n\n

Quais as caracter\u00edsticas b\u00e1sicas do React Native?<\/strong><\/h2>\n\n\n\n

Al\u00e9m de acessar a interface e os recursos nativos do Android e iOS utilizando JavaScript, este framework tem outras propriedades marcantes e fundamentais que entusiasmam desenvolvedores:<\/p>\n\n\n\n

\u2022<\/strong> O c\u00f3digo produzido \u00e9 semelhante ao ReactJS para Web.
\u2022<\/strong> Possui a base de conhecimento compartilhada entre o desenvolvimento mobile e front-end.
\u2022<\/strong> Todo o c\u00f3digo desenvolvido \u00e9 convertido para a linguagem nativa do sistema operacional.
\u2022<\/strong> O mesmo c\u00f3digo \u00e9 utilizado para as plataformas iOS e Android.
\u2022<\/strong> Por ser multiplataforma e open source (dispon\u00edvel no GitHub<\/strong><\/a>), \u00e9 poss\u00edvel desenvolver aplica\u00e7\u00f5es personalizadas para qualquer outro sistema operacional (Windows, macOS ou Linux).<\/p>\n\n\n\n

\"O<\/figure>\n\n\n\n

Os componentes fundamentais do React Native<\/strong><\/h2>\n\n\n\n

O React Native fornece v\u00e1rios componentes principais integrados prontos para uso. Mas n\u00e3o \u00e9 preciso ficar limitado aos componentes e APIs b\u00e1sicos: h\u00e1 uma comunidade de desenvolvedores que disponibiliza milhares de bibliotecas para usos espec\u00edficos.<\/p>\n\n\n\n

A estrutura padr\u00e3o do React Native possui os seguintes componentes fundamentais:<\/p>\n\n\n\n

Visualiza\u00e7\u00f5es<\/strong><\/em>
O componente mais fundamental para construir uma interface de usu\u00e1rio.<\/td><\/tr>
Texto<\/strong>
<\/em>Um componente para exibir texto.<\/td><\/tr>
Imagem<\/strong><\/em>
Um componente para exibir imagens.<\/td><\/tr>
TextInput<\/strong>
<\/em>Um componente para inserir texto no aplicativo por meio de um teclado.<\/td><\/tr>
ScrollView<\/strong><\/em>
Fornece um cont\u00eainer de rolagem que pode hospedar v\u00e1rios componentes e exibi\u00e7\u00f5es.<\/td><\/tr>
Folha de estilo<\/strong><\/em>
Fornece uma camada de abstra\u00e7\u00e3o semelhante \u00e0s folhas de estilo CSS.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Apenas para dar uma ideia desta estrutura b\u00e1sica, o desenho do fluxo de componentes pode ser ilustrado assim:<\/p>\n\n\n\n

\"Esquema
Esquema da estrutura b\u00e1sica de componentes do React Native.
(Fonte: Facebook Open Source | Meta Platforms, Inc.)<\/figcaption><\/figure><\/div>\n\n\n\n

Por fim, veja esse exemplo de um projeto com o c\u00f3digo em React Native para a cria\u00e7\u00e3o de um app:<\/p>\n\n\n\n

\"Exemplo
Fonte: www.reactnative.dev<\/a><\/figcaption><\/figure><\/div>\n\n\n\n
\"O<\/figure>\n\n\n\n

Principais vantagens em utilizar o React Native<\/strong><\/h2>\n\n\n\n