react native

Plop.js – Automatize a criação de arquivos

Olá Web Developers! Vamos conhecer o Plop.js, uma ferramenta incrível que nos permite automatizar a geração de arquivos em nossos projetos. Se você já precisou copiar o conteúdo de um arquivo já existente para criar outro, você precisa conhecer esta ferramenta!

Entendendo o problema

Caso você já tenha trabalhado com Angular, sabe que ele possui comandos do próprio Angular-CLI para gerar services, pipes, classes, modules, etc.

Por exemplo, se você precisar criar um Service, basta executar o comando para criá-lo. Assim será gerado automaticamente um arquivo com o nome do seu service, com código contendo o service com o nome que você escolheu, e ele automaticamente será inserido no seu módulo (atualização de arquivo).

Ou seja, com um simples comando você terá arquivos sendo criados e atualizados, já com o conteúdo pronto para você começar a programar. Então te poupa o trabalho de ter que escrever declarações repetitivas.

ng generate service hero
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

Porém, não temos essa praticidade em qualquer lugar. Um ótimo exemplo é quando trabalhamos com React. Por ser uma biblioteca, ele não é tão opinativo quanto frameworks como o Angular. Em resumo, cada um pode criar sua própria estrutura, modo de escrever seus códigos, bibliotecas, etc. Esta é uma das diferenças entre bibliotecas e frameworks.

Por consequência, não temos uma ferramenta que gere arquivos para nós. Isso muitas vezes faz com que a gente acabe criando um arquivo vazio e escrevendo tudo, ou até mesmo copiando um arquivo existente para acelerar um pouco. Com o Plop.js você economiza aqueles 5 minutos para cada arquivo criado, seja rota, componente, controller, arquivo de teste, etc.

Plop.js vem ao resgate!

Uma vez que seu projeto começa a crescer, é preciso ter uma boa estrutura, organização e padrões. Também é importante que todos do time sigam esse mesmo padrão.

Com o intuito de resolver isso, o Plop.js nos permite criar comandos que vão gerar arquivos com a estrutura que queremos de forma bem simples!

Grandes empresas utilizam o Plop.js, como Microsoft, PayPal, Adobe e Mozilla.

A imagem abaixo mostra o Plop.js sendo iniciado em um projeto React, me perguntando se quero criar um componente, serviço, hook ou uma estrutura para Redux-Saga (action, reducer e saga).

Plop.js - Escolhendo gerador

Angular - Introdução
Curso de Angular - Introdução
CONHEÇA O CURSO

Instalando o Plop.js

Primeiro precisamos instalar o Plop.js em nosso projeto. Execute o comando:

npm install --save-dev plop

No package.json vamos adicionar um comando para iniciar o Plop!

{
    ...
    "scripts": {
        "plop": "plop"
    }
}

Agora poderemos iniciar o Plop.js com o comando npm run plop.

Iniciando seu primeiro gerador

Crie na raiz do seu projeto um arquivo com o nome plopfile.js com o seguinte conteúdo:

module.exports = function (plop) {

};

Estamos expondo uma função que o Plop.js vai executar e passar para ela o objeto plop como parâmetro. Este objeto possui várias funções a fim de nos permitir criar nossos geradores.

Já podemos criar os geradores dentro desta função. No entanto, em projetos grandes isso vai gerar uma bagunça. Portanto, prefira criar um arquivo para cada gerador.

Por isso, vamos criar uma pasta chamada plop e dentro vamos criar um arquivo chamado hook-generator.js. Ele vai servir para gerarmos um React Hook.

Em hook-generator.js vamos ter o seguinte código:

module.exports = function (plop) {

};

É um código igual ao que fizemos antes, mas agora ele está em um arquivo separado. Então vamos conectá-lo ao arquivo principal, o plopfile.js;

const hookGenerator = require('./plop/hook-generator.js');

module.exports = function (plop) {
    hookGenerator(plop);
};

Dessa forma estamos fazendo com que o plopfile.js seja um lugar onde chamamos nossos geradores ao invés de declará-los diretamente aqui.

Iniciando um gerador de React Hooks

Volte ao arquivo hook-generator.js para podermos ver como é simples criar um gerador de arquivos.

module.exports = function (plop) {
    plop.setGenerator('hook', {
        description: 'Gerador de React Hooks',
        prompts: [],
        actions: []
    })
};

É desse modo que iniciamos um gerador. Vamos entender cada uma das suas partes:

  • setGenerator: Função para criar um gerador. Ela recebe uma string indicando seu nome e um objeto indicando suas configurações
  • "hook": Indica o nome que demos ao gerador
  • description: Campo para colocarmos uma descrição sobre o nosso gerador
  • prompts: Array que vai receber objetos que vão indicar as perguntas que o terminal vai fazer para nós respondermos, para assim ele saber como criar o arquivo.
  • actions: Outro Array, e ele vai receber objetos que vão indicar as ações que o Plop vai ter que executar baseado em nossas respostas.

Partiremos agora para o prompts. Para criar um hook, vamos simplesmente pedir para o usuário indicar o nome do hook a ser criado. Assim poderemos usar esse nome para criar o nome do arquivo e já criar um código com esse mesmo nome.

Em resumo, vamos usar os prompts quando precisarmos ter o valor de alguma variável. Vamos chamar essa variável de nomeHook. Ficará assim:

    ...
    prompts: [
        {
            type: 'input',
            name: 'nomeHook',
            message: 'Digite o nome do Hook: '
        }
    ],
    ...
  • type indica o tipo de entrada que vamos usar. Para permitir que o usuário escreva, utilizamos o input
  • name é o nome da variável
  • message é o texto que o terminal vai imprimir para pedir uma ação do usuário
React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

Definindo Ações

Para encerrar, precisamos indicar uma ação a ser executada. No nosso caso, um arquivo vai ser criado. Com o intuito de criar um arquivo com o código que quisermos usando as variáveis que pegamos em prompts, criamos um arquivo de template que usa Handlebars.

Crie um arquivo chamado hook-template.hbs. Dentro dele teremos o template do nosso código. Você pode escrever do jeito que quiser.

import { useState, useEffect } from 'react';

export function use{{nomeHook}}(){
    const [value, setValue] = useState(null);

    useEffect(() => {

    }, []);

    return value;
}

Então criamos aqui uma estrutura genérica para um React Hook. Esse é o conteúdo que o Plop.js vai colocar no arquivo que for gerado. Porém, veja que no nome da função escrevemos {{nomeHook}}. O Handlebars vai trocar essa parte pelo nome da nossa variável. Ou seja, se o usuário escrever Scroll, teremos uma função com o nome useScroll().

Por fim, para fazer esse arquivo ser gerado, vamos escrever nossa action.

    ...
    actions: [
        {
            type: 'add',
            path: 'src/hooks/use{{nomeHook}}.js',
            templateFile: 'plop/hook-template.hbs'
        }
    ]
    ...
  • Como queremos criar um novo arquivo, o tipo da ação deve ser add.
  • Em path indicamos o caminho do arquivo e seu nome. Note que colocamos {{nomeHook}} para que seja trocado pela nossa variável. Assim o arquivo será criado com esse nome.
  • templateFile indica o arquivo com a template que será usada para inserir conteúdo no arquivo a ser criado.

Executando o Plop.js

Finalmente, basta executar o comando npm run plop. Como só temos um gerador, ele vai iniciá-lo automaticamente. Vamos dar ao nosso hook o nome Scroll.

Plop.js sendo iniciado pelo terminal

Assim que você pressionar Enter, o arquivo do jeito que queríamos será gerado, como você pode ver na imagem abaixo:

Plop.js - React Hook gerado automaticamente

Desenvolvedor React Sênior
Formação: Desenvolvedor React Sênior
Nesta formação conheceremos a Arquitetura Flux, muito utilizada nas aplicações modernas e que nos trás muitos benefícios em relação às arquiteturas clássicas como o MVC. Aprenderemos a sua principal implementação, o Redux. Também veremos a trabalhar com código assíncrono com Redux Thunk e conceito de programação funcional com Redux-Saga.
CONHEÇA A FORMAÇÃO

Conheça o React, biblioteca para desenvolvimento Web

O React, lançado em 2013, é uma biblioteca JavaScript de código aberto, fundamental para criação de aplicações front-end.

Anteriormente denominado React.js ou ReactJS, foi desenvolvido pelo Facebook para criação de elementos de interface reutilizáveis de forma simples, intuitiva e com uma ótima performance.

Multiplataforma sobre a licença MIT, diversas são as empresas que o utilizam. Dentre elas podemos citar o próprio Facebook, o Instagram, que também faz parte da empresa Facebook, Twitter, Netflix, Uber, Spotify e muitas outras.

React - Introdução
Curso de React - Introdução
CONHEÇA O CURSO

Principais características do React

O React possui diversas características marcantes, o que o torna uma excelente escolha para o desenvolvimento de aplicações, como podemos ver abaixo:

  • Licença MIT: Apesar de parecer bobagem, o react, hoje, é licenciado sob a MIT, o que tranquiliza os desenvolvedores que utilizam este framework, já que eles não precisam se preocupar com patentes;
  • Utiliza Javascript: O Javascript é uma das principais linguagens de desenvolvimento do mundo. Por utilizá-lo, o React agrega a maioria das suas vantagens, além de ser grandemente utilizado por diversos desenvolvedores;
  • Utiliza componentes: O React utiliza a componentização para criação de interfaces, garantindo uma maior flexibilidade e reutilização de interfaces;
  • Desenvolvimento móvel: Em conjunto com o react native, podemos desenvolver aplicações mobile reutilizando componentes criados com o react.
  • Amplamente utilizado: O React é uma das principais tecnologias para desenvolvimento web (e mobile) do mundo.

Empresas que utilizam o React

Diversas são as empresas que utilizam o React para o desenvolvimento de suas soluções, o que a torna uma tecnologia ainda mais atrativa. Dentre essas empresas, podemos citar:

  • Twitter: O Twitter, uma das principais redes sociais do mundo, utiliza o react para criação de suas aplicações;
  • Facebook: Apesar de ter desenvolvido o React, o Facebook também o utiliza para construção de suas aplicações;
  • Medium: O Medium, uma das principais plataformas de blog do mundo utiliza o React para construção de sua aplicação web;
  • Airbnb: Uma das principais plataformas de aluguel, o Airbnb utiliza o React em sua aplicação web.

Quais conhecimentos preciso ter para iniciar com o React?

Por utilizar o Javascript como base para sua construção, para iniciar com o React, é essencial que o desenvolvedor possua conhecimento com essa linguagem.
Além disso, é de grande importância que o desenvolvedor possua conhecimentos de HTML e CSS para a construção de interfaces.

Aqui na TreinaWeb possuímos diversos cursos de JavaScript, que abordarão todos os conceitos essenciais para iniciar com esta tecnologia.

Desenvolvedor Front-end Pleno
Formação: Desenvolvedor Front-end Pleno
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos conhecer assuntos mais avançados do HTML5, CSS3 e JavaScript, conhecer o NPM, trabalhar com o RxjS (base do framework Angular), testes com Jasmine e uma pequena introdução ao TypeScript.
CONHEÇA A FORMAÇÃO

Sintaxe do React

A sintaxe do React é bem simples. Basicamente, os componentes do React implementam um método render() que recebe os dados de entrada e retornam o que deve ser exibido.

class Treinaweb extends React.Component {
  render() {
    return (
      <div>
        Olá, {this.props.nome}!
      </div>
    );
  }
}

ReactDOM.render(
  <Treinaweb nome="Treinaweb" />,
  document.getElementById('exemplo')
);

Este exemplo usa uma sintaxe parecida com XML, chamada JSX. Os dados de entrada que são passados para o componente podem ser acessados no render() via this.props.

Podemos concluir que…

O React é uma excelente biblioteca JavaScript para o desenvolvimento de aplicações web. Muitas empresas o utilizam, o que o torna ainda mais desejada, já que a quantidade de vagas é cada dia maior.

Em conjunto com o React Native, podemos reutilizar diversos componentes desenvolvidos com o React para a construção de aplicações móveis, tornando a solução ainda mais completa.

O que é o React Native?

Criado pelo Facebook em 2015 sobre a licença MIT, o React Native é um Framework para desenvolvimento de aplicativos móveis multiplataforma.

Um Framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base, onde as aplicações são construídas, um otimizador de recursos.

Baseado no React, framework JS para desenvolvimento web, o React Native possibilita a criação de aplicações móvel multiplataforma (Android e iOS) utilizando apenas Javascript. Porém, diferente de outros frameworks com esta mesma finalidade (Cordova, por exemplo), todo o código desenvolvido com o React Native é convertido para linguagem nativa do sistema operacional, o que torna o app muito mais fluido.

React Native - Fundamentos
Curso de React Native - Fundamentos
CONHEÇA O CURSO

Características

O React Native possui diversas características marcantes e fundamentais para sua ampla adoção, como podemos ver abaixo:

  • Acessar a interface e os recursos nativos do Android e iOS utilizando JavaScript;
  • O código produzido é semelhante ao React para Web;
  • Possui a base de conhecimento compartilhada entre o desenvolvimento mobile e front-end;
  • Todo código desenvolvido é convertido para a linguagem nativa do sistema operacional;
  • Com o React Native conseguimos desenvolver aplicações para Android e iOS utilizando um código único;
  • Por ser multiplataforma, podemos desenvolver aplicações com React Native utilizando qualquer sistema operacional (Windows, macOS ou Linux).

Empresas que o utilizam

Por ser amplamente adotado na comunidade mobile, o React Native atraiu a atenção de diversas empresas, que fizeram questão de utilizá-lo em suas soluções mobile. Dentre estas empresas, podemos citar:

  • AirBnb: O AirBnb é uma das principais empresas a utilizar o React Native para seu aplicativo móvel;
  • Wix: O Wix, plataforma online de criação de sites, também utiliza o React Native em seu aplicativo mobile;
  • Facebook: Claro que o Facebook, empresa por trás do React Native, também iria utilizá-la para seu aplicativo móvel;
  • Tesla: A Tesla, principal montadora de carros elétricos, também utiliza esta tecnologia para seu aplicativo móvel;
  • Instagram: Além do Facebook, o Instagram (rede social do mesmo grupo), também utiliza o React Native para o desenvolvimento do seu app.

Como vimos acima, a adoção do React Native por grandes empresas é bem nítida, o que o torna ainda mais completo e utilizado por todo o mundo.

React Native - Componentes nativos
Curso de React Native - Componentes nativos
CONHEÇA O CURSO

Sintaxe

Apesar de ser baseado no React, o React Native não utiliza tags HTML para a criação de seus elementos. Ao invés disso, os elementos são criados utilizando tags nativas do React Native, como podemos ver no trecho de código abaixo:

import React from 'react';
import { Text } from 'react-native';

export default function Ola() {
  return (
    <Text>Olá, mundo!</Text>
  );
}

O Component serve para exibir um texto no aplicativo. Este componente é nativo do React Native, além de tantos outros que podem ser vistos em sua documentação oficial.

Podemos concluir que…

É notável a crescente demanda do uso de aplicativos móveis nos últimos anos. Pensando nisso, diversas empresas desenvolvem suas soluções para facilitar a criação destes aplicativos. Com o React Native, o Facebook lançou uma solução incrível para o desenvolvimento multiplataforma utilizando apenas código Javascript, o que facilita (e muito) os desenvolvedores que já possuem conhecimento em desenvolvimento web e até os que não possuem, já que é um framework com alta curva de aprendizado.

Desenvolvedor React Native Júnior
Formação: Desenvolvedor React Native Júnior
O React Native nos permite criar aplicativos mobile realmente nativos com JavaScript para Android e iOS. Ele vem sendo usado em aplicativos como Facebook, Instagram e Uber.Nesta formação vamos iniciar nossos estudos em React Native e depois aprender a acessar APIs nativas, incluindo o desenvolvimento de nosso próprio código nativo (Java e Objective-C) e integrá-lo ao JavaScript.
CONHEÇA A FORMAÇÃO

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200