Deploy de aplicação ReactJS na Digital Ocean

Para quem não conhece, a Digital Ocean é um provedor americano de soluções de infraestrutura em nuvem, ou cloud provider. Ela foi fundada com o objetivo de ajudar desenvolvedores empreendedores a colocar suas aplicações na Internet, uma vez que o mercado de cloud à época (2011) estava muito focado em grandes clientes empresariais.

Basicamente eles alugam máquina virtuais pré-configuradas, que eles chamam de droplets, que de uma maneira bem simplista é o mesmo que vender partes de uma máquina muito maior. Para quem está utilizando, não há qualquer diferença de ter uma máquina virtual ou máquina física, exceto pelo fato de ser muito mais barato e você pagar proporcional à sua necessidade de recursos hoje. Se precisar de mais recursos, você pode aumentar. Se não precisar mais da máquina, pode excluir. Esse conceito chamamos de IaaS (Infrastructure as a Service), e é o mesmo conceito utilizado na AWS, por exemplo.

Neste tutorial, vou te ensinar como subir a sua aplicação ReactJS na Digital Ocean.

Atenção: este é um tutorial mais intermediário, considero nele que você já sabe programar em ReactJS. Se não estiver confortável com ReactJS ainda, sugiro começar por tutoriais mais básicos. Infraestrutura/servidores para iniciantes eu recomendo a Umbler ou a Heroku.

Curso FullStack

#1 – Criando e configurando o App

Antes de fazer deploy do seu front-end, certifique-se de que ele vai estar apontando para a URL do backend de produção, bem como que seu backend está preparado para receber as chamadas dele (CORS, por exemplo).

Para criar uma conta na DO (Digital Ocean) é muito simples e eles lhe dão $100 de créditos para usar por 60 dias se cadastrando por este link. Uma vez com tudo certo com a sua conta (email verificado e tal), a própria plataforma vai te sugerir alguns templates de máquinas que podem ser criadas, como o droplet de Node.js.

Embora possamos fazer um passo a passo semelhante ao que fizemos com o backend na Digital Ocean (tutorial anterior), com droplets e tudo mais, a recomendação da DO é que para front-end se utilize a plataforma de apps deles. Isso é muito mais simples de fazer e mais barato de manter no ar do que fizemos antes.

Como citado antes, provedores de infraestrutura em nuvem são chamados de IaaS (Infrastructure as a Service), enquanto que provedores de plataformas em nuvem são chamados de PaaS (Platform as a Service). A DO possui as duas opções: os droplets são IaaS, mas se não quer mexer no SO, você pode usar a opção Apps do menu.

Quando acessar essa opção pela primeira vez, será solicitado que você conecte a sua conta de GitHub à DO, pois é a partir dela que os fontes serão baixados.

Nesse processo de integração, você poderá selecionar se a DO pode ver todos seus repositórios ou apenas de um projeto à sua escolha. Independente disso, na tela seguinte você deve escolher a sua aplicação e branch que será usada no deploy, podendo inclusive configurar para auto-deploy conforme forem feitos pushes na branch selecionada.

Na tela seguinte, a DO vai identificar que é uma aplicação Node.js e vai lhe questionar qual o tipo de aplicação. Uma vez que o React vai compilar como um site estático (HTML+CSS+JS), use a opção Static Site.

Avance, na tela seguinte dê um nome ao app e escolha o plano (recomendo o free/starter).

Assim que a configuração terminar, o build do app irá iniciar. Aqui a DO vai rodar o seu script de build, configurado no package.json.

Quando o build finalizar, a DO vai ter gerado para você uma URL pública para que acesse sua aplicação.

#2 – Configurando o DNS

Para usar um domínio próprio para seu front-end na DO, acesse o seu App no painel de controle, depois vá em Settings > Domains.

Adicione o seu domínio registrado e informe a opção “We Manage Your Domain”, que cria a zona de DNS na DO se ela ainda não estiver criada.

Se usar o mesmo domínio para front e back, talvez você queira ter o subdomínio www apontando para o front-end, enquanto que o subdomínio api aponta para o seu back-end, mas esta é uma decisão sua.

Repare que seu front-end vai estar rodando sob HTTPS automaticamente, sem qualquer configuração adicional. Isso se deve ao fato de que ao usarmos Static Site como tipo de aplicação, o mesmo é distribuído e protegido pela Cloudflare, uma empresa famosa de CDN.

Se você fez tudo na ordem sugerida, dos tutoriais de backend na DO até aqui, agora você tem o seu back-end, o seu banco de dados e o seu front-end publicados na DO.

Espero que tenha gostado do tutorial!

Curtiu o post? Então clica no banner abaixo e dá uma conferida no meu livro sobre programação com Node.js!

Testes de front React com Storybook, Jest e Chromatic

Recentemente escrevi diversos tutoriais a respeito de testes aqui no blog, com técnicas como unit testing, integration testing, mocking (geral, BD, AWS e de URL), etc; mas sempre abordando sob a ótica de testar bibliotecas  e web APIs. Aliás, esse já é um disclaimer: você deve ter conhecimento de testes antes de avançar neste tutorial. Os links que citei acima são um bom começo.

Mas e a interface, o front-end, estaria sempre relegado a testes manuais?

De forma alguma.

Especialmente em aplicações onde front-end e back-end são construídos de forma completamente separadas, como no caso de React, React Native e outros, o trabalho dos profissionais de front deve sim ser testado, e da mesma forma que temos vários tipos de testes diferentes no back-end, no front também é possível ter.

Em tutorial recente, eu introduzi o funcionamento do Storybook, uma poderosa ferramenta para auxiliar na construção de interfaces. Não apenas isso, o Storybook te permite fazer testes manuais dos componentes isoladamente, o que ajuda e muito nos testes manuais pois uma vez que tenham uma boa biblioteca de stories para nossos componentes, fica muito mais fácil de correr o olho por eles e achar inconsistências depois de uma modificação em um ou mais componentes.

Neste tutorial, nós vamos além dos testes manuais, mostrando como juntar o Storybook com o Jest, uma biblioteca de testes muito popular para Node.js. Conhecimento básico em ambas ferramentas é necessário antes de avançar.

Além disso, usarei os fontes do projeto anterior para escrever nossos testes. Embora não seja obrigatório, é recomendado que baixe o projeto para acompanhar melhor. Tem um formulário no final desta página para você baixar.

#1 – Configurando o Projeto

Parto do pressuposto aqui que você tem um projeto de front React já criado, podendo ser inclusive com create-react-app se quiser. Apenas certifique-se de ter um ou mais componentes nele. Eu vou usar o projeto do tutorial anterior, onde tenho um componente ListItem.js como abaixo.

Repare que uso a dependência do Styled Components, além de outras que você não vê nestes fontes mas que estão presentes no projeto original, como o React Bootstrap e o Bootstrap em si.

Neste mesmo projeto, espero que você já tenha instalado o Storybook. Caso ainda não tenha feito, acompanhe a documentação oficial ou meu tutorial anterior. Certifique-se de ter ao menos uma história nele, para um de seus componentes, a fim de termos o quê testar.

No meu caso as histórias que possuo para o componente ListItem.js citado antes estão declaradas em um arquivo ListItem.stories.js como abaixo.

Sendo que a aparência deste componente, quando visualizado no Storybook é essa.

Não há necessidade de instalar e configurar o Jest se você criou o projeto com create-react-app, pois ele já vem com a React Testing Library. Se não conhece essa bblioteca, basta você saber que rodando o comando ‘npm test’, tudo vai funcionar como funcionaria com o Jest. Caso não tenha usado o create-react-app, instale essa lib manualmente seguindo as instruções do link acima.

E para finalizar esta primeira parte de setup, crie uma pasta tests dentro de src para guardamos nossos scripts de teste.

#2 – Criando Unit Tests

O princípio básico de Unit Tests de componentes funcionais é que, dada uma entrada única, a saída esperada deve ser sempre a mesma. Ou seja, se eu passar argumentos a, b e c para um componente, ele deve SEMPRE renderizar da mesma forma. Mas se eu passar x, y e z, ele deve renderizar de outro jeito. Entende?

Vamos começar criando um arquivo ListItem.test.js para escrever os unit tests do nosso componente ListItem.js.

Repare que além dos imports necessários para testes de front, eu importei as histórias do meu componente, que por sua vez importam o componente em si.

Com as histórias eu consigo fazer a renderização do mesmo usando a função render e fazer as asserções usando uma série de funções específicas para interface. No exemplo, eu procurei o elemento da tela com o texto $ (usei uma Regular Expression) e verifiquei se ele possuía dentro o preço que foi passado por parâmetro ao componente.

As informações completas das funções existentes para testes de interface na Testing Library pode ser encontrada neste link.

Curso Node.js e MongoDB
Curso Node.js e MongoDB

#3 – Criando Visual Tests

Unit Tests são legais, mas eles podem se tornar um problemão conforme o número de componentes e estados aumenta e você faça modificações no layout deles, o que pode quebrar uma série de unit tests sem de fato ter quebrado o componente ou uma regra de negócio, entende?

Sendo assim, o Storybook nos permite outra categoria de testes que são os Visual Tests ou Testes Visuais. Ao contrário do que o nome possa sugerir, não são feitos por humanos, olhando os componentes também são automatizados assim como os unit tests e seu funcionamento consiste em tirar screenshots das histórias e depois confrontar elas com o resultado da bateria de testes.

Ou seja, Visual Tests são comparações automáticas de imagens de “antes” e “depois” dos testes, como mostrado no gif abaixo.

Mas indo ao que interessa, como podemos escrever Visual Tests para nosso componente ListItem?

Para fazer isso, vamos usar um serviço dos criadores do Storybook, o Chromatic. Este é um serviço em nuvem que vai testar e registrar a aparência dos seus componentes na nuvem. Para isso, acesse o site oficial e use a sua conta do GitHub para se logar.

Uma vez autorizado, escolha um projeto do GitHub e o Chromatic vai te dizer para instalar a dependência dele no seu projeto, com o comando abaixo.

E depois de instalado, é hora de buildar o seu Storybook. Recomendo que faça isso antes de publicar no Chromatic pois tive problemas fazendo com que ele próprio fizesse o build pra mim. Rodar o build do Storybook é muito simples, basta usar o comando abaixo.

Quando terminar, você terá um caminho para a pasta do seu build, guarde essa informação consigo pois agora você deve usá-la para que o Chromatic publique o seu Storybook na nuvem com o comando abaixo, mas note que o project-token deve ser o seu, omiti o meu no trecho de código por razões óbvias.

Vai demorar um bocado para ele publicar seu Storybook, pois depois da publicação ele faz os snapshots ainda. Com tudo finalizado com sucesso, ele perguntará se você deseja adicionar um script chromatic no seu package.json, o que é muito útil para publicações posteriores.

Você só conseguirá avançar na tela de setup do Chromatic depois da publicação encerrar. Quando terminar, você poderá avançar e conseguirá ver um resumo da publicação, como esse.

Agora, sempre que fizer uma mudança nos seus componentes e quiser ver se os screenshots do seu Storybook ainda estão batendo com os snapshots do Chromatic, pode rodá-lo novamente.

Faça uma alteração qualquer, como por exemplo uma mudança de padding no ListItem.js

E antes de rodar novamente a publicação, vamos editar o script chromatic no package.json para que ele faça o build antes da publicação e aponte para o diretório corretamente com -d.

Agora rode o script chromatic para que seja validado se as alterações recentes mudaram a interface ou não.

O resultado é bem interessante, pois o Chromatic vai detectar que tiveram alterações, mesmo sendo apenas um padding pequeno.

Se você acessar aquele link informado ao final do build, você conseguirá ver exatamente o que rolou de diferente, como na imagem abaixo indicando espaço extra que foi adicionado.

Para cada alteração, você pode aprovar ou não a mudança (Review Changes), por dentro da própria plataforma web da Chromatic. É importante ressaltar que os primeiros 5.000 testes de snapshot por mês são gratuitos, o que deve ser o suficiente para projetos não muito grandes e depois disso a plataforma cobra e cobra bem, então leve isso em consideração.

Curtiu o tutorial? Conheça a minha formação completa em Web FullStack JS clicando no banner abaixo!

Curso FullStack
Curso FullStack

Tutorial de React StoryBook

O Storybook é uma ferramenta para desenvolvimento de interfaces. Ela torna o desenvolvimento mais fácil e rápido ao isolar componentes, o que lhe permite trabalhar em um componente de cada vez. Você pode desenvolver UIs inteiras sem precisar subir uma stack completa e/ou complexa de desenvolvimento, sem ter de inserir dados na sua base ou ficar navegando pelas telas da sua aplicação até chegar no componente que quer testar.

Especificamente quando falamos de ReactJS, desenvolver interfaces não é um passeio no parque, na minha opinião. Ao mesmo tempo que componentização é uma regra nesta biblioteca, muitas vezes é extremamente custoso testar nossos componentes de maneira adequada.

StoryBook é justamente pra isso.

Para este tutorial eu vou pegar como exemplo um projeto recente envolvendo meu último tutorial de ReactJS. Não é obrigatório que você esteja usando o mesmo projeto, mas resolvi usá-lo pois ele tem dois componentes reais, não são apenas exercícios, e serão uma ótima prática pra gente. Você pode baixar o projeto ainda sem StoryBook deixando seu email no formulário ao final do tutorial passado, ou ele completo com Storybook ao final deste tutorial.

Atenção: este não deve ser o seu primeiro tutorial sobre ReactJS. Leia esta série antes ou faça meu curso de Web FullStack JS.

#1 – Instalando o StoryBook

Você precisa já ter um projeto React na sua máquina. Pode inclusive criar um do zero com create-react-app se quiser.

Navegando até a raiz do seu projeto, rode o comando abaixo para baixar e instalar o StoryBook.

Vai demorar um bocado, mas depois de terminar, você pode rodar o projeto do StoryBook com o comando abaixo.

Isso vai executar o StoryBook na porta 6006 com alguns componentes de exemplo que você pode testar antes mesmo.

Navegue pelos componentes de exemplo para entender que, para cada componente, existem “histórias” contando os seus diferentes estados. No caso do Button, por exemplo, temos as histórias Primary, Secondary, Large e Small, mostrando o que acontece com o botão com estes diferentes estados.

#2 – Entendendo as Histórias

Se você olhar no seu projeto, vai ver que foi criada uma pasta stories e dentro tem uma série de arquivos.

Para cada componente de exemplo, foi fornecido o seu JS, o seu CSS e um arquivo com o mesmo nome do componente mas terminado em stories.js que é justamente o que guarda as diferentes histórias/estados para aquele componente em questão.

Tomemos o Button.stories.js como exemplo.

Repare que, além de importar o componente real, é criado um template para o mesmo e depois os diferentes estados, definindo os args que serão passados para o componente em cada situação.

Experimente, por exemplo, criar mais uma história no final, para um botão com o texto Hello Storybook, como abaixo.

Salve e automaticamente o seu Storybook vai se atualizar e você vai ver um novo story com o Hello.

Experimente modificar esta história, alterando outras características do componente Button e até mesmo escreva mais algumas histórias, até se sentir confiante de avançar.

Curso Node.js e MongoDB
Curso Node.js e MongoDB

#3 – Criando Histórias

Agora que você entendeu como funciona, vamos criar uma história 100% original, como um bom escritor de histórias deve fazer. 🙂

Tomemos como exemplo o componente abaixo, retirado de meu último tutorial. Se você não está usando o tutorial em questão, saiba que precisará das dependências react-bootstrap, bootstrap e styled-components para que ele funcione adequadamente.

Este componente é um item que será usado mais tarde para compor uma lista de itens. Uma lista de meus livros à venda na Amazon, para ser mais exato.

Tradicionalmente, para testarmos este componente, teríamos de adicioná-lo a alguma página existente e subir a aplicação React inteira, além de ter dados mockados vindo de uma API. Ou inserindo esses dados previamente no banco de dados. Enfim, uma trabalheira.

Como podemos ver este componente em ação muito mais fácil e rapidamente? Com Storybook, é claro!

Sendo assim, crie um novo arquivo dentro da pasta stories com o nome de ListItem.stories.js e vamos colocar nele apenas uma história inicial chamada DefaultBook.

Repare que adicionei o CSS do Bootstrap no topo, para que o estilo do meu componente fique correto. Ao salvar esta história, automaticamente você verá ela atualizada no Storybook.

Vamos criar mais algumas histórias com meus diferentes livros, precisaremos deles na última parte deste tutorial.

#4 – Sequências de Histórias

Boas histórias merecem sequências, não é mesmo?

Algumas histórias do Storybook dependerão de outras histórias, isso porque alguns componentes dependem de outros componentes para existir. Nos próprios exemplos do Storybook temos um componente Page que depende de um componente Header. Vamos replicar este mesmo comportamento com ListItem e ListContainer.

Olhando meu projeto anterior em React, você deve ver que no App.js o ListContainer foi definido lá dentro mesmo, vamos extrai-lo para a pasta components em um arquivo ListContainer.js justamente para podermos testá-lo em separado.

E para não deixar o projeto anterior quebrado, vamos modificar nosso App.js para a nova realidade do ListContainer componentizado.

Agora voltando ao que nos interessa, vamos criar um arquivo ListContainer.stories.js para criar as histórias desse novo componente.

Poderíamos simplesmente criar do mesmo jeito que fizemos antes, montando os objetos na mão, mas como o ListContainer é uma lista de ListItems, isso geraria muito código repetido, pois os objetos de livros seriam os mesmos. Ao invés disso, vamos reaproveitar as histórias que criamos antes.

Esse código acima deve refletir no Storybook da seguinte forma.

Repare como importei as histórias pré-existentes de ListItem e usei cada uma delas para compor o array de books que deve ser passado como argumento para ListContainer.

A vantagem disso é muito clara quando precisamos alterar alguma das histórias anteriores e automaticamente a história do ListContainer também será alterada por consequência.

E isso remete também à própria vantagem do Storybook em si, pois uma alteração no componente original pode ser facilmente visualizada apenas navegando pelas histórias criadas, identificando mudanças fora do esperado muito facilmente.

E com isso finalizamos este tutorial. Espero ter lhe ajudado a entender as vantagens e como usar o Storybook em seus projetos de front React, explorando ao máximo um dos principais aspectos dessa tecnologia que é a componentização.

Quer aprender mais sobre testes de front-end cm Storybook, Jest e Chromatic? Dá uma olhada neste tutorial!

Até a próxima!

Curtiu o tutorial? Conheça minha formação completa de fullstack com JavaScript clicando no banner abaixo!

Curso FullStack
Curso FullStack

Tutorial Listagem com Busca em ReactJS

No tutorial de hoje eu quero lhe ensinar como criar uma tela de listagem de itens em ReactJS que, além de listar os itens usando Componentes, vamos criar uma caixa de pesquisa para filtrar os itens da listagem.

Caso seja seu primeiro contato com ReactJS, não recomendo começar com este tutorial. Ao invés disso, comece com este aqui. E para quem quiser uma formação completa em JavaScript, recomendo o meu curso.

Vamos lá!

#1 – Criando o projeto

Vamos começar criando o nosso projeto usando o create-react-app, para ganharmos tempo.

Aguarde alguns minutos até a criação do projeto terminar e assim que isso acontecer, vamos instalar uma dependência que eu gosto bastante que é a React Bootstrap. Com ela, fica muito mais fácil de estilizar nossos projetos.

Para que os estilos do Bootstrap passem a valer, você deve incluir o import do CSS abaixo no seu index.js

Também usaremos Styled Components, que é uma dependência que permite criar micro-frontends ou interfaces componentizadas muito mais facilmente.

Nosso projeto será uma listagem de livros, mas você pode adaptá-lo para qualquer realidade, apenas modificando o HTML.

Ele terá uma única página, mas com duas áreas distintas: um cabeçalho, com a barra de busca, que vamos fazer com um componente, e um botão para novo item e a listagem em si. Esta listagem será criada através da repetição de outro componente que criaremos também.

Para deixar o seu projeto rodando, use o comando abaixo.

Deve executar a aplicação React padrão, que vamos customizar agora.

#2 – Criando o componente de Item

Vamos começar pelo protagonista do nosso tutorial, que é a listagem. No entanto, vamos fazê-la replicando um mesmo componente diversas vezes, então começaremos pelo componente em si, que chamarei de ListItem e que deve ser um novo arquivo ListItem.js na pasta src do projeto.

Para usar este componente, vamos em nosso App.js e vamos incluir nosso componente lá, ao invés do padrão que vem com o create-react-app. Repare que adicionei o componente Container do React Bootstrap também, que é necessário para que as customizações que vamos fazer funcionem mais tarde.

Se você ver agora no navegador, o resultado é bem pífio, mas já demonstra que nosso componente está sendo exibido.

Nossa listagem vai ser de livros, então vamos criar um componente que tenha uma imagem da capa, o título, link e preço do mesmo, o que acha?

Podemos fazer isso em nosso ListItem.js combinando Styled Components com React Bootstrap e o jeito tradicional de criar componentes em React.

Agora voltando ao App.js, modifique o código para colocarmos alguns itens na tela, a fim de ver como ela irá se comportar. Criei um styled component para o container da lista, a fim de fazer com que ela se comporte na horizontal até o fim da tela.

Com isso, sua aplicação deve estar se parecendo com isso, o que mostra mais ou menos como vai ser a nossa listagem.

O próximo passo é tornar o nosso item da lista dinâmico, certo?

Curso Node.js e MongoDB
Curso Node.js e MongoDB

#3 – Tornando o item dinâmico

Vamos fazer isso em duas etapas.

Primeiro, vamos fazer com que as props recebidas por nosso componente sejam utilizadas ao invés dos valores literais. Para fazer isso, remova os valores literais e faça chamadas JS às props recebidas na função principal do componente.

E agora, no App.js onde está usando os ListItems, passe as props adequadas a cada um.

O resultado já deve ser visível e bem interessante.

Mas para que essa lista fique dinâmica de verdade, a sua fonte de dados deve ser um estado, que será carregado uma primeira vez com useEffect quando a página se abrir.

Esse useEffect vai precisar que os dados venham de algum lugar, geralmente uma API externa. Como isso foge ao escopo deste tutorial, sendo que aqui no blog você encontra muitos tutoriais de WebAPIs com Node.js, vamos simular com dados mockados. Para isso, crie um BooksService.js junto dos seus outros arquivos, contendo apenas a função abaixo.

Em uma situação real, essa função provavelmente usaria um Axios ou algo do tipo para chamar uma API externa. No nosso caso, ela sempre retornará o mesmo array de livros, ok?

Vamos usá-la em nosso App.js, para carregar nosso state através de um useEffect, que será chamado uma única vez quando a página for carregada.

Repare como usei um map em cima do state de books para carregar vários ListItems, definindo além das propriedades do livro, uma propriedade key que é obrigatória em listagens como essa.

Agora sim a nossa lista está dinâmica!

#4 – Criando o componente de busca

Agora vamos para a parte superior da nossa listagem, onde devemos ter um componente de busca que servirá como filtro para a lista abaixo. Vamos começar criando este componente em um SearchBar.js.

Antes de codificar este componente, vamos instalar algumas dependências relacionadas a ícones, usando a biblioteca Font Awesome para React. Também vou adicionar a dependência do React Router DOM, para manipularmos uma mudança de página mais a frente.

Agora, vamos ao nosso SearchBar.js, apenas com aparência, sem nada de comportamento por enquanto.

Referencie e use este componente no seu App.js para vê-lo em ação.

O resultado, você deve ver como abaixo.

Na próxima e última parte, vamos tornar este componente dinâmico!

#5 – Tornando a busca dinâmica

Você tem duas alternativas aqui, para tornar a busca dinâmica.

A primeira é, conforme o usuário for digitando, você vai filtrando os resultados na lista logo abaixo. A segunda é depois que o usuário terminar de digitar, ele deve teclar Enter ou clicar no ícone de busca, para a lista ser atualizada.

Eu optei pela segunda e se você reparar no código da interface do componente eu deixei chamadas para funções que ainda não criamos, no onChange do input de texto, no onChange e no onSubmit do form de busca.

Vamos programar estas funções todas agora.

Primeiro, atualize os imports do SearchBar.js

Depois, dentro da function SearchBar, adicione as seguintes funções.

Aqui, temos o state para a busca que o usuário está digitando, que é manipulado através do handleSearchChange, disparado a cada tecla digitada no input de texto, apenas para armazenar a busca.

O history é um detalhe: ele faz o roteamento para uma página que não temos, para cadastro de um novo livro. Não abordarei essa construção aqui e deixo a seu critério também a mudança de ordenação conforme o select de “mais novos” ou “mais antigos”.

Já a function handleOnSubmit é que faz o trabalho duro de filtrar a listagem, usando um filter padrão do JS e chamando uma função de setBooks que deve vir pelas props, que é algo que vou te explicar com mais calma.

Nossa listagem exibe os livros que estão salvos no state da página, certo? Então, se eu quiser mudar o que está sendo listado, devemos mudar o state. Como esse state foi definido na App.js e não na SearchBar.js, teremos de passar pra barra de busca a função que permite modificar o state, a fim de que todos vejam e manipulem o mesmo state.

Assim sendo, volte ao App.js e modifique a chamada do componente SearchBar para que ele tenha uma props setBooks recebendo a função correspondente, já carregada nesse mesmo arquivo.

Com isso, a função será passada como prop para o interior do componente que, quando for utilizado, vai modificar o state do componente-pai.

O resultado é muito bacana, digite algumas letras presentes em títulos dos livros e dê Enter para ver a lista filtrar instantaneamente.

E com isso, finalizamos este tutorial!

Nos fontes deste tutorial, que você pode baixar no formulário ao final desta página, incluí mais livros mockados, para ficar mais interessante ainda o seu desenvolvimento, além de ter organizado o projeto em pastas, para não ficar tão bagunçado.

Uma dica para te ajudar a construir componentes de UI e até mesmo organizar o design system da aplicação é dar uma estudada em React StoryBook.

Quer aprender a fazer deploy deste projeto na Heroku? Leia este tutorial!

Quer aprender a fazer outro projeto bacana e simples como esse? Leia este tutorial!

Qualquer dúvida deixe nos comentários!

Curtiu o tutorial? Aprenda muito mais sobre desenvolvimento Web FullStack com JavaScript em minha formação completa, clicando no banner abaixo!

Curso FullStack
Curso FullStack

Como publicar aplicação ReactJS na Heroku

Recentemente escrevi um tutorial aqui no blog sobre publicação de aplicação Node.js na Heroku, gratuitamente. E embora você possa fazer uma aplicação fullstack somente usando Node.js e suas view-engines (como EJS), é bem comum que o Node.js seja usado no back-end e o ReactJS no front-end.

Assim, neste tutorial eu vou lhe ensinar como subir uma aplicação ReactJS na Heroku, gratuitamente, usando Node.js e Webpack como apoio.

Atenção: este é um tutorial mais intermediário. Se você nunca criou uma aplicação ReactJS antes, comece por este outro aqui. E se quiser um provedor mais básico e simples, recomendo a Umbler.

#1 – Criando a Aplicação

Caso você não tenha uma aplicação ReactJS pronta para publicação, eu vou lhe fornecer abaixo uma muito simples, apenas para conseguir realizar este tutorial.

Primeiro, crie uma pasta para o seu projeto e dentro dela uma pasta src, adicionando dois arquivos nela, um index.html e um index.js.

No index.html, crie a seguinte estrutura.

E no index.js, o JavaScript do ReactJS.

Na raiz do projeto, rode o comando abaixo para inicializar sua aplicação.

E agora vamos instalar os pacotes do ReactJS que vamos precisar.

Além dos pacotes do React, precisamos instalar algumas dependências de desenvolvimento, para que o nosso build deixe a aplicação corretamente preparada para produção. Para isso, usaremos o Babel, que é um transpilador famoso para garantir compatibilidade com todos os browsers (lembrando que aplicações React rodam no browser) e o Webpack, que é um empacotador de código, gerando um build super otimizado.

O webpack trabalha com loaders, que são extensões que fazem determinadas atividades em alguns tipos de arquivos, assim, instalei junto os loaders de HTML e de do Babel, para conectar o webpack com ele.

Vamos ter de configurar o webpack, começando pelo Babel, que será usado por ele. Para isso, crie um arquivo .babelrc na raiz do seu projeto, que diz ao Babel os módulos que ele deve usar para a transpilação, sendo que usaremos o preset-env (que transpila ES6) e o preset-react (que transpila ReactJS).

Agora, crie um arquivo na raiz do seu projeto chamado webpack.config.js com as configurações do webpack:

Aqui estamos dizendo ao webpack que ele deve carregar também o HTML, que o start da nossa aplicação é o index.js, que ele não deve se preocupar com a node_modules e que deve usar os loaders de HTML e do Babel.

Infelizmente não é possível subir um site estático na Heroku, que é exatamente o que o ReactJS compila quando preparamos ele para produção. Logo, teremos de fazer alguns ajustes em nosso projeto.

Para testarmos nossa aplicação, vamos adicionar dois scripts no nosso package.json.

O primeiro será disparado quando usarmos “npm run dev” e serve para testarmos nossa aplicação.

O segundo serve para compilar ela para produção, e será disparado com “npm run build”.

Teste a sua aplicação antes de avançar neste tutorial. O webpack vai subir sua aplicação ReactJS na porta 8080.

#2 – Preparando a aplicação

Agora que temos nossa aplicação pronta e rodando, temos mais um último ajuste a fazer antes de subir para a Heroku. Isso porque não funciona na Heroku a publicação de um site estático, que seja simplesmente uma página HTML e um JS, que é exatamente o resultado do build de uma aplicação React.

Para contornar este problema, vamos escrever um pequeno servidor de arquivos usando Node.js + Express que entregará o conteúdo estático do ReactJS a cada requisição em nossa aplicação na Heroku.

Primeiro, instale a dependência do Express na nossa aplicação.

Segundo, crie na raiz do projeto (fora da src) um arquivo server.js, com o seguinte conteúdo.

Note que este servidor está entregando arquivos da pasta dist, que é a pasta onde fica o build da aplicação depois de compilada. Também repare que uso uma variável de ambiente para a porta, esta é uma exigência da Heroku, pois lá as portas são dinâmicas.

Para finalizar os preparativos, apenas adicione mais um script no seu package.json, deixando-o como abaixo.

O script de start vai subir a nossa aplicação através deste novo servidor de arquivos que criamos com Express.

Teste esse último ajuste rodando um “npm run build” e depois “npm start”, deve funcionar corretamente, assim como antes, mas agora estaremos utilizando a versão de produção da nossa aplicação!

Curso Node.js e MongoDB

#3 – Publicação na Heroku

Acesse o site Heroku.com e crie a sua conta gratuitamente, não é necessário cartão de crédito.

Logo na página inicial da sua nova conta, você terá um botão roxo de “Create new app”, clique nele para criarmos nossa primeira aplicação (a Heroku permite criar várias aplicações pequenas gratuitamente, então não se preocupe).

Na tela que vai se abrir, de criação de app, dê um nome único para o app e escolha a região que ele vai estar localizado. Finalize clicando no botão roxo de “Create app”.

Assim que você terminar a criação da aplicação na Heroku, você deve escolher uma de três formas de publicação, sendo que a mais simples de todas é a Heroku Git, que usa o Heroku CLI.

Clicando em Heroku Git, logo abaixo vão abrir instruções para você  instalar o Heroku CLI, que é uma ferramenta de linha de comando para fazer deploy na Heroku.

O primeiro passo é baixar o Heroku CLI e instalar nos eu sistema operacional, sendo que existem versões para os principais sistemas operacionais. Você vai precisar também do Git instalado na sua máquina, se ainda não tiver ele.

Uma vez com o CLI instalado, você terá um comando heroku no terminal para executar uma série de operações na Heroku. A primeira que temos de fazer é o login, então execute o seguinte comando.

Uma janela do navegador vai se abrir para você se autenticar na sua conta e fornecer acesso ao terminal em seu nome.

Depois de autenticado, inicialize um repositório git na pasta do seu projeto, se ainda não o fez e adicione uma origem remota do git da Heroku, que vai ser utilizado para o deploy.

Ou seja, quando você der push neste repositório da Heroku, sua aplicação vai subir em produção.

Atenção: myproject é um nome fictício para a pasta do projeto e myapp é um nome fictício para minha aplicação na heroku. Use os valores correspondentes ao seu caso.

Não esqueça de incluir um arquivo .gitignore na raiz da sua aplicação, para não enviar para a Heroku sua pasta node_modules e outros arquivos/pastas que não fizerem sentido.

Como já mencionei antes, outro ponto importante é sobre a porta da sua aplicação. A aplicação Node.js (e nosso server.js é uma aplicação Node, é ele que vai entregar o ReactJS probrowser) sobe na Heroku em uma porta escolhida POR ELES. Assim, você deve usar a variável process.env.PORT no seu código pois é a partir dela que a Heroku vai se achar.

O próximo passo aqui é bem direto: adicione seus arquivos, commite e dê um push na origem da Heroku para enviar seus arquivos pra eles publicarem em produção.

Quando seus arquivos chegarem na Heroku, ela vai detectar que a sua aplicação é Node.js no primeiro push e instalar os binários do Node.js, além das dependências listadas no package.json.

Enquanto o deploy acontece, você pode acompanhar o andamento tanto pelo terminal quanto pela página inicial da sua aplicação no painel da Heroku.

Ainda pelo terminal, você pode executar o comando abaixo para ver o resultado do seu deploy.

Isso irá abrir uma janela do terminal no endereço público que a Heroku cria para a sua aplicação.

Caso dê algum erro, você pode ver os logs pelo terminal usando o comando abaixo.

Um último ajuste que você vai querer fazer é definir o seu domínio registrado apontar para a sua aplicação na Heroku, para isso basta você criar um registro CNAME no seu provedor de DNS apontando para o endereço que a Heroku cria para você.

E com isso finalizamos este tutorial de publicação (deploy) de aplicação ReactJS na Heroku.

Espero que tenha gostado.

Você tem um backend em Node.js também? Aprenda a publicá-lo na Heroku com este tutorial aqui.

Ou se quiser algo mais avançado, que tal publicar seu backend Node.js na AWS, com este tutorial aqui?

Quer aprender a construir aplicações SaaS profissionais usando a stack completa do JavaScript? Conheça o meu curso abaixo.

Curso FullStack
Curso FullStack