Inicie seu projeto React Native Expo usando um modelo pré-construído

9 min

introdução nesta seção, você aprenderá como começar a usar react native com um expo template e como conectá lo ao back4app em 4 etapas fáceis pré requisitos para completar este tutorial, você precisará um aplicativo backend back4app nota siga o https //www back4app com/docs/get started/new parse app para aprender como criar um aplicativo parse no back4app https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm ou https //classic yarnpkg com/en/docs/install instalado em seu sistema expo cli instalado seguindo https //docs expo io/get started/installation/?redirected 1 obter o template para obter o projeto template, baixe e descompacte o código fonte em nosso https //github com/templates back4app/react native template em sua máquina ou clone o projeto com a linha de comando git execute o seguinte comando para baixar e extrair o template usando curl curl lok https //github com/templates back4app/react native template/archive/master zip && unzip master zip ou execute o seguinte comando para clonar o template usando git git clone https //github com/templates back4app/react native template 2 baixe as dependências do aplicativo certifique se de que você instalou npm npm ou yarn yarn em seu sistema veja os https //docs npmjs com/getting started ou https //classic yarnpkg com/en/docs/install#windows stable para mais informações 2\ no seu terminal, execute cd react native template master cd react native template master e abra o diretório raiz do projeto 3\ execute npm install npm install para instalar as dependências neste tutorial, estamos usando npm para gerenciar dependências, mas você é livre para usar yarn em vez disso 3 configure as credenciais do aplicativo para permitir que o aplicativo se conecte de forma segura aos servidores do back4app, você deve fornecer ao sdk javascript do parse as credenciais do aplicativo localize seu id do aplicativo id do aplicativo e chave javascript chave javascript navegando até seu painel painel > configurações do aplicativo configurações do aplicativo > segurança e chaves segurança e chaves no diretório raiz do projeto, abra o arquivo em app/(tabs)/index tsx app/(tabs)/index tsx o arquivo deve parecer com isso index tsx parse initialize( 'your application id here', // replace with your parse application id 'your javascript key here' // replace with your parse javascript key ); parse serverurl = 'https //parseapi back4app com/'; copie e cole seu id do aplicativo id do aplicativo e chave javascript chave javascript nele 4 teste sua conexão dentro do app js app js do seu projeto modelo, há uma função que cria um objeto person e outra para buscar pessoas do seu app para o seu banco de dados back4app index tsx // function to create a new person async function createperson() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const personobject = new personobject(); personobject set("name", "back4app user"); const result = await personobject save(); setresult(`object created with id ${result id}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } async function fetchpeople() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const query = new parse query(personobject); const results = await query find(); const names = results map(result => ({ objectid result id, name result get("name"), })); setresult(`fetched names ${json stringify(names, null, 2)}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } para executar e testar a conexão do seu app abra o terminal do seu projeto execute npm run android npm run android ou npm run ios npm run ios ou npm run start npm run start para abrir a aplicação na sua plataforma alvo está feito! neste ponto, você aprendeu como iniciar e executar uma aplicação react native conectada ao back4app