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.
A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.