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

mockup react

 

Página de contato

mockup app

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
    directories

 

Vendo no Browser

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

 

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:
  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

components


Página Contact

components react

  • 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:
    home page

 

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:
    user profile

 

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:
    component
  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:
    react app

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!
E
stamos aqui para você 🙂

Bem-vindo à família OneBitCode o/

0 0 vote
Article Rating
janeiro 17, 2020
Subscribe
Notify of
guest
13 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Claudio
2 anos atrás

Falaaa Leonardo, tudo beleza? Parabéns pelo guia, foi um ótimo início para mim, que você continue com conteúdos de qualidade como esse 😀 Cheguei nos desafios e até consegui chamar um componente para quando não achar a rota, porém tive muitas dificuldades para estiliza-lo, queria deixar uma imagem de fundo na página toda e escrever um texto por cima dela, porém não rolou, se puder me dar uma dica de como fazer isso, ficarei agradecido. A integração com o back-end para envio de e-mail foi até simples, visto que já tinha uma API que fazia isso, precisei apenas ver como… Read more »

Lucas Caton
2 anos atrás

Show o artigo, Leo! React é massa demais! 🙂

Nelcifran+Pires
2 anos atrás

Bom, criei uma page ErrorPage e coloquei ela com Switch que olhei na documentação e deu certo, agora vou tentar o desafio 2
quem quiser da uma olhada :
https://github.com/NelcifranMagalhaes/portfolio_dev

Nao sei se e a melhor maneira de fazer, mas ta ai…XD

Nelcifran+Pires
2 anos atrás

<Container>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/contact' component={Contact}/>
<Route component={ErrorPage}/>

</Switch>
</Container>

Nelcifran Magalhaes
Nelcifran Magalhaes
2 anos atrás

Achei bem legal, ainda mais que adoro animações

Daniel
2 anos atrás

‘touch’ não é reconhecido como um comando interno ou externo, um programa operável ou um arquivo em lotes. Comecei a mexer agora com React e tive este pequeno problema que foi solucionado usando o npm para instalar o touch de modo global utilizando o comando npm install touch-cli -g. O problema ocorre pois estamos tentando executar comandos Unix/Linux em Windows. Outras formas alternativas é utilizando outros terminais que consigam interpretar os comandos como o Cmder ou utilizar o GitBash. No link tem mais algumas alternativas equivalentes de comandos porém nativos para Windows. https://superuser.com/questions/10426/windows-equivalent-of-the-linux-command-touch/764716 Bora lá terminar o tutorial HFGL ;D… Read more »

michel spirlandeli dos santos
michel spirlandeli dos santos
1 ano atrás

Show de bola, Parabéns!!!

Erik Garces Matos
Erik Garces Matos
1 ano atrás

Fala Leonardo blz cara? Parabéns pelo conteúdo….show….. Só uma dúvida que eu gostaria de tirar com vc….na empresa onde trabalho ainda nao trabalhamos com React e eu estive estudando e aprendendo para poder assim começar a implantar algumas coisas mais simples com o React a fim de teste mesmo e pra mostrar pro pessoal como que fica……porém hj nos nossos projetos Web nós já utilizamos o Materialize-CSS na versao 0.100.2….ai que ve minha dúvida …..eu vi que tem tambem o materialize pra React(react-materialize), mas ele tem o Jquery como dependência isso afeta de alguma forma negativa quando eu estiver fazendo… Read more »

Feito com s2 por OneBitCode
13
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: