Prática com React Native para Web: um tutorial completo

da web.

Isso levanta um ponto importante: nem todos os componentes nativos podem ser compatíveis com o navegador. Alguns componentes orientados para dispositivos móveis usam APIs de hardware móvel, que não são acessíveis diretamente por um navegador da web.

Isso significa que não podemos usar o React Native for Web para portar completamente um aplicativo em sua versão da web. Ainda podemos transferir uma grande parte dele, no entanto, e na maioria das vezes, isso é suficiente.

O estilo é outra área de diferença entre React e React Native. No React, podemos usar uma longa lista de soluções de estilo, incluindo CSS, Sass, CSS-in-JS etc. No React Native, por outro lado, todos os estilos são escritos em CSS-in-JS.

Talvez sem surpresa, o React Native for Web adota a abordagem CSS-in-JS do React Native, garantindo que o mesmo conjunto de estilos funcione bem em dispositivos móveis e na web.

Construindo nosso próprio aplicativo React Native para Web

Agora que temos uma compreensão teórica dos conceitos por trás dessa adição à família React Native de APIs, vamos passar pelo processo de instalação para entender como configurar nosso aplicativo React Native amigável para a web.

Primeiros passos: crie um novo aplicativo

Em primeiro lugar, precisamos criar um novo aplicativo React Native:

 init WebTest reac-nativo 

Executar este comando criará um novo projeto React Native com o nome WebTest. Para testá-lo, execute os seguintes comandos:

 cd WebTest
react-native run-android # para experimentar em um dispositivo Android, OU
react-native run-ios # para experimentar em um dispositivo ios 

O conjunto de comandos acima executará o projeto de amostra no dispositivo desejado. Devemos ver uma página padrão básica na tela que diz algo semelhante a “Bem-vindo ao React Native!”

Quando olhamos para o diretório do projeto, ele conterá dois arquivos JavaScript exclusivos: index.android.js e index.ios.js . Esses arquivos são específicos para as respectivas plataformas em seus nomes. Isso significa que, se editarmos o arquivo index.android.js , notaremos as atualizações na instância do aplicativo Android. O mesmo vale para o arquivo index.ios.js .

Esses arquivos de índice são o ponto de entrada raiz para nosso aplicativo React Native. Podemos criar arquivos e diretórios separados para hospedar nossos componentes, mas se eles forem usados ​​pelo aplicativo, eles sempre serão vinculados direta/indiretamente a esses arquivos de índice.

Agora que temos um aplicativo React Native pronto para dispositivos móveis funcionando, vamos habilitá-lo para a web!

Prepare o aplicativo para a web!

Primeiro, precisamos instalar as dependências necessárias via npm:

 npm i react-dom react-native-web 

O comando acima instala react-native-web junto com o pacote React original e react-dom em nosso projeto. Isso será adicionado à lista de dependências presentes em package.json , que conterá no mínimo quatro dependências: react , react-dom , react-native e react-native-web .

Agora que temos os pacotes principais instalados, só precisamos fazer mais algumas coisas para tornar nosso aplicativo compatível com a web. Ainda não abordamos a diferença entre as duas plataformas. Para tornar o aplicativo React Native compatível com navegadores da web, precisamos usar o Babel e o webpack em nosso projeto.

O Babel ajuda a compilar o código ES6 JavaScript em código ES5 JavaScript compatível com o navegador, e o webpack agrupa o código JavaScript compilado para um servidor e processo de desenvolvimento mais rápido.

Os comandos que precisamos executar a fim de corrigi-los adequadamente são:

 npm i webpack babel-loader babel-preset-react babel-preset-es2015
npm i webpack-dev-server--save-dev 

Isso irá instalar os pacotes Babel e webpack necessários. Com isso, terminamos de instalar todos os pacotes de que precisamos. A próxima etapa envolve configurar nosso projeto para a web.

Uma vez que instalamos o pacote webpack, precisamos criar um arquivo de configuração para fornecer os detalhes corretos do projeto. Este arquivo instruirá o pacote webpack sobre como construir, agrupar e servir nosso código aos clientes web. Além disso, também forneceremos um resolvedor de alias, que atualizará a versão da web de nosso aplicativo com as importações corretas.

Esta é a aparência de um arquivo webpack.config.js típico:

 const webpack=require ('webpack'); module.exports={ entrada: { main:'./index.web.js', }, módulo: { carregadores: [ { teste:/\.js?$/, excluir:/node_modules/, carregador:'babel', consulta: { predefinições: ['es2015','reagir'], }, }, ], }, resolver: { alias: { 'react-native':'react-native-web', }, },
}; 

Observe que este arquivo deve ser armazenado na raiz do nosso projeto e não dentro de nenhum diretório. Além disso, observe a menção de index.web.js neste arquivo, semelhante às variantes Android e iOS acima. Isso faz sentido, pois o webpack foi instruído a procurar o aplicativo da web dentro desse arquivo e podemos definir uma versão alternativa de nosso aplicativo para a web, se quisermos.

A seguir, vamos criar o esqueleto HTML para nosso aplicativo da web. Este será um arquivo simples index.html armazenado na raiz do projeto. Podemos personalizar isso como quisermos, mas observe que essas alterações serão aplicadas a todas as páginas do aplicativo React Native. Esta é a aparência de um arquivo de amostra index.html :

Agora que concluímos toda a configuração padrão, temos uma última coisa a fazer. Lembra que falamos sobre um arquivo index.web.js um pouco atrás? Vamos construir isso!

 import React, {Component} de'react';
import { AppRegistry, StyleSheet, Texto, Visualizar
} de'react-native'; classe ReactNativeWeb extends Component { render () { Retorna (   Bem-vindo ao React Native!   ); }
} estilos const=StyleSheet.create ({ container: { flex: 1, justifyContent:'center', alignItems:'center', backgroundColor:'# 142a3d', }, bem-vinda: { fontSize: 20, textAlign:'center', margem: 10, cor:'#ffffff', },
}); AppRegistry.registerComponent ('ReactNativeWeb', ()=> ReactNativeWeb);
AppRegistry.runApplication ('WebTest', {rootTag: document.getElementById ('react-native-app')}); 

A única diferença entre um índice Android/iOS e o arquivo de índice da web está na última linha. Para a web, precisamos instruir o carregador a executar o aplicativo dentro da tag div que acabamos de criar no arquivo index.html . Sem isso, o React Native nunca saberá onde carregar e exibir o aplicativo.

Isso conclui a configuração da web!

Teste em execução na web

Agora que completamos todos os requisitos para executar um aplicativo React Native na web, a próxima etapa seria testá-lo. Para fazer isso, inicie o webpack executando o seguinte comando:

./node_modules/.bin/webpack-dev-server-inline 

Isso deve iniciar uma instância de um servidor webpack no terminal e você deve ser capaz de visualizar seu aplicativo React Native Web em http://localhost: 8080/ !

Neste ponto, você tem um aplicativo funcional de plataforma cruzada que suporta Android, iOS e a web. Daqui em diante, está em suas mãos levar adiante o desenvolvimento do aplicativo.

Estendendo o aplicativo React Native for Web de amostra

Agora que você tem um aplicativo que também oferece suporte à web, pode decidir qual caminho seguir à medida que continua o desenvolvimento. Você já viu o novo arquivo index.web.js que lida com a versão da web do seu projeto React Native. Isso deixa claro onde você deve procurar os problemas, se houver algum.

No que diz respeito às práticas de codificação, você precisa seguir os métodos de estilo JSS e inline, já que CSS não é compatível com os aplicativos React Native. Você também precisa procurar algumas anomalias, como algumas bibliotecas/APIs sem suporte para as três plataformas.

ListView é um ótimo exemplo disso porque não é compatível com React Native for Web. Isso é totalmente normal e pode ser contornado usando a capacidade do React Native de definir variantes de plataforma para qualquer componente.

Embora essa falta de suporte para uma série de APIs possa obrigá-lo a reconsiderar a construção de um aplicativo da web no React Native, ainda é uma das maneiras mais fáceis de construir uma base de código para iOS, Android e a web.

Conclusão

Revendo este tutorial, discutimos o que é React Native for Web, o problema que ele resolve e como funciona. Em seguida, decidimos criar nosso próprio aplicativo React Native for Web do zero. Fizemos uma série de instalações de pacotes e ajustes de configuração antes de podermos obter uma versão funcional de nosso aplicativo na web.

Como você pode inferir no último segmento deste tutorial, o React Native for Web ainda não está totalmente pronto para produção. Ainda existem algumas APIs sem suporte, o que poderia fazer você questionar a mudança do React para o React Native for Web. No final, entretanto, isso depende de suas necessidades individuais.

A postagem Prática com React Native para Web: um tutorial completo apareceu primeiro no LogRocket Blog .

Source link