Compartilhando código com React Native para Web

React Native para Web é um projeto de código aberto que permite usar componentes principais do React Native em aplicativos da web React. React Native for Web usa React DOM para renderizar código JavaScript compatível com React Native em um navegador da web , tornando possível o compartilhamento de código.

Neste tutorial, vamos configurar um aplicativo da web React usando Parcel, construir componentes usando os componentes principais do React Native e, finalmente, compartilhe esses componentes entre nossos aplicativos móveis e da web com o React Native for Web.

Vamos começar!

Configurando o React Native

Primeiro, criaremos um novo aplicativo React Native. Para esta demonstração, estou usando npx, mas você também pode usar o pacote react-native-cli se estiver instalado globalmente em seu ambiente de desenvolvimento.

Abra uma nova janela de terminal e execute o seguinte comando:

npx react-native init MyApp

MyApp é um espaço reservado para o nome do seu projeto React Native.

Se você estiver usando o simulador iOS, execute yarn run ios. Se você estiver usando um emulador para Android, execute yarn run android. Assim que o processo de construção for concluído, você verá o aplicativo React Native padrão com o código padrão, que pode ser modificado dentro do App.js.

Como exemplo, irei renderizar uma mensagem de texto simples dentro do App.js:

import React from’react’; import {View, StyleSheet, Text} de’react-native’; const styles=StyleSheet.create ({screenContainer: {flex: 1}, text: {fontSize: 20, color:’cornflowerblue’, marginTop: 50, alignSelf:’center’}}); const App=()=> {return ( Sou um componente React Native ); }; exportar aplicativo padrão;

A saída do código acima será semelhante à imagem abaixo:

Configurando o Parcel

Usaremos o Parcel, um bundler que requer zero configuração, para configurar facilmente um novo aplicativo da web no React. A configuração de um aplicativo React usando o Parcel segue um paradigma semelhante à geração de um aplicativo usando Create React App.

Crie um novo diretório dentro do seu projeto React Native chamado web/. Dentro, iremos criar os seguintes arquivos e adicionar o respectivo código padrão.

Crie um arquivo chamado index.html e adicione o seguinte código: