Compartilhar conteúdo é o que há de mais comum na internet e em aplicativos. Compartilhamos fotos, mensagens e tudo mais que podemos. Dentre o que mais compartilhamos estão as URLs.
Abaixo, vou mostrar como podemos guardar e recuperar informações via URL em aplicações React. Dessa maneira usuários podem compartilhar a URL mantendo o mesmo estado da página compartilhada.
Uma implementação bem comum quando desenvolvendo um aplicativo, é aplicar filtros em uma lista de dados. Por exemplo, uma tabela com dados pessoais e filtros por coluna ou, uma página de produtos de um E-commerce que contém filtros para cada atributo de seus items. Ser capaz de compartilhar a página em questão com todos os filtros aplicados é fundamental.
Vamos ao código:
Abaixo tenho a minha aplicação: Uma lista com dados de pessoas como nome, sobrenome, idade e profissão. A aplicação tem 2 componentes importantes:
O componente App
importa os dados da lista - que no caso abaixo é apenas um arquivo com dados aleatórios contendo nome, idade e cidade. Poderia também ser dados de uma API qualquer.
O component List
recebe os dados da lista, bem como o cabeçalho a ser mostrado. Baseado nestas duas informações a tabela é montada.
O resultado é:
O meu próximo passo é fazer com que a usuário consiga ordenar a tabela simplesmente clicando em um dos items do cabeçalho. Ou seja, ordenar a tabela por uma de suas colunas.
Para chegar lá vou separar o cabeçalho da minha tabela em um componente próprio e fazer com que cada item seja clicável. Vou criar o componente Headers
:
E então, atualizar o componente List
para importar o novo componente Headers
Ao clicar em algum dos items do cabeçalho, imprimo um log com o respectivo header
clicado:
Agora vou atualizar o método headerClick
para guardar na URL qual o último cabeçalho foi clicado. Para isso vamos utilizar o construtor URLSearchParams. Veja como ficou:
Na primeira linha recupero todas a variáveis de URL disponíveis, ou seja, tudo do tipo: ?variavel=1
.
Na segunda linha definimos o parâmetro sort
com o valor do cabeçalho clicado. Ex: ?sort=name
.
E por fim, na terceira linha, escrevo minha alteração na URL.
A partir deste momento, qualquer clique em um dos items do cabeçalho vai resultar na alteração da URL, com o parâmetro sort
sendo atualizado de acordo.
Meu último passo é ler o parâmetro sort
da URL e então ordenar a minha lista de acordo com este parâmetro. Para isso vou utilizar o mesmo construtor utilizado anteriormente, com a diferença do método get
ao invés do método set
. Veja como ficaram as alterações no component List
:
Agora que sei exatamente qual item foi clicado, posso ordenar a lista de acordo:
Fiz uso do método sort
para ordenar a lista. No método em questão, eu comparo os valores da lista para a propriedade selecionada e retorno um número positivo ou negativo, baseado no resultado desta comparação.
Por exemplo, se minha variável sort
tem como valor name
, vou então comparar apenas os items da propriedade name
(a[sort]
). Vejo então que João vem antes (é menor) que Maria e portanto, deve aparecer primeiro na lista.
Este é o resultado após clicar no cabeçalho name
:
Guardar dados na URL é extremamente efetivo quando sabemos que o usuário deseja compartilhar a página em questão da maneira como ele vê. E não se limita apenas a listas. É possível utilizar esta técnica de inúmeras maneiras diferentes.
Por exemplo, quando utilizamos a ferramenta Jira, é possível compartilhar uma URL com um parâmetro para que o modal do ticket esteja aberto. Desta maneira, o usuário que receber a URL compartilhada saberá exatamente o que o outro usuário está compartilhando.
Aproveite então desta técnica, utilize a sua criatividade e faça páginas com melhor usabilidade.
]]>Veja o código deste post aqui
Uma das vantagens mais legais de React é poder controlar o estado de um único componente de sua aplicação de um jeito simples e direto. Isso inclusive sem influenciar o estado de outros componentes. Tal mágica é um conceito que deve ser bem compreendido, a fim de construir aplicativos mais complexos e robustos.
Nesse post vou tentar deixar bem claro como estados são controlados, o conceito de controlled vs uncontrolled components, como variáveis de estado eram criadas em componentes classes e por fim, como são criadas hoje com hooks.
Para um melhor alinhamento com o código e com a documentação oficial, vou utilizar alguns termos em inglês:
Se você começou a aprender React por agora (últimos 2-3 anos) se deparou de cara com o conceito de hooks. Através de hooks é possível declarar state variables em componentes funções. Dependendo de quão recente é o seu conhecimento sobre React, é totalmente possível que você sequer tenha visto um componente classe.
Bom, nem sempre foi assim. Na verdade, nem sempre É ASSIM!
Antes de hooks serem introduzidos, para que um componente pudesse ter state variables era necessário que este componente fosse uma classe.
Vamos ver na prática:
Este é um simples componente classe. Nada de useState hook.
Vamos entender o código acima, mas focar no uso do setState e no conceito de estado do componente:
Este bloco é responsável pela declaração inicial da variável de estado que será usada no componente. O objeto this.state
aceita inúmeras propriedades e de quaisquer tipos.
Por exemplo, poderíamos adicionar uma outra propriedade disabled
para habilitar/desabilitar nosso campo texto. Ficaria assim:
E no elemento input:
Por fim, temos a função render
que é responsável por mostrar os elementos HTML do nosso componente. É dentro dela que vou utilizar as variáveis de estado. Vejamos:
O return
da função render
é sempre o que será renderizado na tela pelo componente. No caso acima um input
do tipo texto. A função render
é re-executada sempre que há uma mudança na variável de estado. Ou seja, sempre que a propriedade value
da nossa variável de estado muda, o método render
executa e atualiza o campo value
do input
.
Este processo se repete sempre que alguma propriedade de uma variável de estado atualize. Na verdade, para ser um pouco mais claro, sempre após uma chamada ao método setState
, a função render
vai ser chamada.
Isto nos leva a uma nota importante:
NUNCA altere o valor de uma variável de estável diretamente! 😱💣
Em componentes classes, variáveis de estado devem ser alteradas apenas com o uso do método setState
. Isto porque quando alterado diretamente, o componente não vai atualizar. Ou seja (mais uma vez), para que o método render
seja chamado novamente e com valores diferentes, setState
tem que ter sido acionado antes. Desta maneira a interface muda de acordo com a mudança da variável de estado.
O componente que acabei de criar é chamado de controlled component. Tal componente é composto por um ou mais elementos de um formulário e, seu valores e as atualizações dos mesmos são controlados por variáveis de estado React.
Componentes que apresentam elementos de formulário, mas seus valores não são controlados por variáveis de estado, são chamados de uncontrolled components.
A introdução dos hooks nos deu uma nova alternativa de como escrever e controlar as variáveis de estado de um componente. Na minha opinião, foi uma melhora muito grande. A começar pelo fato de (na maioria dos casos) não haver a necessidade de criar componentes classe, mas apenas funções.
Mas como isso é feito!? 🤔
Através do hook useState
!
Para que possamos ter um claro entendimento e podermos comparar com o setState, vou rescrever o código que fiz acima utilizando apenas o useState hook.
O primeiro passo é transformar meu componente classe em uma função. Isso porque, hooks não podem ser usados dentro de componentes classe. Sendo assim, vamos as mudanças necessárias:
A primeira delas foi declarar o nosso como uma variável que recebe uma função. A outra foi remover o método render
, já que dentro de um componente função o que será renderizado é o retorno da mesma, ou seja, tudo aquilo dentro do return
.
O segundo passo é alterar a nossa variável de estado value
para hooks:
Uau!! 😱😱 Agora sim! Mudanças significativas!
A principal foi a alteração do this.state
pelo useState
.
Diferentemente do this.state
- que é um objeto - o useState
é uma função que recebe um argumento e retorna um array com dois elementos. Posso ter inúmeros useState
dentro do meu componente, separando assim as minhas variáveis de estado. Ou então, posso criar uma única variável de estado que vai armazenar outras variáveis. Depende do que estou implementando.
O argumento é o valor inicial da minha variável de estado. No caso acima uma string vazia (‘’). Este pode ser qualquer valor que uma variável JS pode suportar. Strings, arrays, numbers, objects, functions e por aí vai.
Os dois elementos dentro do array são:
value
: É a variável responsável por armazenar o valor e portanto, ser utilizada no meu componente.setValue
: É o método responsável por atualizar o valor da variável de estado.Ou seja, assim como não podia alterar o this.state
diretamente, também não posso simplesmente alterar o valor da variável value
, pois isto não ira “re-renderizar” meu componente. Para que o componente atualize com o novo valor da minha variável de estado, é necessário chamar o método de atualização correspondente. No caso acima setValue
.
As outras alterações que fiz são:
useState
pela biblioteca react
.constructor
. Se faz necessário apenas dentro de componentes classe.onChangeValue
para usarmos setValue
ao invés do setState
.A nível de simplicidade e legibilidade eu acho hooks incríveis. No entanto, o que mais me impressiona - e também onde vemos o seu verdadeiro poder - é quando criamos nossos próprios hooks. Mas isto é um artigo para outro momento.😊
setState
ou useState
?Se existe a necessidade de criar um componente classe, então não tem jeito, tem que ser setState
. No entanto, em todos os outros casos a recomendação é que se crie um function component e utilize useState
hook.
useState
tem um sintaxe mais simples e uma funcionalidade mais poderosa, sendo - ao meu ver - a melhor escolha. Além do mais, permite que eu escreva mais componentes função do que classes.
Outro fator determinante, é a quantidade de bibliotecas que estão usando hooks e disponibilizando os mesmos para uso. Tal fato contribui para um código muito mais consistente.
E como sempre, a melhor forma de realmente compreender é colocando a mão na massa. Pegue aquela classe simples do seu app e transforme em uma função, utilizando hooks no caminho. Ou então, implemente um novo componente e utilize apenas hooks.💪
Espero que se divirta no processo!! 😃
Se gostou desse artigo, se inscreva e receba semanalmente este e outros conteúdos diretamente no seu email. Sem spam! 😎
]]>Criar seu primeiro aplicativo com React pode ser uma tarefa árdua e cansativa. Inclusive, muito antes de escrever a primeira linha de código. Isso porque antes mesmo de criar algum componente, o desenvolvimento frontend exige várias configurações iniciais. E isso pode se tornar pesadelo.
Vimos em alguns outros posts sobre a necessidade de ferramentas como um servidor web, webpack, babel, lint e várias outras que nem mesmo comentei sobre. Já adianto que algumas delas não são divertidas de configurar. E ter todo esse arsenal de ferramentas para estudar logo de cara, pode ser bastante desmotivador.
Outros desenvolvedores que também tiveram tais dores, criaram ferramentas incríveis que nos possibilita ter uma excelente configuração out of the box, e assim, podermos iniciar com a parte mais divertida: escrever código!
Desde scripts simples, até frameworks mais avançados, vou descrever um pouco sobre algumas das principais ferramentas que vão te ajudar a iniciar seu projeto frontend com React.
Mas antes vamos entender 3 estratégias de construção de aplicativos frontend: SPA, SSR, SSG
Single Page Applications são aplicativos web de página única. Ou seja, todo o código é carregado uma única vez (no primeiro carregamento da página) e a partir daí, qualquer envio e recebimento de dados e feito através de API requests.
Este tipo de aplicativo visa trazer uma experiência similar a um aplicativo nativo. SPAs tentam criar uma navegação mais fluida através de um carregamento particionado, ou seja, apenas partes da página que necessitam ser atualizadas o são. O que difere de uma página web tradicional, onde ações e cliques, levam ao carregamento de outra página.
React e seus conceitos de componentização e de atualização baseado em mudança de estado, facilitaram e muito o desenvolvimento das SPAs. Com a sua chegada e popularização, ficou mais fácil criar aplicativos com inúmeros componentes individuais e que eram atualizados, de acordo com estado de cada um dos componentes.
A partir daí, inúmeras outras bibliotecas foram criadas para auxiliar no desenvolvimento de SPAs, como: react-router, redux, axios e tantas outras.
A maioria das páginas de internet são montadas no servidor e este, apenas as serve para os navegadores através de arquivos HTML. A grande sacada do Server Side Rendering foi utilizar o melhor dos dois mundos. Faz-se um carregamento inicial da página pelo servidor e, após a pagina carregada, quaisquer novas alterações são feitas através do lado do cliente. Diferentemente de uma SPA, a qual utiliza o navegador para a criação da página HTML.
Com isso, um aplicativo SSR tem algumas vantagens, como diminuir (algumas vezes muito) o tempo de espera de carregamento da página, ter um melhor ranking nos buscadores, facilitar o uso de tags open graph e muitas outras.
React por si só não consegue realizar tais façanhas. Ele roda apenas no navegador e portanto, se faz necessário ter algo rodando no lado do servidor, que vai renderizar o conteúdo inicial. Frameworks server side como NodeJS e Ruby on Rails podem ser necessários para que o Server Side Rendering aconteça.
Static Site Generator como o nome já diz, é um framework que cria páginas HTML a partir de templates ou componentes de uma dada fonte. Estes são uma alternativa aos websites dirigidos por banco de dados.
Em páginas web e aplicativos que necessitam que seus dados sejam imediatamente acessados, a toda requisição, pois mudam com frequência, se faz necessário um banco de dados. Já páginas que que tem um conteúdo estático e sem mudanças com alta frequência, SSG é perfeito. Pois, com a geração das páginas estática, elimina-se o intervalo necessário para a comunicação com o banco de dados.
As páginas são geradas no momento do build do site. Ou seja, os arquivos HTML gerados estarão prontos quando requisitados. Desta maneira, páginas são carregadas com muito mais velocidade, evitando quedas por picos de acesso.
Tal estratégia é perfeita para blogs e landing pages.
A primeira e mais popular ferramenta - que nada mais é do que um boilerplate - é o create-react-app
. Com ele é possível ter uma configuração inicial para criar um aplicativo React. Ele já vem com vários pacotes e scripts que vão te ajudar na parte inicial do seu projeto. É uma maneira muito simples de criar um SPA com React.
Após a criação de seu projeto com create-react-app
, já é possível ir direto ao código e então rodar tudo no browser sem qualquer dificuldade. Ferramentas como eslint, webpack, babel, jest, hotreload e env vars já vem incluso e pronto para ser usado. E essa é a principal vantagem quando usamos boilerplates: reduzir algum tipo de trabalho inicial para que possamos começar o projeto passos a frente.
A grande vantagem do Create React App é ter a equipe que criou o React - e do Facebook - por trás. Além do fato de ser código aberto.
Outra característica importante é o fato do projeto conter apenas uma dependência inicial: react-scripts
. Este pacote é o responsável por manter funcionando todos os outros pacotes de configuração do seu projeto. Através dele também é possível gerar seu app com todas as configurações para produção, como minification, code splitting, compression e muito mais.
Talvez a sua maior desvantagem seja a dificuldade de customização. Por manter tudo encapsulado dentro de um único pacote, Create React App dificulta a inserção e remoção de outros pacotes que, porventura, necessitamos utilizar. Isso prova ser excelente para aplicações comuns, mas não para aplicações que tenham um escopo diferente da maioria e exigem configurações avançadas.
A boa notícia é que ele oferece o recurso eject
. Tal recurso permite que o desenvolvedor possa se desvincular do pacote react-scripts
e então, editar diretamente todos os arquivos de configurações. No entanto, após o eject, não é mais possível voltar para o Create React App e todas as configurações, desde atualizações à correções de segurança, ficam na mão do time de desenvolvimento.
Este tem sido amplamente adotado nos últimos tempos e o hype é justificável. Vite é rápido!
Frontend nunca teve tanta relevância no desenvolvimento web como nos últimos anos. Consequentemente, Javascript nunca foi tão importante. Aplicações de todos os tipos e complexidades tem usado frameworks frontend. Não é raro encontrar repositórios enormes em que Javascript é a linguagem principal. E com esse montante de código só aumentando, velocidade e performance tende a cair.
Felizmente os navegadores também vêm se desenvolvendo e as ferramentas de bundling tem se aproveitado disso. Esse é o caso do Vite. Ele tenta resolver os problemas de modularização de grandes aplicações utilizando as novas ferramentas nativas dos navegadores - as quais não existiam antes.
As suas principais vantagens são:
Melhora na velocidade de inicialização do servidor de desenvolvimento
Quando em um projeto medio/grande porte, iniciar o servidor pode levar um tempo considerável. Vite atua pra diminuir esse tempo.
Melhora na velocidade de atualização do build quando em desenvolvimento
Quando editamos arquivos em projetos frontend, o *build* deve acontecer novamente. Este processo pode ser um pouco mais demorado se o projeto é maior. Vite deixa tudo mais rápido.
Se você está começando no mundo React, vale a pena começar com Vite. Retirar gargalos já no início do processo de desenvolvimento, pode deixar o caminho muito mais fácil.
Mais do que os outros dois boilerplates, NextJS é um framework. Ele não só vai te ajudar com as configurações e códigos iniciais no seu projeto, como vai te dar também, uma estrutura completa.
No NextJS a estrutura de pastas já é definida. O roteamento do seu aplicativo, suporte para TypeScript e otimização de imagens também já está lá. Além de tudo isso, ainda é possível escrever código backend com NodeJS. Páginas podem ser geradas do lado do servidor de uma maneira bem simples. Com isso podemos utilizar de estratégias como SSR e SSG.
Ele também te permite construir sua API no mesmo projeto. Tal característica permite ir além do frontend, e assim, integrar seu aplicativo com banco de dados, meios de pagamentos e outras APIs de terceiros. Tudo dentro do mesmo projeto.
Tais características fazem do NextJS um framework React robusto e de muita qualidade. Aliado com a plataforma Vercel, é possível criar aplicativos prontos para produção de maneira muito rápida.
Apesar de ser um framework ainda novo, ele ganhou força e vem entregando o que promote. Ele tem inúmeros comentários positivos da comunidade frontend e vem crescendo cada dia mais. Tem sido a minha escolha na criação de novos projetos React.
Gatsby é outro framework frontend muito poderoso. A sua proposta é facilitar o desenvolvimento de páginas web através da técnica de SSG. Utilizando React e outras tecnologias top de mercado como GraphQL e Webpack, é possível criar páginas extremamente rápidas e escaláveis. Talvez por isso este framework tem sido o preferido quando o assunto é Marketing websites.
Gatsby permite que o desenvolvedor combine dados coletados de diferentes lugares em uma única página. Por exemplo, é possível carregar produtos de uma loja Shopify e um formulário Mailchimp.
Outro fator que salta os olhos é sua velocidade. Por conta da estratégia de SSR, combinada com algumas outras, Gatsby te dá a possibilidade de construir um site performático e rápido, ajudando a melhorar tráfegos orgânicos.
Com tantas características disponíveis de imediato e de fácil configuração, Gatsby é super popular. Vale a pena dar uma olhada em seus casos de sucesso e conferir se é uma boa idéia para você.
Direto ao código!! 👨💻
Quando no início, o que mais deixa um programador feliz é programar. Isso significa que dado as inúmeras ferramentas presentes no desenvolvimento frontend, tentar eliminar a maior quantidade possível de trabalho que não seja código, vai ajudar o programador iniciante no seu aprendizado.
Não me entenda errado!! Saber sobre ferramentas, servidores, bibliotecas e editores faz parte do mundo da programação. Eventualmente vai se tornar imprescindível conhecer sobre os diferentes cantos deste universo. No entanto, alguns destes conceitos podem ser cansativos e desanimadores no início.
Minha dica é: escolha um framework que te dê as configurações prontas e comece a escrever código Javascript usando React no dia 1. E então, conforme vá evoluindo, se aprofunde no mundo a sua volta.
Bons estudos!
Se gostou desse artigo, se inscreva e receba semanalmente este e outros conteúdos diretamente no seu email. Sem spam! 😎
]]>Uma das grandes vantagens de adotar a biblioteca React é a reutilização de código. E isso se dá através de seus componentes. React é extremamente poderoso nesse sentindo.
Você pode reutilizar componentes inúmeras vezes, evitando a repetição de código desnecessária e facilitando a manutenção do mesmo. E isso se dá com alguns simples passos.
No primeiro post criei uma aplicação React bem simples. No último post evoluí a aplicação inicial com o uso de JSX. Agora vou conectar diferentes componentes e formar uma aplicação um pouco mais complexa. Para isso, vou criar um simples formulário com um input para email, outro para senha e um botão de “Enviar”.
Vamos dar uma olhada como está o nosso arquivo index.html do post anterior:
Até o momento tenho apenas um único componente: Button.js
.
Para que o formulário possa ser criado vou precisar de mais 3 componentes:
É claro que esta é apenas uma maneira de fazer um formulário. Eu poderia criar um único componente e colocar tudo lá (o que acaba deixando difícil de manter).
No entanto, o nosso objetivo hoje é criar componentes que possam ser reutilizados.
Um componente Email pode ser utilizado em várias partes de uma aplicação, assim como um componente Button. Porém, se eu fizer tudo em um só componente veremos que ele não vai ser tão reutilizável assim, pois terá características exclusivas.
Vamos ver na prática como isso se dá!?
Antes de iniciar com o código, preciso rodar o servidor local responsável por servir a página html e meus componentes React. Seguindo os passos do post de como configurar um servidor local, rapidamente consigo levantar um servidor Express e rodar minha aplicação.
Assim ficou a configuração do meu servidor:
E assim está o meu package.json
:
Agora basta rodar:
yarn start
E o meu servidor está pronto e esperando pela minha aplicação React.
Vou criar o novo componente EmailInput.js
.
Na maior parte do componente não vemos nada de novo.
EmailInput
render
responsável por retornar os elementos que serão renderizados na pagina.Na última linha, escrevi algo que ainda não tinha mostrado.
export default EmailInput;
O export
diz ao compilador que este arquivo pode ser importado dentro de algum outro.
O default
deixa claro qual classe (função ou variável) será, por padrão, chamada quando for importada. No caso acima a classe EmailInput
.
Agora vou criar o segundo componente: PasswordInput.js
.
Muito parecido com o componente email, não é mesmo!? A única diferença é o atributo type
do input
HTML.
E por último, vou criar o componente que irá importar EmailInput
, PasswordInput
e Button
.
E por fim, preciso de um componente que seja capaz de renderizar os outros dois componentes criados e, também, o componente Button
criado anteriormente.
Vou chamá-lo de Form.js
:
Na segunda e terceira linha importei os componentes inputs criados ao longo do post. Este é o motivo pelo qual adicionei export default
e declarei exatamente qual classe gostaria de exportar. Desta maneira, os fiz “exportáveis”.
Após as importações, posso enfim, utilizá-los em outro componente - no caso, o Form
.
Dentro do método render
adicionei uma tag <form>
para deixar claro para o navegador sobre o bloco que estou construindo. Então, adiciono EmailInput
e PasswordInput
da mesma maneira que escrevo qualquer outra tag HTML.
Para que o meu arquivo Form.js
seja carregado, preciso chamá-lo dentro do arquivo index.js
principal.
Este é o arquivo inicial e será o primeiro arquivo a ser carregado quando a aplicação estiver rodando. A partir deste arquivo inicial os outros componentes serão carregados.
Assim ficou o index.js
:
Vamos ao resultado:
Claramente não era isso que eu esperava! 😔
Aparentemente o browser não consegue lidar com os imports e com a modularização da nossa aplicação.
Para resolver isso vamos precisar de outra ferramenta muito utilizada no mundo frontend: Webpack.
Webpack é definido como um empacotador estático de módulos. Ele processa a minha aplicação e, internamente, cria um grafo de dependência com um ou mais pontos de entrada e então, combina cada módulo do projeto em um ou mais pacotes que serão servidos através do navegador.
Ou seja, ele facilita a modularização de uma aplicação, criando maneiras mais eficientes de acessar cada um dos muitos módulos criados.
Vamos à prática. Instale o webpack:
yarn add webpack webpack-cli --dev
Instale o Babel:
yarn add @babel/core @babel/preset-env @babel/preset-react --dev
Crie uma pasta chamada dist
na raiz do seu projeto:
mdkir dist
Copie o index.html
para a pasta dist
mv index.html dist/.
Assim está a estrutura do meu projeto:
react-app
|- package.json
|- index.js
|- /src
|- Button.js
|- index.js
|- Form.js
|- EmailInput.js
|- PasswordInput.js
|- /dist
|- index.html
|- /node_modules
Todo o código React da minha aplicação está dentro da pasta /src
. O primeiro index.js
, que está na raiz do projeto, é responsável pelo nosso servidor Express.
Um último passo para utilizar webpack com React é configurar como o processamento vai ser feito. Para isso vou criar um arquivo de configuração na raiz do meu projeto:
touch webpack.config.js
Ao abrir o arquivo webpack.config.js
vou adicionar as seguintes linhas:
Com isso eu garanto que webpack vai sempre iniciar o processamento do meu código pelo arquivo src/index.js
e vai utilizar o Babel - falo mais sobre ele aqui - para entender meu código React.
Por último é só utilizar o webpack para processar minha aplicação e gerar o código que vou utilizar em minha página.
npx webpack
Pronto! Meu arquivo JS foi gerado na pasta /dist
com o nome main.js
.
Hora de testar! 🥁
Será preciso uma pequena alteração no meu arquivo /dist/index.html
lá do começo do post para que meu aplicativo rode corretamente. Vou substituir a tag script
que está chamando o Button
para que carregue o arquivo index.js
gerado pelo webpack:
Pronto! Agora já posso testar no navegador.
Primeiro inicio o meu servidor local:
yarn start
Então, acesso a página localhost:5000
e… 🎉:
Uma das principais vantagens de utilizar React e poder criar componentes que serão reutilizados em outras partes da aplicação. A famosa componentização que sempre vemos por aí. Cria-se uma vez e utiliza-se várias.
Tal vantagem facilita o desenvolvimento e o deixa mais rápido! 👨💻💪
Convenhamos que desenvolver software da maneira como fizemos neste post não é tão ágil assim. Por isso a comunidade JavaScript e React criaram ferramentas que vão nos ajudar a desenvolver apps React de modo muito mais rápido.
No próximo post vamos dar uma olhada no Create React App.
Até a próxima!
Se gostou desse artigo, se inscreva e receba semanalmente este e outros conteúdos diretamente no seu email. Sem spam! 😎
]]>Quando entramos no mundo de desenvolvimento web eventualmente vamos precisar configurar um servidor local. É muito comum no início do aprendizado, apenas abrir arquivos HTML no navegador. Mas eu, como desenvolvedor frontend, não posso simplesmente continuar abrindo o arquivo HTML diretamente do meu diretório em uma página web? Sim! No entanto, existem limitações que me impediria de criar um aplicativo ou uma página mais complexa.
Um servidor local me aproxima do ambiente de produção - ambiente o qual irá hospedar meu aplicativo (ou página) e será acessado pelos usuários finais - e também, habilita o browser a utilizar mais recursos do que se rodo o arquivo de um diretório comum.
Existem inúmeros servidores e frameworks web gratuitos e de fácil instalação. Dentre os mais famosos posso citar: Apache, nginx e Puma. Cada um com a sua especificidade.
Como o meu objetivo é rodar uma aplicação JavaScript, usando React, vou utilizar o Express. Ele pode ser utilizado em conjunto com o Node.js para servir páginas estáticas. E este é o nosso objetivo.
Sendo assim, vou precisar instalar algumas outras ferramentas.
Existem algumas maneiras de instalar o Node.js. É possível realizar a instalação simplesmente baixando o Node.js através do site oficial. A meu ver a maneira mais fácil é utilizar o Node Version Manager - nvm.
Após a instalação do nvm abri o terminal e digitei o seguinte comando para instalar a versão mais recente do Node.js:
nvm install node
Depois:
node -v
E a versão instalada foi v14.0.0
.
Pronto, agora posso seguir com a instalação do Express.
yarn é um gerenciador de pacotes que me permite utilizar e compartilhar códigos de outros desenvolvedores de uma maneira super fácil. Vou utilizá-lo, pois facilita a instalação do Express, bem como de outros pacotes necessários durante o desenvolvimento com React.
No site oficial existem diferentes maneiras de como instalar o yarn, baseado no sistema operacional. Como estou em um macOS instalei utilizando o Homebrew:
brew install yarn
yarn instalado! Agora posso enfim instalar o Express.
Primeiro, através do terminal, vou criar uma nova pasta para a minha aplicação:
mkdir ~/react-app
cd ~/react-app
Já dentro da pasta criada, vou iniciar o yarn
yarn init -y
Este comando cria o arquivo package.json
, responsável por organizar os pacotes instalados através do yarn.
Agora, vou instalar o Express
yarn add express
Express foi instalado com sucesso!
Com o Express instalado vou criar o arquivo responsável por configurar e iniciar o servidor que irá servir o meu aplicativo React. Ainda dentro da pasta react-app
irei criar o arquivo index.js
:
Adicionei comentários ao código acima para que fique compreensível cada linha. Mas, este simples trecho de código, é responsável por servir o nosso aplicativo React.
Vou agora adicionar uma entrada script no arquivo package.json para que possamos iniciar nosso servidor.
O meu package.json até o momento está assim:
{
"name": "react-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
},
"scripts": {
"start": "node index.js"
}
}
Adicionando o trecho "start": "node index.js"
me permite iniciar o servidor através do seguinte comando no terminal:
yarn start
E esta foi a resposta:
Ao abri meu navegador e acessar o endereço http://localhost:3000 vejo a seguinte mensagem:
Tudo como deveria ser! Nosso servidor está funcionando!! 🎉
Mas espera! Como vou rodar minha aplicação React!?
Ao invés de simplesmente retornar uma mensagem do servidor quando acessar minha página no navegador, eu preciso retornar minha aplicação. Isso se dá através do arquivo index.html que criei anteriormente.
Primeiro, vou criar uma pasta chamada public/
que vai conter meu arquivo index.html
e também, meus arquivos Javascript.
mkdir public
Então, vou copiar o index.html para a pasta public
, que está dessa maneira:
Feito isso, preciso agora alterar o arquivo index.js
responsável por rodar o nosso servidor para que ao invés de retornar uma simples mensagem, ele possa retornar o nosso arquivo index.html
.
Adiciono o import da modulo path
que é necessário para ler as pastas do sistema:
E depois, substituo a mensagem de retorno pelo caminho do nosso arquivo index.html
:
Ficando assim:
E o resultado:
Aparentemente funcionou. Mas onde está o nosso botão em React!? 🤔
Com um pouco de pesquisa descobri que da maneira como carregamos o nosso index.html, não será possível carregar também os arquivos Javascript ou CSS, pois Express não consegue renderizar arquivos apenas com o método sendFile
.
Ainda é preciso fazer uma pequena mudança. Vou substituir a linha com o sendFile
por esta:
E ficou assim:
Pronto! Agora a minha página React está sendo apresentada diretamente de um servidor.
A seguir vou criar um aplicativo mais robusto, com componentes independentes, mas conectados através de um outro componente de hierarquia maior. O fato de rodar a página de um servidor me dá inúmeras opções as quais eu não tinha, por rodar diretamente do browser. Uma delas é fazer importações diretamente dos arquivos Javascript.
Se gostou desse artigo, se inscreva e receba semanalmente este e outros conteúdos diretamente no seu email. Sem spam! 😎
]]>Sempre que vejo algum artigo ou tutorial sobre React é sempre utilizando JSX. Fica quase impossível não atrelar os dois. Acredito que para muitas pessoas é a mesma coisa. Mas a verdade é que não é bem assim.
React nada mais é do que um framework criado utilizando JavaScript. Com isso, é possível utilizá-lo apenas com JavaScript.
Mas, espera aí!! JSX não é JavaScript??
Bom, mais ou menos! JSX é uma sintaxe de extensão para JavaScript. Um syntactic sugar. JSX nos permite criar elementos escrevendo menos código e o deixando mais legível. E claro, tem uma pequena curva de aprendizado no início, mas após algumas horas escrever JSX tende a ficar mais natural.
Vamos ao exemplo do post anterior:
Sem JSX:
Com JSX:
Reflita por 2 minutinhos e tire suas próprias conclusões. 🧘♂️
React abraça o fato de que lógica de renderização está inteiramente ligado com lógica de UI. Como os eventos são chamados, como o estado de um componente (ou página) muda e como os dados são preparados para serem mostrados.
Ao invés de artificialmente separar lógica e web markup, React em seu design, decidiu se valer dessa separação através de unidades chamadas Componentes e manter lógica e markup juntos. Nada melhor do que usar JSX para alcançar esse objetivo.
Você ainda pode escrever React sem JSX (como fizemos no post sobre como criar sua primeira aplicação React). No entanto, JSX te ajudar a trabalhar com as partes visuais junto ao código JavaScript. 👩🎨
Renderizar conteúdo dinâmico é algo extremamente comum e JSX sabe bem como fazê-lo. Veja o pedaço de código abaixo:
JSX me permitiu colocar a variável name diretamente dentro da tag h1. E isso é possível com qualquer expressão JavaScript:
Nada mal, hein! 🤓
Você pode simplesmente utilizar aspas duplas para atributos do tipo string:
E chaves para atributos que são uma expressão:
Lembrando que atributos devem ser adicionados utilizando camelCase!
Definir children usando JSX é simples como escrever HTML.
Se a tag é vazia, não precisamos de uma tag de fechamento. Basta finalizar com />
:
const foto = <img src={user.photo} />
Se não:
Quando dados dinâmicos são adicionados no HTML este pode ficar vulnerável a ataques de XSS. JSX por padrão previne que caracteres especiais que possam ser usados de forma maliciosa sejam executados na página. Uma preocupação a menos! 😅
A primeira desvantagem e talvez a principal, é o fato de JSX não ser compreendido por navegadores web. É preciso utilizar um software terceiro responsável por compilar o que foi escrito utilizando JSX para JavaScript, já que a biblioteca React também não o faz.
Outra desvantagem é a imensa flexibilidade permitida pelo JSX. A facilidade de poder escrever “JavaScript com HTML” de uma maneira tão livre pode acabar transformando o código em algo extremamente difícil de ler. Felizmente existem técnicas que serão abordadas em outros posts para evitar tal feito.
Como disse anteriormente, JSX não é compreendido pelo browser e por isso precisamos de um compilador. Este será responsável por transformar JSX em JavaScript puro. Atualmente o mais utilizado (e também o que eu tenho utilizado em todos meus projetos) é o Babel.
Sua instalação exige pouco esforço. Basta copiarmos o seguinte trecho de código na nossa página HTML:
No post anterior criei um componente botão utilizando apenas JavaScript (sem JSX). Agora vou reescrevê-lo utilizando JSX.
Como era o componente Button
sem JSX:
Com JSX:
Não parece tão diferente assim, certo!? Talvez não para um exemplo tão simples.
Vou agora colocar uma mensagem embaixo do botão e uma div em volta dos dois:
Essa similaridade com HTML deixa tudo muito mais compreensível e de fácil leitura. Criar componente por componente utilizando JavaScript puro não seria um trabalho muito prazeroso.
JSX e React andam de mãos dadas e apesar de apresentar algumas desvantagens, ainda é uma solução incrível para escrever componentes web com rapidez e boa legibilidade. Sua similaridade com HTML faz com que sua curva de aprendizado seja rápida e indolor 😂. No entanto, é importante deixar claro que JSX te dá uma liberdade enorme. Escrever componentes menores, mais objetivos e com apenas uma finalidade vai ajudar a deixar o código mais legível e de fácil manutenção.
Se gostou desse artigo, se inscreva e receba semanalmente este e outros conteúdos diretamente no seu email. Sem spam! 😎
]]>Já há algum tempo React é a biblioteca queridinha para desenvolvimento frontend. Criado e mantido pelo todo poderoso Facebook, React já conta com mais de 160 mil estrelas no github e fãs por todo mundo, sendo inclusive um dos grandes responsáveis pela popularidade do Javascript. Grandes empresas como o próprio Facebook, Netflix, Airbnb e várias outras fazem uso desta biblioteca.
Se aventurar pelo mundo React pode parecer complicado. Vemos tantos artigos e vídeos sobre JSX, React hooks, React lifecycle e tantos outros nomes que acabam por nos intimidar a começar. No entanto, vamos ver aqui que começar é muito mais fácil do que você imagina.
De início não precisamos saber todas as terminologias do mundo React. O que realmente precisamos é simplesmente colocar a mão na massa e só então, buscar entender seus conceitos conforme os mesmos vão aparecendo.
Vamos lá:
O primeiro passo é criar um simples arquivo HTML que vamos dar o nome de index.html. Salve o arquivo em alguma pasta e abra-o em seu navegador.
Você vai ver uma página completamente em branco.
Precisamos então adicionar algumas tags HTML.
<html>
<head>
</head>
<body>
</body>
</html>
Bom, a nossa página web foi criada e estruturada - completamente em branco, mas foi :)
Precisamos agora adicionar React - seus scripts - a nossa página.
Primeiro vamos adicionar uma tag <div>
vazia dentro do <body>
para marcar o lugar onde nossa aplicação React vai ser carregada
<html>
<head>
</head>
<body>
<div id="react-container"></div>
</body>
</html>
Depois, vamos adicionar as tags <script>
de carregamento do React.
<html>
<head>
</head>
</body>
<div id="react-container"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</body>
</html>
Essas 2 tags <script>
são responsáveis por baixar todo o código necessário para rodar React em nossa página.
Como primeiro componente vamos criar um botão que registra o clique do usuário. Mais uma vez, não precisamos nos prender a todos os detalhes da implementação, pois muitos dos conceitos e técnicas utilizadas serão abordadas nos próximos artigos.
Na mesma pasta onde está o nosso index.html
vamos criar um arquivo chamado Button.js
:
const e = React.createElement;
class Button extends React.Component {
constructor(props) {
super(props);
this.state = { clicked: false };
}
render() {
if (this.state.clicked) {
return 'Voce clicou no botao.';
}
return e(
'button',
{ onClick: () => this.setState({ clicked: true }) },
'Meu botao React'
);
}
}
const domContainer = document.querySelector('#react-container');
ReactDOM.render(e(Button), domContainer);
Precisamos compreender três coisas importantes:
render()
é o responsável por carregar o que será mostrado na tela.this.state
carrega a informação necessária para nos dizer se o botão foi clicado ou não. Este, portanto, é o estado do nosso componente.div
- através do seu id - onde vamos carregar nosso componente. E então, adicionamos o nosso componente a ela.Agora adicionamos o arquivo Button criado ao nosso index.html
:
<html>
<head>
</head>
<body>
<div id="react-container"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="Button.js"></script>
</body>
</html>
Vamos ao resultado final:
E lá está a nossa primeira - e bem simples - aplicação React. 🎉 Nos próximos artigos vamos implementar mais funcionalidades e mergulhar a fundo nos conceitos por trás dessa biblioteca tão fantástica.
Se o seu resultado foi algo diferente disso, me manda um tweet no @neliojrr.
Até a próxima semana! 😎
]]>Let me explain:
I had to create a form for editing an object after the user click on it from a list. Then I thought a modal would fit well for that. Way to simple. A modal that would open in the middle of the screen, with a title, a form inside, a close button in the corner and a black background behind the modal element.
I decided to take a look at npmjs and I found quite a lot of react modals over there. However, most of them (at least the ones I looked) were too complicated for a simple task. Of course if I had picked one of them I would have acomplished my task with success. They are all very nice! But what I mean is that they all had a few props or even functionalities that I wouldn’t need it. I wanted something as simple as possible. And I couldn’t find it.
So, I ended up creating my own React Modal Component.
Later, I thought that maybe someone else could have the same problem (or frustration) of not find something easy and simple like I had. Besides that, would end up being a good thing for me since I’d never created a JS package before.
And from that humble-modal was born.
It doesn’t aim anything other than simplicity.
]]>SuperFax is a web application for sending faxes over the internet.
It was developed using Ruby on Rails, JQuery and MySQL. It was deployed in a nginx server at DigitalOcean. It’s using Phaxio for sending fax, Stripe for payments and Amazon S3 for file storage.
]]>import Modal from 'humble-modal';
render() {
return(
<Modal show={this.state.show} onRequestClose={this.closeModal}>
<span>Content inside the modal</span>
</Modal>
);
}
humble-modal is a React simple, humble and easy to use modal. No fancy props or behaviors.
]]>