Tutorial de ReactJS com Node.js – Parte 3

Nas primeiras duas partes desta série sobre ReactJS nós aprendemos o que é, para que serve e como podemos criar um projeto em React na web e depois estudamos sobre componentes, sua configuração e gestão do estado de informações nas páginas React.

Hoje, nós vamos ver mais alguns conceitos básicos e ir além, avançando ainda mais!

Reorganizando nossa aplicação

Até agora estávamos fazendo tudo apenas em nosso App.js, mas isso não é nada profissional e já está na hora de começarmos a complicar um pouco mais as coisas.

Vamos começar criando esta segunda página, que vou chamar de Form.js e salvarei dentro de uma pasta Pages dentro de src:

import React from 'react';
import Header from '../Header';

function Form(){
    return (
        <div>
            <Header title="React Form" />
            Olá Mundo!
        </div>
    )
}

export default Form;

import React from 'react';

import Header from '../Header';

function Form(){

return (

<div>

Olá Mundo!

</div>

)

}

export default Form;

Note como usei nosso componente Header nesta página novamente, configurando seu title para React Form. Apenas atente ao ‘../’ que indica que o Header está um nível fora da nossa pasta atual. Mais tarde vamos melhorar essa página aí.

Para manter a uniformidade desta nossa nova organização, vamos criar dentro desse pasta Pages um arquivo Home.js e colocar dentro dele o conteúdo que antes era nosso App.js. Isso porque vamos manter no App.js apenas elementos essenciais para inicialização da aplicação, ao invés de uma tela em específico.

import React, {useState} from 'react';
import Header from '../Header';
import logo from '../logo.svg';

function Home(){
    const [contador, setContador] = useState(0);
    function increment(){
      setContador(contador+1);
    }
  
    return (
      <div className="App">
        
        <Header title="Header Param" />
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <input type="button" value="Clique" onClick={increment} />
        </p>
        <p>{contador}</p> cliques!
      </div>
    );
}

export default Home;

import React, {useState} from 'react';

import Header from '../Header';

import logo from '../logo.svg';

function Home(){

const [contador, setContador] = useState(0);

function increment(){

setContador(contador+1);

}

return (

<p>

</p>

<p>{contador}</p> cliques!

</div>

);

}

export default Home;

Então, voltando ao App.js, vamos apenas incluir nele uma chamada para a página inicial, enquanto não aprendemos a rotear páginas…por enquanto…

import React from 'react';
import './App.css';
import Home from './Pages/Home';

function App() {
  return (
    <Home />
  )
}

export default App;

import React from 'react';

import './App.css';

import Home from './Pages/Home';

function App() {

return (

)

}

export default App;

A ideia aqui é que você coloque todas as páginas da sua aplicação dentro de Pages. Opcionalmente, você pode ainda criar subpastas dentro de Pages, uma para cada página, caso queira manter seus CSS agrupados ao lado de suas respectivas páginas.

Roteamento de páginas

Até este momento estávamos trabalhando com apenas uma página em nosso projeto. O que acontece quando adicionamos uma segunda? Como podemos acessar essa segunda página se quando acessamos a aplicação sempre carrega a primeira?

O primeiro passo é instalar um novo pacote para fazer a gestão do roteamento, o react-router-dom:

npm install react-router-dom

1	npm install react-router-dom

Usaremos esse pacote em nosso novo módulo de rotas que vamos criar, chamado routes.js na pasta src:

import React from 'react';
import {Route, BrowserRouter} from 'react-router-dom';

import Home from './Pages/Home';
import Form from './Pages/Form';

function Routes(){
    return (
        <BrowserRouter>
            <Route component={Home} path="/" exact />
            <Route component={Form} path="/cadastro" />
        </BrowserRouter>
    )
}

export default Routes;

import React from 'react';

import {Route, BrowserRouter} from 'react-router-dom';

import Home from './Pages/Home';

import Form from './Pages/Form';

function Routes(){

return (

</BrowserRouter>

)

}

export default Routes;

No topo deste arquivo começamos importando o React (obrigatório em todos componentes), as duas páginas (Home e Form) e dois objetos da lib react-router-dom, que é o que nos interessa agora.

O primeiro componente novo é o Route (rota), objeto que usaremos para definir as rotas. O segundo componente é o BrowserRouter, que é uma das várias formas de roteamento que essa lib suporta, sendo a mais comum que roteia da forma como estamos acostumados a navegar por páginas no navegador. Usamos ele para configurar os Routes.

Cada Route dentro do BrowserRouter tem duas informações: component (o componente que renderiza a página em questão) e path (o caminho no navegador para acessar aquela página). São campos autoexplicativos e a própria análise do código acima mostra component e path que dão a entender o que irá acontecer. O campo exatc na primeira rota indica que a rota inteira deve ter aquele path, pois por padrão a regra de roteamento é “começa com”.

Mas, para que aconteça alguma coisa ainda temos mais um passo que é, ao invés de chamar a página Home em nosso App.js, chamarmos este módulo de roteamento.

function App() {
  return (
    <Routes />
  )
}

function App() {

return (

)

}

Desta forma, quando o App.js for carregado, ele vai carregar também estas configurações de rotas que, por sua vez, vão analisar a cada requisição o path no browser e rotear para a página correta. E se você acessar agora a página “/cadastro”, deve ver a imagem abaixo.

Legal, não?

Atenção: se mesmo acessando a rota “/cadastro” estiver aparecendo a Home, é porque você esqueceu de incluir o atributo exact na Route da Home.

E se eu quiser que um link HTML me traga até esta página? Afinal, ninguém vai ficar escrevendo na barra de endereço do navegador.

Você pode utilizar âncoras HTML normalmente, no entanto isso quebra o conceito de SPA (Single Page Application) pois quando você clica em um link HTML e ele altera a sua rota, TODA a página é carregada do zero. Existe um jeito melhor de fazer isso em React, com o componente Link.

Na nossa /Pages/Home.js, vamos adicionar um novo import no topo, como abaixo.

import {Link} from 'react-router-dom';

1	import {Link} from 'react-router-dom';

E na mesma /Pages/Home.js, adicione dentro do HTML de retorno, um Link, que é a tag que substitui o A tradicional. Ela tem um atributo que nos importa aqui que é “to” (para, em inglês), que substitui o href da âncora tradicional.

<Link to="/cadastro">Acessar cadastro</Link>

1	<Link to="/cadastro">Acessar cadastro</Link>

Agora, ao acessar a sua aplicação e clicar no link que vai aparecer na tela, repare que a tela não pisca, o browser não se mexe, mas a tela é recarregada.

Essa é a magia do React!

E se você não ficou impressionado é porque, de duas uma: ou você já trabalhou muitos anos com Ajax, assim como eu, e costumava fazer isso “na unha” (só ficou mais fácil) ou porque não sabe o quanto isso economiza de largura de banda uma vez que não fica transferindo um monte de arquivos (em projetos reais) do servidor para o navegador do cliente.

Criando um Formulário

Agora que temos esta página de cadastro, vamos criar um formulário nela, bem simples, apenas para exercitar alguns conceitos. Como o intuito aqui não é ensinar HTML, substitua o retorno de HTML do Form.js para o template abaixo, que eu explico na sequência.

function Form(){
    return (
        <div>
            <Header title="React Form" />
            <form>
                <fieldset>
                    <legend>
                        <h2>Dados de Cadastro</h2>
                    </legend>

                    <div>
                        <label>Nome:
                            <input type="text" name="txtNome" id="txtNome" />
                        </label>
                    </div>

                    <div>
                        <label>Idade:
                            <input type="number" name="txtIdade" id="txtIdade" />
                        </label>
                    </div>

                    <div>
                        <label>UF:
                            <select name="cmbUF" id="cmbUF" >
                                <option value="0">Selecione uma opção</option>
                            </select>
                        </label>
                    </div>
                    <input type="submit" value="Salvar" />
                </fieldset>
            </form>
        </div>
    )
}

function Form(){

return (

<div>

<form>

<h2>Dados de Cadastro</h2>

</legend>

<div>

<label>Nome:

</label>

</div>

<div>

<label>Idade:

</label>

</div>

<div>

<label>UF:

<option value="0">Selecione uma opção</option>

</select>

</label>

</div>

</fieldset>

</form>

</div>

)

}

Aqui temos um formulário HTML bem simples, com dois campos (um de texto e outro numérico) e uma lista de opções com um botão salvar no final. Assim que você salvar o Form.js com essa alteração, a sua página já deve estar atualizada com a aparência abaixo:

Você reparou que nosso campo de UF não tem nenhum estado disponível para seleção?

Poderíamos colocar manualmente as 27 unidades federativas do país ali, visto que são fixas, mas aí perderíamos uma oportunidade de ouro para ver como você chama uma web API a partir do React!

Consumindo uma Web API

A ideia aqui é carregar as UFs a partir de uma Web API. O que vamos fazer funciona para qualquer tecnologia que funcione seguindo o protocolo REST, falando de maneira mais simples, que converse através de requisições HTTP e retorne JSON como resultado.

Como exemplo, deixo para você uma web API muito simples, que retorna um array estático de estados, mas que muito bem poderia estar buscando de um banco de dados como MongoDB, MySQL ou MS SQL Server.

//api-estados.js
var http = require('http'); 
const express = require('express');
const app = express();
app.use(require("cors")());

app.get('/', (req, res, next) => {
    res.json({message: "Tudo ok por aqui!"});
})

app.get('/estados', (req, res, next) => { 
    console.log("Retornou todos estados!");
    const ufs = [
        {id:1,uf:'RS'},{id:2,uf:'SC'},{id:3,uf:'PR'}// coloque os demais estados
    ]
    res.json(ufs);
}) 

var server = http.createServer(app); 
server.listen(3030);
console.log("Servidor escutando na porta 3030...")

//api-estados.js

var http = require('http');

const express = require('express');

const app = express();

app.use(require("cors")());

app.get('/', (req, res, next) => {

res.json({message: "Tudo ok por aqui!"});

})

app.get('/estados', (req, res, next) => {

console.log("Retornou todos estados!");

const ufs = [

{id:1,uf:'RS'},{id:2,uf:'SC'},{id:3,uf:'PR'}// coloque os demais estados

]

res.json(ufs);

})

var server = http.createServer(app);

server.listen(3030);

console.log("Servidor escutando na porta 3030...")

Abra outra janela do terminal, instale as dependências com o comando abaixo.

npm install http express cors

1	npm install http express cors

E deixe esta API rodando na sua máquina (node api-estados). Teste acessando http://localhost:3030/estados no navegador. Note que usei uma porta diferente para não conflitar com a porta da nossa aplicação React.

Para que nosso front-end React possa chamar o backend que subimos, vamos instalar mais um pacote em nossa aplicação, o Axios, que é o cliente HTTP mais popular para Node.js.

npm install axios

1	npm install axios

Esse pacote vai permitir que muito facilmente a gente consuma serviços na web, como o de estados. Para usarmos este cliente HTTP, primeiro devemos importá-lo na página Form.js, como abaixo.

import React, { useEffect } from 'react';
import Header from '../Header';
import axios from 'axios';

import React, { useEffect } from 'react';

import Header from '../Header';

import axios from 'axios';

Note que além da importação do axios em si, importei uma função do React chamada useEffect. Essa função é usada para controlar a execução de outras funções que viermos a criar baseada em gatilhos. Embora existam outras maneiras de executar funções (vimos uma no tutorial passado, não é mesmo), o uso do useEffect é recomendado para ter mais controle da sua aplicação React.

O useEffect funciona da seguinte forma: o primeiro parâmetro é a função que queremos executar, e o segundo, os gatilhos de execução (array). Um gatilho de execução é um outro objeto que, quando alterado, vai disparar o efeito/função. Caso você não passe nenhum objeto como gatilho, o efeito acontecerá somente uma vez quando a página for renderizada pela primeira vez, que é o que usaremos abaixo.

function Form(){
    useEffect(() => {
        axios.get('http://localhost:3030/estados').then(response => {
            console.log(response.data);
        })
    }, []);

function Form(){

useEffect(() => {

axios.get('http://localhost:3030/estados').then(response => {

console.log(response.data);

})

}, []);

Como este tutorial está ficando muito extenso, vou apenas imprimir no console a resposta da requisição à API. No Google Chrome, use o F12 para abrir o console e ver o resultado, que por enquanto só aparecerá ali.

Na próxima parte deste tutorial, vamos carregar os estados no select de UFs e também vamos salvar os dados preenchidos no formulário quando o botão for clicado. Clique aqui para ler a quarta parte da série!

Gostou do tutorial de hoje? Conheça meu curso online de Node.js clicando no banner abaixo.