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

 

Extra: Convite para a Live sobre React Native

Galera, um recado extra: no dia 12/04 vai rolar um OneBitTalk sobre React Native com a galera da Rocketseat, para ser avisado(a) é só se inscrever na caixa de email a baixo. 🙂

React Native



12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas \o/




Você é novo por aqui?

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 outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente! Seja por Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

abril 8, 2018

Deixe um comentário

9 Comentários em "React Spa: Crie seu primeiro APP em 15 minutos"

avatar
  Subscribe  
newest oldest most voted
Notify of
Claudio
Membro
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
Visitante

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

Nelcifran+Pires
Visitante

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
Visitante

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

</Switch>
</Container>

Feito com s2 por OneBitCode
%d blogueiros gostam disto: