O tutorial nativo do Ultimate React | Simplilearn

React Native é a estrutura mais popular para o desenvolvimento de aplicativos móveis de plataforma cruzada. Essa estrutura tornou possível criar aplicativos móveis nativos para várias plataformas simultaneamente. Você pode desenvolver aplicativos móveis completos para iOS e Android usando um idioma único, ou seja, JavaScript . Essa é uma grande vantagem, pois economiza muito tempo e dinheiro e também elimina as curvas acentuadas de aprendizado que estão associadas à linguagem de desenvolvimento nativa de cada plataforma (Java ou Kotlin para Android e C ou C ++ para iOS).

Este artigo o ajudará a compreender os conceitos básicos do React Native . Primeiro, veremos os aspectos fundamentais da estrutura. Depois que o básico tiver sido coberto, faremos nosso aplicativo móvel, um aplicativo de “tarefas”. Este aplicativo visa melhorar a produtividade, pois nos permitirá adicionar, gerenciar e remover tarefas. Vamos começar.

Domine os fundamentos do React, incluindo JSX, adereços, estado e eventos. Considere o React.js Certification Training Course . Inscreva-se agora!

Cobriremos os seguintes tópicos neste artigo:

1. O que é React Native?
2. Por que usar o React Native?
3. Visualização, estado, adereços e estilo
4. Reaja aplicativos nativos vs. aplicativos específicos da plataforma
5. Pré-requisitos do React Native
6. Tendências da indústria
7. Crie um aplicativo nativo React— Tarefas:
1. Configure o ambiente de desenvolvimento
2. Crie componentes do aplicativo
3. Resuma as etapas, aproveite o resultado

O que é React Native?

React Native é uma estrutura JavaScript usada para desenvolver aplicativos móveis para iOS e Android. Ele permite que você crie aplicativos para dispositivos móveis com compatibilidade cruzada usando apenas JavaScript, e você não precisa se preocupar em aprender linguagens de desenvolvimento de aplicativos específicas da plataforma, como Kotlin para Android ou Swift para iOS.

Os aplicativos React Native são aplicativos móveis reais e não apenas applets da web. O Facebook lançou a primeira versão do React Native em março de 2015.

Fig: React Native to Platform

Por que usar o React Native?

• Multiplataforma
  

  Uma das vantagens mais significativas do React Native é que você pode desenvolver um aplicativo para os ecossistemas Android e iOS simultaneamente, escrevendo o mesmo código com apenas algumas modificações para cada plataforma.

• <”JavaScript

  Não há necessidade de conhecer as linguagens usadas para o desenvolvimento de aplicativos específicos da plataforma, pois o React Native usa apenas JavaScript, provavelmente a linguagem de programação mais popular no momento, para o desenvolvimento de aplicativos móveis.

• <✓Performance

  O React Native permite o desenvolvimento rápido de aplicativos móveis, uma vez que um código semelhante é usado para aplicativos para ambas as plataformas. Também facilita um recurso de recarregamento a quente que garante que pequenas alterações feitas no aplicativo fiquem imediatamente visíveis para o desenvolvedor.

• Comunidade de grandes desenvolvedores

  Uma enorme comunidade de desenvolvedores garante que todas as consultas sejam resolvidas a tempo e, portanto, suporte adequado está disponível para a estrutura React Native.

• Está cada vez melhor

  A comunidade, conforme mencionado acima, também continua atualizando o React Native com novas funcionalidades e garantindo que bugs não ocorram.

• Usado por muitas empresas

  Embora a estrutura seja relativamente nova, muitas empresas já migraram os aplicativos para esta estrutura. Outras empresas estão procurando usar a estrutura para acelerar o processo de desenvolvimento e manutenção.

• Excelentes oportunidades de carreira

  O React Native se tornou muito popular recentemente devido a vantagens como compatibilidade cruzada. Consequentemente, essa popularidade levou a uma alta demanda por desenvolvedores React Native.

Visualização, estado, adereços e estilo

<”Ver

O View é um componente elementar do React Native para construir uma interface de usuário. É um contêiner que oferece suporte a layout com flexbox, estilo, manipulação de toque e controles de acessibilidade. Ele mapeia diretamente para a visualização nativa, semelhante a qualquer plataforma no aplicativo React Native em que esteja sendo executado.

O código dentro do bloco “Visualizar” é enviado para a tela

<”Estado

Existem dois tipos de dados que controlam um componente no React Native: props e state. Para dados que serão alterados no futuro, usamos o estado. O estado contém os dados ou informações sobre o componente. Ele determina o comportamento do componente e como ele será renderizado.

• O objeto “estado” contém os dados que são renderizados na tela
• O bloco de código “Texto” renderiza o estado na tela

<✓Props

Props é a abreviatura de Propriedades . Os componentes podem ser personalizados no momento da criação usando diferentes parâmetros, e esses parâmetros são conhecidos como adereços. Os suportes são passados ​​de um contêiner para outro como meio de passar dados entre eles.

• Na aula “programas de TV”, os objetos de cena são passados ​​para outro componente chamado “Assistir”
• Na aula “Assistir”, a proposta recebida é usada no componente

<”Estilo

React Native usa JavaScript para definir o estilo do aplicativo. Todos os componentes principais usam um adereço denominado”estilo”. Os nomes e valores de estilo são semelhantes ao CSS que funciona para a web. Para estilizar nossos componentes, podemos usar o estilo embutido ou usar o StyleSheet, que é um componente React Native.

• O estilo embutido é usado para o texto “estilo embutido”
• O objeto de folha de estilo é criado para estilizar os textos, “azul” e “bigBlack”

React aplicativos nativos VS aplicativos específicos da plataforma

Estas são as diferenças mais críticas entre o React Native e os aplicativos móveis específicos da plataforma:

	React Native	<”Plataforma-Específica
Multiplataforma	Os aplicativos funcionam em iOS e Android	O aplicativo é feito para uma plataforma específica
Desenvolvedores	Desenvolvedores com grande experiência em desenvolvimento web	Desenvolvedores com forte conhecimento de plataforma
Tempo de construção	Rápido	Lento
Aplicativos	Simples	Complexo
Suporte de longo prazo	Não recomendado porque a estrutura pode ser encerrada	Recomendado para investimento de longo prazo
Recursos	Melhor para pequenas equipes de desenvolvimento com recursos limitados	Melhor para resmas de desenvolvimento experientes com recursos adequados

React Native Prerequisites

Aqui estão algumas ideias e conceitos com os quais você deve estar familiarizado antes de começar a trabalhar no React Native:

• Você deve estar familiarizado com os conceitos de programação como funções, objetos, matrizes e, em menor grau, classes
• Você deve ter um conhecimento básico de JavaScript
• Você deve ter alguma familiaridade com HTML e CSS
• Por fim, se você já trabalhou com o React antes, já sabe muito sobre o React Native e não deve haver nenhum problema em trabalhar com ele

Criar um aplicativo nativo React: aplicativo de tarefas

Faremos nosso aplicativo móvel e o chamaremos de To-do . Este aplicativo nos permitirá adicionar e gerenciar tarefas no aplicativo. Neste tutorial, vamos nos concentrar na execução do aplicativo no sistema operacional Android, para que o código seja otimizado de acordo. Recomendamos o uso de um celular Android para este tutorial.

Nosso aplicativo móvel final será semelhante a este. Vamos começar!

Configurar o ambiente de desenvolvimento

“Expo é um framework e uma plataforma para aplicações React universais. É um conjunto de ferramentas e serviços criados em torno de plataformas React Native e nativas que ajudam você a desenvolver, construir, implantar e iterar rapidamente em aplicativos iOS, Android e web a partir da mesma base de código JavaScript. ”– Documentação da Expo

Navegue para https://expo.io/learn . Usaremos o framework Expo para desenvolver nosso aplicativo React Native. Lá você encontrará todas as instruções de que precisa para começar a criar.

• O primeiro passo não é relevante em nosso caso; então, vamos pular e começar diretamente com a Etapa 02, que é instalar o nodeJS no computador.

• Após a instalação do nodeJS, precisamos seguir a Etapa 03 e obter a ferramenta de linha de comando para Expo; para isso, digite o seguinte comando no prompt de comando ou terminal

npm install Expo-cli–global

• Após a ferramenta Expo-cli ser instalada, precisamos seguir a Etapa 04 e criar nosso projeto. Para fazer isso, digite o seguinte comando no prompt de comando ou terminal.

expo init todo-app

A seguir, escolha o branco nesta tela para um aplicativo em branco enquanto inclui os recursos de fluxo de trabalho da Expo.

Digite o nome do seu aplicativo e pressione Enter para continuar a configurá-lo.

• Para iniciar o aplicativo, você pode navegar até a pasta do projeto recém-criada e digitar “npm start”. Para interromper o aplicativo, pressione Ctrl + C .

cd todo-app npm start

O servidor de desenvolvimento começará a funcionar e uma nova guia será aberta no seu navegador com a tela do gerenciador Expo.

Existem duas maneiras de visualizar o aplicativo agora:

• Você pode executar o aplicativo em um emulador Android, que pode ser obtido instalando o Android Studio no computador.
• Ou você pode instalar o aplicativo Expo em seu telefone e escanear o código QR para executar o aplicativo no telefone. O aplicativo de tarefas será carregado e atualizado conforme você fizer alterações no código.

Instale um editor de texto de sua escolha. Estamos usando o Código do Visual Studio neste tutorial. Ainda assim, você também pode usar outros editores como Atom e Sublime Texto se estiver mais confortável com eles.

Agora temos todas as ferramentas de que precisamos para criar um novo aplicativo React Native. Já criamos um, o aplicativo de tarefas. Então, vamos começar criando os componentes de nosso aplicativo móvel.

Criar componentes do aplicativo

Semelhante ao React, tudo aqui é um componente. Tudo o que você vê aqui é um componente separado que foi combinado para criar um aplicativo móvel completo. A seguir estão os componentes que criaremos para este aplicativo:

• <”App

  Este componente atuará como um contêiner para todos os outros componentes se reunirem e fornecerem um aplicativo completo

• <✓Header

  Como o nome sugere, este componente será o cabeçalho do aplicativo móvel

• Imagem de exibição

  Este componente é usado aqui para exibir a imagem na tela principal

• Item de tarefa

  Cada tarefa adicionada é um componente separado

• Entrada de tarefas

  Este componente é usado para adicionar tarefas ao aplicativo

É muito importante visualizar um aplicativo React Native em termos de componentes antes de começar a trabalhar nele, e é exatamente isso que estamos fazendo aqui.

Vamos começar agora com o desenvolvimento do aplicativo de tarefas:

• Abra a pasta do projeto no editor de texto e, dentro da pasta src, crie uma pasta de componentes na qual adicionaremos todos os nossos componentes.

1. <”Header:

1. Dentro da pasta de componentes, crie um novo arquivo chamado Header.js
2. Adicione o seguinte código nesse arquivo. Vemos abaixo como o código funciona.

importe React de”react”; importe {StyleSheet, View, Text} de”react-native”; const Header=props=> { devolução ( {props.title} ); }; const styles=StyleSheet.create ({ cabeçalho: { largura:”100%”, altura: 100, paddingTop: 40, backgroundColor:”roxo”, alignItems:”center”, justifyContent:”center” }, headerTitle: { cor:”branco”, fontSize: 20 } }); exportar cabeçalho padrão;

1. Importar React. (Linha 1)
2. Importar componentes do React Native. (Linha 2)
3. Retorne o texto do cabeçalho junto com o estilo. (Linhas 5-9)
4. Adicione um estilo para criar o cabeçalho usando StyleSheet. (Linhas 12-25)
5. Exporte o componente. (Linha 27)

2. Imagem de exibição:

1. Dentro da pasta de componentes, crie um novo arquivo chamado DisplayImage.js
2. Adicione o seguinte código nesse arquivo. Vemos abaixo como o código funciona.

importe React de”react”; importe {Image, StyleSheet} de”react-native”; const DisplayImage=props=> { if (props.taskStatus.length <1) { devolução ( ); } outro { retornar nulo; } }; const styles=StyleSheet.create ({ imagem: { largura: 250, altura: 250, margem: 80, marginTop: 250 } }); exportar DisplayImage padrão;

1. Importar React. (Linha 1)
2. Importar componentes nativos do React. (Linha 2)
3. Condição If (renderização condicional) para exibir a imagem apenas quando não houver tarefa. (Linhas 5-11)
4. A fonte da imagem é o local da imagem de onde ela será importada. (Linha 7)
5. Adicione estilo usando StyleSheet para definir o tamanho e o alinhamento da imagem. Você pode ajustar o tamanho da imagem de acordo com o tamanho da tela. (Linhas 14-21)
6. Exporte o componente. (Linha 23)

3. Item de tarefa:

1. Dentro da pasta de componentes, crie um novo arquivo chamado TodoItem.js
2. Adicione o seguinte código a esse arquivo. Vemos abaixo como o código funciona.

import React, {useState} de”react”; importar { Ver, Texto, StyleSheet, TouchableOpacity, CheckBox } de”react-native”; const TodoItem=props=> { const [check, setCheck]=useState (false); devolução ( {props.title} setCheck (! check)}/> onPress={props.onDelete.bind (this, props.id)} style={styles.button} > Delete ); }; const styles=StyleSheet.create ({ listItem: { preenchimento: 10, backgroundColor:”#eee”, borderColor:”preto”, borderWidth: 1, largura:”60%” }, tela: { flexDirection:”row”, marginTop: 30, justifyContent:”espaço entre”, largura:”100%” }, botão: { display:”flex”, altura: 40, borderRadius: 5, preenchimento: 10, backgroundColor:”red”, alignItems:”center”, justifyContent:”center” }, botão Verde: { display:”flex”, altura: 40, borderRadius: 5, preenchimento: 10, backgroundColor:”verde”, alignItems:”center”, justifyContent:”center” }, texto: { fontSize: 14, cor:”branco” } }); exportar TodoItem padrão;

1. Importar React e gancho useState. (Linha 1)
2. Importar componentes nativos do React. (Linhas 2-8)
3. Defina um estado para alternar a caixa de seleção. (Linha 11)
4. Renderizar itens da lista, caixa de seleção e botão Excluir. (Linhas 13-25)
5. Adicione estilos usando o StyleSheet aos componentes. (Linhas 28-64)
6. Exporte o componente. (Linha 66)

4. Entrada de tarefas:

1. Dentro da pasta de componentes, crie uma nova pasta chamada TodoInput.js
2. Adicione o seguinte código a esse arquivo. Vemos abaixo como o código funciona.

import React, {useState} de”react”; importar { Ver, TextInput, Botão, StyleSheet, Modal, Alerta, Imagem } de”react-native”; importe o cabeçalho de”./Header”; const TodoInput=props=> { const [EnterTask, setEnteredTask]=useState (“”); const TodoInputHandler=entrouText=> { setEnteredTask (enterText); }; const addTaskHandler=()=> { props.onAddTask (entrouTask); setEnteredTask (“”); }; const checkInput=startedTask=> { if (enterTask.length> 0) addTaskHandler (); outro { Alert.alert (“Erro”,”Insira uma tarefa”, [{text:”OK”}], { cancelável: falso }); } }; devolução ( placeholder=”Tarefa” style={styles.input} onChangeText={TodoInputHandler} valor={entrouTarefa} /> título=”CANCELAR” cor=”vermelho” onPress={props.onCancel} > título=”ADICIONAR” cor=”verde” onPress={()=> checkInput (startedTask)} /> ); }; const styles=StyleSheet.create ({ inputContainer: { flex: 1, justifyContent:”center”, alignItems:”center” }, entrada: { largura:”80%”, borderColor:”preto”, borderWidth: 1, preenchimento: 10, marginBottom: 10 }, buttonContainer: { flexDirection:”row”, justifyContent:”space-around”, largura:”60%” }, botão: { largura:”40%” } }); exportar TodoInput padrão;

1. Importar React e gancho useState. (Linha 1)
2. Importar componentes nativos do React. (Linhas 2-10)
3. Componente Import Header. (Linha 11)
4. Defina um estado, entradoTexto, para adicionar uma tarefa ao nosso aplicativo. (Linha 14)
5. As funções são nomeadas apropriadamente de acordo com as tarefas que executam:
   > TodoInputHandler: define o estado da tarefa digitada para Texto inserido. (Linhas 16-18)
   > addTaskHandler: limpa o campo de texto após adicionar uma tarefa. (Linhas 20-23)
   > checkInput: verifica se o usuário entrou na tarefa ou deixou o campo em branco. (Linhas 25-32
6. Retorna um modal (componente nativo react) que contém o campo de entrada e os botões. (Linhas 35-62)
7. Adicione estilos usando o StyleSheet aos componentes. (Linhas 66-87)
8. Exporte o componente. (Linha 89)

5. Aplicativo:

1. Substitua o código padrão no arquivo App.js pelo código a seguir. Mostramos abaixo como o código funciona.

import React, {useState} de”react”; importe {StyleSheet, View, Button, FlatList, Image} de”react-native”; importe TodoItem de”./components/TodoItem”; importe TodoInput de”./components/TodoInput”; importe DisplayImage de”./components/DisplayImage”; importe o cabeçalho de”./components/Header”; exportar a função padrão App () { const [tasks, setTasks]=useState ([]); const [addTasks, setAddTasks]=useState (false); const addTaskHandler=taskTitle=> { setTasks (currentTasks=> [ … tarefas atuais, {id: Math.random (). toString (), valor: taskTitle} ]); setAddTasks (false); }; const deleteTaskHandler=taskId=> { setTasks (currentTasks=> { return currentTasks.filter (task=> task.id!==taskId); }); }; const canceltaskAdditionHandler=()=> { setAddTasks (false); }; devolução ( setAddTasks (true)}> visível={addTasks} onAddTask={addTaskHandler} onCancel={canceltaskAdditionHandler} /> keyExtractor={(item, índice)=> item.id} dados={tarefas} renderItem={itemData=> ( title={itemData.item.value} onDelete={deleteTaskHandler} id={itemData.item.id} /> )} > ); } const styles=StyleSheet.create ({ tela: { paddingTop: 70, paddingHorizontal: 70 }, lista de telas: { marginLeft: 20, marginRight: 20 } });

1. Importar React e gancho useState. (Linha 1)
2. Importar componentes nativos do React. (Linha 2)
3. Importe esses componentes do projeto para o componente do aplicativo: (Linhas 4-7)
   > TodoItem
   > TodoInput
   > DisplayMessage
   > Cabeçalho
4. Defina estados iniciais para os dados a serem renderizados. (Linhas 10-11)
5. As funções são nomeadas apropriadamente de acordo com as tarefas que executam:
   > addTaskHandler: adiciona tarefas à lista. (Linhas 13-19)
   > deleteTaskHandler: exclui tarefas da lista. (Linhas 21-25)
   > canceltaskAdditionHandler: cancela a adição de tarefas à lista. (Linhas 27-29)
6. Retorne os componentes enquanto passa acessórios para cada componente. (Linhas 31-58)
7. Adicione estilo aos componentes usando StyleSheet. (Linhas 61-70)

Concluímos o desenvolvimento de nosso aplicativo móvel de tarefas e ele deve estar funcionando conforme ilustrado abaixo. Vamos resumir tudo o que fizemos para criar este aplicativo móvel.

Resumo das etapas:

1. Configure um ambiente para o desenvolvimento do aplicativo
2. Instale o aplicativo Expo no dispositivo móvel para visualizar o aplicativo em tempo real
3. Visualize o aplicativo em termos de componentes e, em seguida, mantenha a estrutura do projeto de acordo no editor de texto
4. Adicione todos os componentes ao projeto
5. Certifique-se de que cada componente funcione conforme o esperado
6. Aproveite o resultado e fique à vontade para ajustar o design e a funcionalidade que desejar

Agora criamos um aplicativo móvel totalmente funcional usando React Native que funciona e tem uma ótima aparência! Esperamos que você tenha conseguido seguir todas as instruções facilmente e que possa sentar e aproveitar suas realizações!

Tendências do setor

O React Native se tornou muito popular no mundo do desenvolvimento de aplicativos para dispositivos móveis e essa popularidade está aumentando constantemente.

• Com a adoção do React Native em ascensão, o mundo digital precisa de desenvolvedores com mais conhecimento. Como resultado, os salários do desenvolvedor React Native estão no lado mais alto do espectro quando comparados com os de outros desenvolvedores front-end.

The average salary for a React Native developer across the United States is a whopping USD 91,000 per year!

The average salary for a React Native developer in India is ₹7,25,000 per year!

• React Native is a relatively new tool in the world of app development but has already been adopted by many well-known companies such as Facebook, Instagram, Airbnb, and Netflix.

This brings us to the end of our tutorial. Remember, React Native is the most popular framework for building mobile applications, and it is here to stay. The framework’s increasing popularity has led to a growing need for more React Native developers, a demand that shows no signs of abating, making this a very attractive career choice. To learn more, check out our React.js Training Course. 

Source link