Como migrar do React para o React Native

React Native é uma framework que usamos para desenvolver aplicativos para celular. O seu diferencial é o fato de que podemos criar aplicativos para iOS e Android usando a mesma linguagem que usamos no desenvolvimento web: o JavaScript/TypeScript. Isso faz com que seja possível criar apps para diferentes ambientes, utilizando uma única base de código, o que é uma enorme vantagem em termos de flexibilidade e tempo de desenvolvimento.

Ou seja, para quem já tem experiência com desenvolvimento web, a curva de aprendizado do React Native é suave, uma vez que muitos dos conceitos e padrões são praticamente iguais aos que já usamos no desenvolvimento web. Quais devem ser os primeiros passos para desenvolver aplicativos?

Configurando o ambiente para emular o celular

Para testar seu aplicativo no Android, é necessário ter um emulador Android instalado em seu computador. A maneira mais fácil de obter um emulador Android em seu computador é baixar e instalar o Android Studio, que já inclui o Android Emulator.

Após instalar o Android Studio, abra-o e clique em Configure no menu de boas-vindas. Em seguida, selecione AVD Manager para abrir a janela de gerenciamento do emulador Android. Clique em Create Virtual Device e siga as instruções na tela para selecionar o dispositivo e a versão do Android que você deseja usar no emulador. Após a configuração, clique em Finish para criar o emulador.

Agora que o emulador está configurado, é hora de executar o aplicativo no Android Emulator.

Criando meu primeiro projeto com React Native

Garanta que o Node está instalado e na versão mais atual, em seguida você precisará instalar o React Native CLI globalmente. Para fazer isso, abra o terminal e execute o seguinte comando:

npm install -g react-native-cli

Isso permitirá que você crie um novo projeto e execute comandos a partir do terminal.

Antes de continuar é importante garantir que tem o Java instalado, no momento estou usando o jdk-11.

Para criar um novo projeto, execute o seguinte comando no terminal:

npx react-native init MeuPrimeiroApp

Isso criará um novo projeto chamado MeuPrimeiroApp em um diretório com o mesmo nome.

Agora que você criou um novo projeto, navegue até o diretório do projeto e execute o aplicativo usando o seguinte comando:

cd MeuApp

npx react-native run-android

ou

react-native run-ios

Após rodar esses comandos, você verá esse arquivo:

Como podemos ver no código acima, temos algumas pequenas diferenças do React normal, como por exemplo a tag <Text> que deve ser usado em qualquer texto colocado no código.

Agora iremos alterar esse arquivo para fazer uma página de login:

No código acima, teremos uma página de login, que após clicar no botão de sign in será redirecionado para a página Home.

Um desenvolvedor web certamente achará estranho o uso de componentes como SafeAreaView, StatusBar, TextInput e TouchableOpacity, a navegação entre telas usando o pacote @react-navigation/native e a declaração das rotas usando createStackNavigator(), porém, ao analisar o código rapidamente conseguimos desenvolver com a mesma velocidade que fazemos sites. Veja a seguir:

Componente Text

O Text é um componente usado para exibir texto na tela. Neste caso, o style={styles.sectionTitle} define o estilo do título da seção do formulário.

Componente TextInput

O TextInput é um componente usado para coletar a entrada de texto do usuário. No código acima, existem dois TextInput que são usados para coletar o e-mail e a senha do usuário. O style={styles.input} define o estilo dos campos de entrada, incluindo a cor de fundo, a borda, o preenchimento, a fonte e o tamanho.

Componente TouchableOpacity

O TouchableOpacity é um componente que cria botões que podem ser pressionados pelo usuário. O style={styles.button} define o estilo do botão, incluindo a cor de fundo, o preenchimento, a borda e o raio dos cantos. Quando o usuário pressiona o botão, a função handleSignIn é chamada.

Por fim, o Text dentro do TouchableOpacity exibe o texto dentro do botão. Neste caso, style={styles.buttonText} define o estilo do texto do botão, incluindo a cor, a fonte e outras características. O texto exibido é Sign In, que é o texto que aparecerá no botão. Esses componentes são usados em conjunto para criar um formulário de login simples.

Componente NavigationContainer

O componente NavigationContainer é usado como um container para todas as outras telas do aplicativo. Ele é usado para fornecer o estado de navegação e o contexto do aplicativo para todas as outras telas.

Dentro do NavigationContainer, há um componente Stack.Navigator que é usado para definir as diferentes telas disponíveis no aplicativo. No exemplo que usamos, existem duas telas definidas: SignIn e Home.

Cada tela é representada por um componente Stack.Screen que é definido com um nome e um componente associado.

A propriedade initialRouteName é usada para definir a tela inicial do aplicativo. Neste caso, a tela SignIn é definida como a tela inicial.

Ao retornar o componente NavigationContainer com o componente Stack.Navigator e os componentes Stack.Screen aninhados dentro dele, o código define a estrutura básica de navegação do aplicativo e as telas que o usuário pode acessar.

Estilização no React Native

A estilização no React Native se resume a uma coleção de regras de estilo em forma de objetos JavaScript, em que cada propriedade representa uma regra de estilo e cada valor representa um valor para essa regra.

Ao contrário do React para a web, que utiliza CSS como linguagem de estilo, o React Native não usa CSS e não suporta seletores, hierarquia ou outras funcionalidades avançadas do CSS. Em vez disso, as propriedades de estilo são definidas como objetos JavaScript. Mas fique tranquilo que não é muito diferente do que usávamos anteriormente.

A função StyleSheet.create é usada para criar um objeto com os estilos definidos. Esse objeto é otimizado para melhorar o desempenho do aplicativo, evitando a recriação de objetos de estilo desnecessários.

Conclusão

Durante o artigo apresentamos o React Native como uma opção para desenvolvimento de aplicativos O React Native é um framework muito popular. A linguagem de programação utilizada é o JavaScript, facilitando muito a leitura e flexibilidade da aplicação. Além disso, a curva de aprendizado, para quem já tem experiência com desenvolvimento web, é suave.

Devido a todas essas vantagens, o React Native se tornou uma das principais opções para desenvolvedores que desejam criar aplicativos para iOS e Android. Com o mercado de aplicativos móveis em constante expansão, essa tecnologia é uma ótima opção para quem quer se aventurar no mundo dos apps móveis e oferecer soluções inovadoras aos usuários.