Os 3 passos para criar Templates customizados para React Native

Published in

React Brasil

5 min readOct 28, 2017

Desde fevereiro, a partir da versão 0.42.3 do React Native, Martin Konicek (Martin Konicek) nos deu um presente. E pelo o que eu posso dizer, este presente não foi muito apreciado ou poucos viram. Vamos mudar isso!

Você deve estar se perguntando… que presente é este que ele está falando? Bem, o presente é o templates de projeto. E foi no commit abaixo que ele se tornou real…

CLI: Add support for project templates (3a6dff4) — @mkonicek

Simplesmente, isto permite que nós criemos esqueletos customizados, reutilizáveis e compartilháveis para aplicativos React Native.

Uma vez criado, poderemos iniciar nosso novo projeto React Native usando um esqueleto customizado como template ao invés do “Welcome to React Native!” padrão criado com todo aplicativo React Native. O comando para utilizar um template é o seguinte…

react-native init myapp --template myFancyTemplate

Antes de mostrar como criar nosso próprio template, vamos todos separar um tempinho para brindar e dizer: “Obrigado Martin!”

Aqui vão os 3 passos básicos que precisamos saber para criar nosso próprio template:

iniciar e modificar o template padrão
empacotar o template
usar o template

Bem simples não? Vamos iniciar então? Massa! Vamos lá…

Assumirei que você já passou pelo Getting Started Guide e que seu ambiente de desenvolvimento já está configurado. Se não, vá correndo preparar tudo que estou esperando =).

Agora iremos criar um novo projeto. Pode nomeá-lo como quiser. Vou chamá-lo de exemplo (porque eu não sou muito original).

react-native init react-native-template-exemplo

Agora podemos complementar o template como for necessário, adicionando novos componentes, bibliotecas, arquivos e diretórios do jeito que quisermos. Podemos incluir até mesmo componentes com códigos nativos caso necessário. Vamos nos divertir, mas lembrando que o propósito é criar uma estrutura para ser reutilizada nos projetos futuros que iremos criar.

Para o template exemplo, adicionaremos apenas uma dependência, o react-navigation.

Iremos também atualizar o método render do arquivo App.js para vermos que realmente funciona. Aqui está a parte que foi modificada. Você poderá ver o arquivo completo em react-native-template-exemplo/App.js

“HelloWorld” é uma palavra mágica, pois será automagicamente substituída pelo nome do nosso aplicativo. Isto faz com que precisamos alterar mais uma coisa, dessa vez no arquivo index.js do nosso template para que tudo funcione corretamente quando alguém o utilizar.

No index.js que fica na raíz do projeto, alteraremos o seguinte…

AppRegistry.registerComponent('HelloWorld', () => App);

Agora vem a parte legal, empacotaremos o que fizemos. Iniciamos adicionando um novo arquivo chamado dependencies.json à raíz do projeto.

touch dependencies.json

Neste arquivo, criaremos um objeto JSON que definirá todas as dependências que serão instaladas do NPM. Iremos copiá-las do arquivo package.json, exceto aquelas que já são dependências padrões do React Native. Nosso dependencies.json ficará assim, já que apenas colocamos uma única dependência.

{
  "react-navigation": "^2.4.1"
}

Atualização julho /2018

Na versão 0.56.0 do React Native, foi introduzida uma nova feature na utilização de templates. Meu Pull Request foi aceito e com ele é possível adicionar dependências de desenvolvimento ao seu template, permitindo que crie um aplicativo que já venha com ESLint, Prettier, Husky, Enzyme entre outros packages.

Para adicionar uma dependência de desenvolvimento primeiro precisamos criar um arquivo devDependencies.json

touch devDependencies.json

E assim como no arquivo de dependências, listamos todas as depêndencias de desenvolvimento que nosso template irá adicionar automaticamente:

{
  "prettier": "^1.13.7"
}

Com isso, ao utilizar o template na criação de um aplicativo, ele automaticamente fará a instalação das dependências de desenvolvimento.

Próximo passo é limparmos o arquivo package.json removendo tudo exceto name e version. Abaixo está como ficará o nosso arquivo:

{ 
  "name": "react-native-template-exemplo", 
  "version": "0.1.0"
}

Iremos também deletar os diretórios node_modules, ios e android. Também podemos excluir os arquivos yarn.lock, .babelrc, .buckconfig, .flowconfig, .gitattributes, .gitignore e .watchmanconfig.

rm -Rf node_modules
rm -Rf android
rm -Rf ios
rm yarn.lock .babelrc .buckconfig .flowconfig .gitattributes .gitignore .watchmanconfig

Como mencionado no início, para usarmos um template simplesmente incluímos o parâmetro --template para o comandoreact-native init junto com a localização do template. Essa localização pode ser passada através do npm, file://, http://, https://, ou git://.

npm — Nosso template deve seguir uma convenção para o nome quando instalado do npm, onde todos os templates devem começar comreact-native-template- seguido do nome do template, desse jeito…

react-native-template-{template-name}

Instalar do npm é provavelmente a forma mais fácil, e publicar no npm é SUPER simples. Uma vez publicado, usaremos nosso template dessa forma…

react-native init test --template exemplo

file:// — Para usar nosso novo template de um caminho local como base para um novo aplicativo, precisaremos passar o caminho absoluto junto com o prefixo file://

react-native init test --template file:///Users/LucianoLima/projects/templates/react-native-template-exemplo

http:// — E para usar nosso template de http:// basta informamos a url…

// também funciona com https://, git://, ou qualquer outra URL suportada pelo npmreact-native init test --template https://github.com/lucianomlima/react-native-template-exemplo

Quando for instalado através de file://, http://, https://, ou git:/ o nome do seu template é irrelevante. Só importa de fato quando instalado via npm.

Todas as dependências serão instaladas para nós, incluindo as nativas que serão automaticamente linkadas, então não será necessário rodar o comando react-native link manualmente. Show né?

Com o projeto criado, iremos entrar no diretório com o comando cd test e iremos testar com react-native run-ios ou react-native run-android como preferir para vermos algo tipo isso…

Caso queiram checar, verão que no arquivo package.json do seu projeto recém criado, estará a dependência react-navigation na versão que foi configurada no arquivo dependencies.json e que, tanto em App.js como em index.js foi substituída a palavra mágica HelloWorld pelo nome do seu projeto.

Nosso template está publicado no meu github, então poderá explorar ele por completo lá ou se quiser até fazer um fork e estudar outras possibilidades.

Esta funcionalidade só está disponível através do comando react-native init que requer que você tenha o Xcode/Android Studio/Genymotion para rodar seus aplicativos. Quem sabe no futuro seja possível utilizar templates com create-react-native-app (CRNA) o que tornará muito mais fácil iniciar projetos em uma determinada estrutura. Mas por enquanto já é bem útil e fico feliz que tenha sido adicionada. Como sempre, as coisas podem acabar mudando, então use com sabedoria :)

Eu não digitei muito, mas se você gostou deste artigo, deixe seu aplauso ou um comentário com sua opinião e compartilhe. Aprecio o incentivo e adoraria saber sua opinião.

Artigo original publicado no medium.com por Chris Geirman em 28 de outobro de 2017.

Os 3 passos para criar Templates customizados para React Native

Atualização julho /2018

Written by Luciano Lima