Skip to main content
Join the Agentforce Hackathon on Nov. 18-19 to compete for a $20,000 Grand Prize. Sign up now. Terms apply.

Introdução ao React Native

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Entender o que é o React Native.
  • Entender como o React Native dá suporte a linguagens de programação populares.
  • Instalar softwares necessários ao Mobile SDK com React Native.

O que é React Native?

Se você já passou pelos outros módulos da trilha do Mobile SDK, já sabe que o Mobile SDK oferece várias opções de desenvolvimento. Você pode criar aplicativos nativos no Android e no iOS usando linguagens de programação nativas para codificar. Você pode também criar aplicativos híbridos que são executados tanto no Android quanto no iOS, codificados em JavaScript, CSS, HTML ou até em Visualforce. Os aplicativos híbridos, com base no Apache Cordova, são executados em um contêiner WebView que faz a ponte de tradução para o código nativo. Essa abordagem enfraquece um pouco o desempenho e nem sempre tem a aparência real dos aplicativos nativos.

É aqui que entra em cena o React Native. O Facebook apresentou o React como estrutura de desenvolvimento de código aberto em 2013 e seguiu com o React Native em 2015. Atualmente, a tecnologia React está dividida em duas partes: ReactJS e React Native. ReactJS é uma biblioteca JavaScript para criar interfaces de usuário baseadas na Web. O React Native é uma estrutura que usa a biblioteca ReactJS para criar componentes nativos para aplicativos móveis. Assim como o Cordova, o React Native é uma plataforma cruzada que dá suporte a Android e iOS.

Embora você codifique componentes React Native com diferenças de JavaScript, CSS e marcação, os objetos subjacentes são objetos de dispositivo nativos que acessam o sistema operacional diretamente. Por conta disso, o desempenho e a aparência dos componentes React Native ficam de acordo com os padrões nativos.

As linguagens React Native padrão vêm, cada uma, com algumas ressalvas:

  • O JavaScript no React implementa ES2015, um padrão em ascensão, e, por isso, os desenvolvedores de híbridos podem encontrar algumas construções não familiares nos exemplos de React. Para saber mais sobre ES2015, confira a seção Recursos ao final desta unidade.
  • O CSS no React é, na verdade, código JavaScript que imita CSS e normalmente funciona como CSS na Web. Uma diferença importante é o uso de nomes concatenados e sem hífen para identificadores, em vez de nomes em minúsculas e com hífen. Mesmo que você conheça CSS, talvez venha a descobrir que prefere o mecanismo de estilização do React.
  • A marcação XML usada nos aplicativos React se chama JSX. JSX é uma sintaxe que permite incorporar marcação XML em JavaScript em vez do método tradicional de incorporar JavaScript na marcação. Assim, em vez de ficar em um arquivo de texto separado da origem do JavaScript, a marcação é escrita diretamente no código JavaScript. Por exemplo, você pode retornar a marcação JSX da função render() de um componente.
  • No Mobile SDK 9.0 ou posterior, você pode programar em JavaScript ES2015 padrão, como antes, ou em TypeScript. Você pode programar sem TypeScript, com um pouco de TypeScript ou com o máximo que definir. O TypeScript usa seu próprio compilador para fazer verificação de tipo estático à medida que você programa. Os erros encontrados pelo compilador são informativos, mas não proibitivos; o código JavaScript ainda será executado como antes. As bibliotecas SDK móveis para React Native incorporam tipos TypeScript.

Um motivo comum para usar React Native é que você não precisa recompilar seus aplicativos com Xcode ou Gradle para testar as alterações. Quando seu aplicativo estiver em execução em um dispositivo virtual ou real, basta editar e salvar o código e atualizar o emulador ou simulador para ver as alterações.

Embora a estrutura subjacente do Facebook permaneça no modo pré-lançamento, o Mobile SDK trata o React Native como um cidadão do SDK. Você pode criar aplicativos React Native com nossas ferramentas de linha de comando e usar componentes do Mobile SDK, como autenticação, SmartStore e Sincronização móvel para criar aplicativos Mobile SDK completos.

Instalar forcereact

Você concluiu o módulo Configurar as ferramentas de desenvolvimento do SDK móvel? Se não o fez, agora é uma boa hora de percorrê-lo e verificar se suas ferramentas de desenvolvedor estão atualizadas. Embora a codificação do React Native seja feita em JavaScript, você ainda precisa instalar ferramentas de desenvolvimento da plataforma nativa: Android Studio, Xcode ou ambas. Para criar aplicativos React Native para SDK móvel, você usa o utilitário forcereact npm.

Criar um aplicativo conectado

Nota

O módulo Noções básicas sobre o Salesforce Mobile SDK, que inclui instruções para aplicativos conectados, é um pré-requisito para este módulo. Você não pode concluir os exercícios desta unidade sem criar um aplicativo conectado.

Para se conectar ao serviço Salesforce, todos os aplicativos móveis precisam de um aplicativo conectado ao Salesforce. Um aplicativo conectado permite que seu aplicativo se comunique com o Salesforce e acesse APIs do Salesforce de maneira segura.

Depois de criar e salvar seu aplicativo conectado, observe os detalhes.

  • Copie os valores de URL da chamada e de Chave do cliente. Use esses valores para configurar a autenticação do seu aplicativo.
  • Os aplicativos do Mobile SDK não utilizam o segredo do cliente, de forma que você pode ignorar esse valor.

Recursos

Compartilhe seu feedback do Trailhead usando a Ajuda do Salesforce.

Queremos saber sobre sua experiência com o Trailhead. Agora você pode acessar o novo formulário de feedback, a qualquer momento, no site Ajuda do Salesforce.

Saiba mais Continue compartilhando feedback