React Spa: Crie seu primeiro APP em 15 minutos

React Spa: Crie seu primeiro APP em 15 minutos

Você já criou uma SPA com React?

As SPA’s (Single Page Application) são aplicações Web que tem como objetivo trazer uma experiência similar a de um APP desktop para o usuário (sem os reloads e etc comuns aos sites), elas tem se tornado cada vez mais comuns e é realmente muito simples criá-las com React.

Nesse tutorial completo (e leve 🙂 ) você vai aprender como criar uma (SPA) com React através de um exemplo prático, bora?

O que vamos criar?

O nosso Projeto é um Portfólio online de desenvolvedor (onde você vai poder colocar suas experiências, cargo pretendido e etc) que possui duas páginas: “Home” onde vai ter um resumo da sua vida profissional e “Contact” onde um possível contratante poderia entrar em contato.

Antes de desenvolver o projeto eu criei alguns mockups simples para que você possa pré visualizar o resultado que teremos ao final, dá uma olhada:

Página Inicial

Página de contato

Gostou? Então vamos nessa 🙂

Quais ferramentas vamos usar?

• Create React APP (versão 1.5.2)
  • Lib que vai nos permitir criar nosso projeto React sem configurar coisas como Webpack, Babel e etc (vai dar uma estrutura básica ao nosso APP)
• React Router Dom (versão ^16.3.1)
  • Lib para incluir rotas no react (vai nos ajudar a transformar nosso site em uma SPA)
• React Materialize (versão ^2.1.4)
  • Vai nos ajudar a usar com mais eficiência o framework front end Materialize (similar so Bootstrap) para deixarmos nosso APP mais bonito com facilidade.

Dependências

• Npm
  • Vamos usar o Npm para gerenciar nossas bibliotecas javascript, caso você não o possua, instale: Como instalar o NPM
• Create React APP
  • Como já disse acima essa Lib vai nos ajudar a gerar nosso Projeto React com mais velocidade (e menos configurações), para instalar ela rode no console:

Desenvolvendo nosso APP

Gerando o Projeto

1. Para gerar nosso Projeto react rode no console:
   
2. Seu diretório deve ter ficado assim
   

Vendo no Browser

1. Entre no diretório do projeto rodando:
   
2. Suba seu projeto rodando:
   
3. O resultado no browser deve ser
   

Materialize

Para dar uma aparência mais agradável ao nosso APP vamos usar o framework front end Materialize (caso você queira, também é possível usar o Bootstrap). Usaremos uma Lib chamada react-materialize que vai nos dar um conjunto de components prontos para usar livremente todo o potencial do Materialize.

1. Para instalar a biblioteca e adicioná-la às nossas dependências rode no console:
   
2. Agora para incluir o css e js do materialize no projeto substitua o conteúdo do arquivo index.html por:Atualizamos o Index.html para incluir as dependências da lib react-materialize que vai nos ajudar na hora de construirmos nossas telas.
3. Pronto, agora podemos partir para a estrutura do nosso projeto.

Estruturando nosso APP

Vamos implementar uma organização mínima para o nosso APP (caso fôssemos criar um projeto maior, alguns acréscimos teriam que ser feitos), bora lá:

1. Para os nossos components (telas, navbar e etc) vamos criar uma pasta chamada “components”, rode no console:
   
2. Vamos ter 2 páginas (Home e Contact) e alguns components auxiliares, então já vamos pré criar as pastas deles, rode no console:
3. Precisaremos de algumas imagens no projeto também, então crie a seguinte pasta:
   
4. Agora baixe no link a seguir as imagens necessárias, descompacte e coloque na pasta “src/images” recém criada.
   Pacote de imagens
5. Também vamos precisar de um component básico para agrupar as rotas das nossas páginas, então rode no console:
   
6. Alguns arquivos extras foram criados quando geramos nosso projeto, para facilitar a compreensão completa do que foi feito vamos removê-los. A baixo está a minha estrutura sem eles, deixe a sua estrutura igual:
   https://onebitcode.com/kerr-self-sealing-mason-jar-dating/
7. Depois de remover os arquivos extras você precisa tirar o import deles do seus arquivos “index.js” e “app.js”, então vamos aproveitar e limpá-los, seu arquivo “index.js” vai ficar:
   
8. Seu arquivo “app.js” vai ficar:
   
9. Pronto, agora vamos ver quais components vamos precisar no nosso projeto.

Components usados

Para facilitar eu listei os components que vamos usar no nosso APP, dá uma olhada nas imagens a baixo:

Página Inicial

learning disability dating sites

Página Contact

• Home
  • Página inicial do nosso APP onde veremos as informações do usuário
• Contact
  • Página onde poderemos entrar em contato com o usuário
• Header
  • Component que contém a nossa navbar (barra de navegação)
• UserProfile
  • Component que possui a foto, nome e cargo pretendido do usuário (será usado na página Home e Contact)
• Experience
  • Component que dá os detalhes de uma experiência de trabalho do desenvolvedor como nome e logo da empresa, descrição de como foi a experiência e etc (será usado na página Home várias vezes)

Criando nosso Header

Agora vamos criar o menu superior da nossa aplicação (com materialize) que é um elemento comum a todas as páginas que teremos:

1. Crie um arquivo chamado header.js dentro de “/src/components/header” com o seguinte conteúdo:
2. Vamos incluir no nosso arquivo “app.js” uma chamada para o component Header, substitua o conteúdo dele por:
   
3. Para ver o resultado no browser rode o projeto:
   

Criando nosso Página Home

Vamos começar criando nossa página base que deve exibir o card com a foto, nome e cargo pretendido do desenvolvedor, outro card com o “About me” e um outro conjunto de cards com as experiências de trabalho dele.

Nessa parte vamos criar os components: Home, UserProfile e Experience, bora \o/

Preparando o APP

1. Primeiro precisamos criar um layout base para a nossa página, então no seu arquivo “src/main.js” coloque:
2. Agora vamos incluir no “app.js” a chamada do nosso “main.js” que é o arquivo responsável por mostrar o conteúdo das páginas, no seu arquivo “app.js” coloque:
3. Para melhorar a aparência do nosso APP coloque no arquivo “index.css”:
   

Criando o Component Home

1. Agora crie um arquivo chamado “home.js” em “src/components/home” e coloque o seguinte conteúdo nele:
   Este é o nosso component principal (que é mostrado na raiz do nosso SPA), por enquanto ele ainda não está completo porque ele é composto por mais dois components (UserProfile e Experiences), porém já dá pra ver a estrutura dele.

   Obs: Esses <Col>, <Row> e etc são components da lib que adicionamos (react-materialize), eles facilitam o uso do Materialize (precisamos escrever bem menos código).

2. Agora veja no browser como ficou:
   
3. Você deve ver:
   

Criando o Component UserProfile

1. Agora crie um arquivo chamado “user_profile.js” em “src/components/user_profile” e coloque o seguinte conteúdo nele:
   Nesse component nós vamos mostrar as informações do usuário (nome, foto e cargo pretendido).
2. Atualize o arquivo “src/components/home/home.js” colocando:
3. Agora veja no browser como ficou:
   

Criando o Component Experiences

1. Agora crie um arquivo chamado “experience.js” em “src/components/experience” e coloque o seguinte conteúdo nele:Note que esse component é mais “dinâmico” que os outros, ele recebe parâmetros através da variável props.

   No Component Home chamamos ele N vezes passando os parâmetros que descrevem as experiências de trabalho que tivemos.

2. Atualize o arquivo “src/components/home/home.js” colocando:
   
3. Agora veja no browser como ficou:
   
4. Pronto, agora já temos os nossos principais components funcionando, vamos ver em detalhes como incluir as rotas.

Criando nossa página de Contato

É através desta página que um visitante do nosso site poderia entrar em contato conosco, nela teremos dois components: Contact e UserProfile (vamos reutilizar ele aqui, essa é a beleza da componentização).

1. Agora crie um arquivo chamado “contact.js” em “src/components/contact” e coloque o seguinte conteúdo nele:
   Antes de vermos essa página no ar vamos adicionar as nossas rotas 🙂

​

React Router (“roteando” nosso APP)

O React Router é uma Lib que vai nos ajudar a implementar as rotas facilmente no nosso projeto React, com ela o APP será capaz de perceber clicks em links (para mudança de página) e reagir substituindo os components que estão sendo renderizados sem precisar dar Reload na página entre outras coisas.

Com essa Lib você pode definir rotas normais (do tipo /contact) ou rotas com Hash (do tipo /#/contact, similar ao AngularJS), ela também possui recursos como: Rotas aninhadas, lazy loading de components e etc

Para se aprofundar um pouco mais, acesse a documentação dela clicando aqui.

Incluindo no nosso projeto

1. Para instalar o react router rode no console:
2. Para incluir ele no nosso projeto, atualize o arquivo “src/index.js” colocando:Colocamos o <BrowserRouter> que é um component do react router envolta de <App /> para que possam realizar o roteamento dentro desses components
3. Agora vamos incluir os “Routes” para que nossa tela mude (entre o component home e o component Contact) sempre que a rota mudar, no arquivo “src/main.js” coloque:
   No header do arquivo incluímos as dependências ( Switch e Route ) e dentro do nosso component “Main” incluímos nosso conjunto de rotas:

   Em ” <Route exact path=’/’ component={Home}/>” dizemos que quando a rota for exatamente “/” renderize o component “Home”

   Em ” <Route path=’/contact’ component={Contact}/>” dizemos que quando a rota for “/contact” renderize o component “Contact”

   Obs: E como já dito, o “Switch” é um component do React Router que faz uma interação nas rotas e renderiza somente a primeira que dar match na url solicitada.

   Obs2: Nosso APP já funciona, se você clicar em um link “/contact ou /” ele vai navegar, porém ele recarrega a página antes, ou seja não se comporta como um SPA ainda.

4. Agora vamos torná-lo um SPA, no seu arquivo “/src/componenets/header/header.js” coloque:
   Dentro do nosso component nós incluímos o componente <NavLink> que é responsável por “sinalizar” para o <Route /> a renderização do component associado a rota do seu parâmetro “to”, no caso “/” ou “contact”.
5. Agora suba seu projeto:
   
6. Ele deve estar assim:
   

Pronto, nosso SPA com react está pronto \o/

Desafio

Agora que nós finalizamos nosso APP eu quero te ajudar a fixar o que foi aprendido, então nada melhor do que praticar, por isso eu preparei dois desafios para você (um fácil e um difícil) 🙂

Fácil

Crie uma página de not found (elegante com materialize) para ser exibida quando uma URL inválida for digitada e mande o print dela nos comentários.

Obs: Para aprender como capturar essas URLs inválidas dê uma olhada na documentação do “react-routes”

Difícil

Na página de contato faça com que o form realmente te envie um email quando um possível contratante preenchê-lo.

Obs: Você vai precisar preparar um backend que receba a chamada desse form e envie o email.
Obs 2: Você vai precisar ajustar o seu formulário para que ele chame realmente esse backend

Conclusão

Depois desta jornada você já está apto(a) a criar um SPA simples com React. No OneBitCode temos um outro post sobre React para você se aprofundar um pouco mais: Comece hoje com o React!

Caso você tenha gostado do assunto e queira que o OneBitCode traga mais conteúdos como este sobre React comente aí em baixo e compartilhe no facebook com seus amigos Devs clicando aqui.

Você pode baixar o código completo do APP nesse repositório!

Não esqueça de mandar o desafio nos comentários.

Obrigado por estar com a gente,
Leonardo Scorza

Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!

O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!

Fique por dentro de todos os conteúdos o/

Nossas redes sociais:

📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
 📱  • https://instagram.com/one_bit_code
🐦 • https://twitter.com/onebitcode

Nossos cursos:

🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
 ⚙  • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec

Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
Estamos aqui para você 🙂

Bem-vindo à família OneBitCode o/