DEV Community: Bruno Felipe

React - API, por que te adoro?

Bruno Felipe — Fri, 19 Feb 2021 15:48:17 +0000

👋 Introdução

Nos últimos posts vimos pra que serve React, como criar um projeto e como estilizá-lo. Porém agora temos que consumir os dados de um back-end.

Para testarmos, utilizaremos uma API fake e para isso uma pacote chamado json-server.

🏭 Iniciando nossa API

Primeiro vamos instalar essa pacote globalmente:

npm install -g json-server

Após isso vamos criar um arquivo db.json na raiz do nosso projeto:

{
  "transactions": [
    {
      "id": "1",
      "category": { "title": "Venda" },
      "title": "Desenvolvimento de site",
      "type": "income",
      "value": 12000,
      "created_at": "2020-04-13T00:00:00"
    },
    {
      "id": "2",
      "category": { "title": "Alimentação" },
      "title": "Hamburger",
      "type": "outcome",
      "value": 59,
      "created_at": "2020-04-10T00:00:00"
    },
    {
      "id": "3",
      "category": { "title": "Casa" },
      "title": "Aluguel do apartamento",
      "type": "outcome",
      "value": 1200,
      "created_at": "2020-03-27T00:00:00"
    },
    {
      "id": "4",
      "category": { "title": "Venda" },
      "title": "Computador",
      "type": "income",
      "value": 5400,
      "created_at": "2020-03-15T00:00:00"
    }
  ]
}

E agora para rodar a API, abra um novo terminal e rode:

json-server --watch db.json --port 3333

http://localhost:3333/transactions para acessar os itens do JSON. Deixe esse terminal aberto e rodando para que a API não caia.

O que temos que fazer agora é consumir essa API no nosso front-end.

📡 Consumindo API

Existem várias bibliotecas para isso, porém utilizaremos o axios. E para instalar:

npm install axios

Já que vamos sempre consumir de uma mesma API nossas informações vamos criar primeiro uma base no arquivo src/services/api.ts:

// services/api.ts

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:3333',
});

export default api;

Assim, sempre que precisarmos consumir nossa API, vamos importar essa service e utilizá-la.

Vamos no arquivo pages/Home/index.tsx e limpar os useState para eles ficarem em branco.

// pages/Home/index.tsx

const [balance, setBalance] = useState<Balance>({
    income: 0,
    outcome: 0,
    total: 0,
  });

  const [transactions, setTransactions] = useState<Transaction[]>([]);

O que queremos é:

Ao abrir a tela, os dados da API devem ser pegados e mostrados em tela.
Ao mesmo tempo, é calculado o balanço e depois alterado o valor dos Cards.

Sempre que o React tem um dos seus estados alterados todo o componente é recarregado, e por isso não podemos escrever código diretamente dentro da função Home. Para isso, o React nos fornece um hook useEffect que executa um trecho de código sempre que algum das suas dependências forem alteradas; se não houver dependências ele só é executado na primeira vez que código é carregado.
Pareceu confuso? Na prática é bem simples.

O useEffect é uma função que recebe dois parametros:

Uma função a ser executada.
Um array com suas dependencias

// pages/Home/index.tsx

import { useEffect, useState } from "react";

// adicionar abaixo dos useState

useEffect(() => {
    setBalance({
      income: 10,
      outcome: 0,
      total: 10,
    });
  }, []);

O que fizemos aqui foi que na primeira vez que o componente Home for renderizado ele irá 'setar' a variável balance com um novo valor.

Vamos utilizar o useEffect para buscar nossa API:

// pages/Home/index.tsx

import { useEffect, useState } from "react";

// adicionar abaixo dos useState

useEffect(() => {
    setBalance({
      income: 10,
      outcome: 0,
      total: 10,
    });
  }, []);

Explicando um pouco de como funciona o axios:

Primeiro importamos o nosso service.
Depois utilizamos ele informando qual método HTTP iremos utilizar. Como vamos 'pegar' uma lista de dados, utilizamos get.
Passamos <Transaction[]> para informar ao Axios qual a tipagem dos dados que a API retornará.
Passamos 'transactions' como sendo nossa rota, assim o axios fará uma requisição para http://localhost:3333/transactions.
Como essa busca leva uma tempo, temos que utilizar o .then. Isso é a parte assíncrona do Javascript, onde se não utilizarmos o then o Javascript não esperaria a resposta da API para proseguir.
O then recebe como parâmetro uma função de callback, onde o argumento dessa função é toda resposta da API.
Estamos desestruturando essa resposta para pegarmos apenas os dados (data).
Por fim estamos 'setando' a nossa lista de transações para ser os dados enviados pela API.

Ufa... Em três linhas de código muito aconteceu. Mas isso é o básico de como consumir uma API.

Caso não tenha entendido, ou queira se aprofundar mais no axios tem um post bem legal no blog da Rocketseat sobre o axios. Aconselho a darem uma olhada se quiserem.

⚖️ Atualizando o balanço

Para isso também vamos utilizar outro useEffect só que agora esse terá uma dependencia, que será a lista de transações (transactions). Se liga só:

// pages/Home/index.tsx

import { useEffect, useState } from "react";

import Header from "../../components/Header";

import Cards, { Balance } from "../../components/Cards";
import TransactionList, { Transaction } from "../../components/TransactionList";

import { Container } from "./styles";

import api from "../../services/api";

function Home() {
  const [balance, setBalance] = useState<Balance>({
    income: 0,
    outcome: 0,
    total: 0,
  });

  const [transactions, setTransactions] = useState<Transaction[]>([]);

  // AQUI
  useEffect(() => {
    const newBalance: Balance = transactions.reduce(
      (acc, val) => {
        acc[val.type] += val.value;

        return acc;
      },
      { income: 0, outcome: 0, total: 0 }
    );

    newBalance.total = newBalance.income - newBalance.outcome;

    setBalance(newBalance);
  }, [transactions]);

  useEffect(() => {
    api.get<Transaction[]>("transactions").then(({ data }) => {
      setTransactions(data);
    });
  }, []);

  return (
    <>
      <Header />
      <Container>
        <Cards balance={balance} />
        <TransactionList transactions={transactions} />
      </Container>
    </>
  );
}

export default Home;

Estamos utilizando um reduce para percorrer todos os item da lista e retornar o somatório entre cada tipo de transação.
Depois calculamos o total, e por fim 'setamos' o balance como sendo o newBalance.

😥 É o fim?

Com isso terminamos nossa primeira tela no React. É algo simples e pratico que eu espero que tenha te mostrado o quão bom o React pode ser.

Mas isso não quer dizer que chegamos ao fim. Ainda falta muita coisa para aprendermos, estamos apenas arranhado a superfície.

No próximo post vamos criar uma nova tela e descobrir como trocar entre rotas da aplicação.

PS: Um agradecimento especial💜 ao pessoal da Rocketseat🚀 pelo conteúdo de qualidade em React.

React - Bora estilizar?

Bruno Felipe — Fri, 19 Feb 2021 12:58:18 +0000

👋 Introdução

Se você já esteve em algum projeto web com certeza já trabalhou com CSS ou algum dos seus pré-processadores (Sass, LESS, Stylus).
E no React não é diferente. Todas essas tecnologias também podem e devem ser utilizadas, porém vamos começar com o básico e ver como é simples adicionar CSS a um componente.

Primeiro vamos estilizar o Header da nossa aplicação, mas para isso teremos que modificar um pouco nosso arquivo. Precisamos criar uma passar com nome Header, assim como o arquivo Header.tsx. E dentro dessa pasta iremos criar um arquivo index.tsx copiando todo conteúdo que temos no Header.tsx sem mudar nada. Além disso iremos criar ainda dentro dessa pasta um arquivo styles.css para podermos importar dentro do componente.
Por fim apagamos o Header.tsx.



/* components/Header/styles.css */

#header {
  background: #5636d3;
}



// components/Header/index.tsx

import "./styles.css"

function Header() {
  return (
    <div>
      <header id="header">
        <span>gofinances</span>
        <nav>
          <a href="/">Listagem</a>
          <a href="/create">Cadastro</a>
        </nav>
      </header>
    </div>
  );
}

export default Header

Se o seu servidor ainda estiver rodando (se não, npm start) basta entrar no http://localhost:3000 e você verá que a cor de fundo do nosso componente Header está roxo. Simples assim para utilizar CSS no React.

Caso você vá utilizar algum pré-processador, Google é seu melhor amigo, mas já posso te adiantar que não deve ser nenhum monstro de sete cabeças nem nada do tipo, porque no fim é apenas importar o arquivo CSS para dentro do componente React e ele funcionará.

Mas essa abordagem de criar um arquivo CSS para cada componente tem o seu problema.

⁉️ Qual o problema?

Ao separarmos os arquivos CSS em cada componente já é algo muito bom, bem melhor do que ter um arquivo único com toda estilização da nossa aplicação. Porém, ai no seu código faça um teste:

Duplique a pasta do componente Header e renomeio para um nome qualquer como Header2.
Importe esse componente no App.tsx e adicione-o abaixo <Header />.
No arquivo styles.css desse novo componente altere o background para uma cor qualquer (pode ser #000 que é preto).

Se você acompanhou os últimos posts dessa série isso deve ser fácil para você.

Ao entrar no nosso projeto rodando no browser veremos que os dois Headers tem a mesma cor de fundo, a cor que você alterou. Mas porque isso aconteceu se criamos o CSS para cada componente?

Isso acontece porque estamos utilizando o mesmo seletor CSS para estilizar: #header e o React importa os dois arquivos dentro da página, assim o CSS que é carregado por último é o que sobrescreve o outro. Uma solução para isso seria utilizar seletores diferentes, como outro id para o segundo header ou uma classe diferente.
Porém essa abordagem fica bem problemática quando o projeto cresce em escala, já que você não vai lembrar dos nomes que já foram dados anteriormente muito menos saber qual nome outro pessoa que trabalha no projeto utilizou.

E foi pensando nesse caso que vamos utilizar o Styled Components.

📐 Componentes Estilizados

O que Styled Components faz é: ele cria uma classe com identificador único para cada Componente Estilizado que criamos. Assim ele garante que ao criar um nova estilização não vamos estar afetando outro lugar da aplicação. Ele nada mais é do que um criador de CSS escrito em Javascript.
Se só isso não bastasse com ele também podemos criar temas para nossa aplicação de maneira simples e fácil, além de poder criar animações reutilizáveis entre vários componentes. Mas vamos fazer o simples primeiro.

Vamos instalar o pacote no nosso projeto:



npm i styled-components

Como esse pacote não é escrito em Typescript, temos que instalar também as tipagens. O -D serve para adicionarmos essa dependência apenas para o ambiente de desenvolvimento, já que em produção não estaremos utilizando Typescript.



npm i @types/styled-components -D

:pin: Se você estiver utilizando o VSCode, existe uma extensão que nos ajudará ao trabalhar com o styled-components que é essa. Caso não seja o seu caso, na documentação há ferramentas para outros editores de texto.

Agora, vamos alterar o arquivo styles.css para styles.ts e alterar seu conteúdo para:



// components/Header/styles.ts

import styled from 'styled-components'

export const Container = styled.div`
  background: #5636d3;
`

E o que é cada parte desse código?

export const Container estamos exportando desse arquivo uma constante que por ser um componente estilizado deve sempre iniciar com letra maiúscula.
styled é o nome que damos para a lib, poderia ser batata se quisermos, mas vamos seguir como mostra a documentação.
.div indica qual será o retorno desse componente, podendo ser qualquer tag do HTML5.
O conteúdo dentro das crases são o CSS em si, que será aplicado a essa div utilizando uma classe única.

⚠️ Caso essa sintaxe pareça diferente para você tem um artigo bem legal da Alura que explica como funciona as Tagged Template Literals.

Para vermos o efeito dessa estilização no código temos que alterar o Header/index.tsx:



// components/Header/index.tsx

import { Container } from "./styles";

function Header() {
  return (
    <Container>
      <header>
        <span>gofinances</span>
        <nav>
          <a href="/">Listagem</a>
          <a href="/create">Cadastro</a>
        </nav>
      </header>
    </Container>
  );
}

export default Header

Vemos que o Container é como qualquer outro componente, porém nele contém apenas estilização e nada mais.

A partir de agora temos duas maneiras de prosseguir, sendo elas:

Podemos criar vários componentes estilizados dentro de um componente como o Header. Por exemplo, além do Container, outros como Nav, Title e Link cada um estilizando uma parte do nosso componente.
Ou podemos utilizar o encadeamento das tags e ir estilizando tudo pelo componente container. Por exemplo, se quisermos que o <span> tenha uma cor de texto branca poderíamos fazer assim:



// components/Header/styles.ts

import styled from 'styled-components'

export const Container = styled.div`
  background: #5636d3;

  span {
    color: #FFF
  }
`

Vamos seguir o segundo modelo, por praticidade.

♻️ Resetando os estilos globalmente

Muitos das tags do HTML tem uma própria estilização que pode nos atrapalhar. Podemos ver isso no nosso projeto:

A tag body tem uma 'margin' para todos os lados de 8px. E para resetar todos essas estilizações vamos criar um pasta styles dentro do src. Dentro dessa pasta, vamos criar um arquivo global.ts para nossa estilização global.



//styles/global.ts

import { createGlobalStyle } from 'styled-components'

export default createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
  }

  body {
    background: #F0F2F5 ;
    -webkit-font-smoothing: antialiased
  }

  body, input, button {
    font: 16px "Poppins", sans-serif;
  }

  button {
    cursor: pointer;
  }
`

Explicando o que esse arquivo faz:

Primeiro importamos de dentro do 'styled-components' uma função que cria um estilização global (createGlobalStyle); e assim como fazíamos com uma div, escrevemos nosso código CSS entre crases.
No CSS, estamos zerando todos os espaçamentos, mudando a cor de fundo padrão e até mudando a fonte da aplicação. Vale ressaltar a importância de ao alterar a fonte, mudar também na tag input e button, já que em ambos não são aplicados a fonte do body.
Por fim, mudamos o cursor padrão de um botão para a mãozinha do click 👆.

Para importamos a fonte 'Poppins' no nosso projeto vamos utilizar o Google Fonts. Como esse processo pode mudar quando você estiver lendo isso vou apenas deixar meu código atual:



<!-- public/index.html -->

<!DOCTYPE html>
<html lang="pt_BR">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">  
    <title>Go Finances</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Agora temos que importar styles/global.ts no nosso App.tsx para que ele tenha efeito.

Mas antes, só para facilitar mais pra frente vamos passar parte do nosso código que está no App.tsx para outro componente.

Mas porque temos que criar mais um componente? Não basta deixar tudo dentro do 'App'?

Lembrando uma das vantagens da componentização é a reutilização de código, e já que teremos mais uma página e em todas queremos que o GlobalStyle seja aplicado temos que separar a nossa página principal. E mais uma vez isso é bem simples.

Basta lembrar, sempre que criamos um compomente que terá estilização criamos uma pasta com o nome do componente e dentro criamos um arquivo index.tsx e outro styles.ts,

Criando uma pasta pages dentro de src, e criando um componente Home que contém:



//pages/Home/index.tsx

import Header from "../../components/Header";
import TransactionList from "../../components/TransactionList";

function Home() {
  return (
    <>
      <Header />
      <TransactionList />
    </>
  );
}

export default Home;

E App.tsx:



import Home from "./pages/Home";
import GlobalStyle from "./styles/global";

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

export default App;

💄 Deixando essa página um pouco mais bonita

Estilização é algo que é muito difícil de aprender em tutorial. É algo que se aprende de tanto fazer e copiar grandes designs. Se você trabalha com web já deve entender pelo menos um pouco sobre Flexbox e/ou Grid Layout, mas se esse não é o seu caso aconselho a buscar entender um pouco sobre esses modelos de layout depois e por enquanto só digitar o que eu vou mostrar aqui de estilização já que o foco desses posts é mostrar o React e não CSS.

Para você que já entende muito bem de CSS, aqui vamos utilizar o básico e praticamente nada de avançado como Media Queries e responsividade, vamos ser o mais básico possível.

Caso não queira copiar todo o código daqui pra frente, basta clonar o projeto apenas com a parte da estilização pronta:



git clone -b entrypoint https://github.com/brunolipe-a/go-finances.git

Mas eu aconselho a você digitar todo o código para fixar.

A estilização do Header fica assim:



//components/Header/styles.ts

import styled from 'styled-components'

export const Container = styled.div`
  background: #5636d3;
  padding: 30px 0;

  header {
    width: 1120px;
    margin: 0 auto;
    padding: 0 20px 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    span {
      font-size: 1.75rem;
      font-weight: medium;
    }

    nav {
      a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        transition: opacity 0.2s;
        padding-bottom: 6px;
        border-bottom: 2px solid #FF872C;

        & + a {
          margin-left: 32px;
          margin-right: 5px;
        }

        &:hover {
          opacity: 0.6;
        }
      }
    }
  }
`

Crie um arquivo em src/utils/formatValue.ts:



const formatValue = (value: number): string =>
  Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(
    value,
  );

export default formatValue;

Novo componente Cards:



//components/Cards/styles.ts

import styled from 'styled-components';

interface CardProps {
  total?: boolean;
}

export const CardContainer = styled.section`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px;
  margin-top: -150px;
`;

export const Card = styled.div`
  background: ${({ total }: CardProps): string => (total ? '#FF872C' : '#fff')};
  padding: 22px 32px;
  border-radius: 5px;
  color: ${({ total }: CardProps): string => (total ? '#fff' : '#363F5F')};

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    a {
      background: #7159c1;
    }
    p {
      font-size: 16px;
    }
  }
  h1 {
    margin-top: 14px;
    font-size: 36px;
    font-weight: 500;
    line-height: 54px;
  }
`;



//components/Cards/index.tsx

import formatValue from "../../utils/formatValue";
import { CardContainer, Card } from "./styles";

export interface Balance {
  income: number;
  outcome: number;
  total: number;
}

type CardsProps = {
  balance: Balance;
};

function Cards({ balance }: CardsProps) {
  return (
    <CardContainer>
      <Card>
        <header>
          <p>Entradas</p>
        </header>
        <h1>{formatValue(balance.income)}</h1>
      </Card>
      <Card>
        <header>
          <p>Saídas</p>
        </header>
        <h1>{formatValue(balance.outcome)}</h1>
      </Card>
      <Card total>
        <header>
          <p>Total</p>
        </header>
        <h1>{formatValue(balance.total)}</h1>
      </Card>
    </CardContainer>
  );
}

export default Cards;

Temos que remover o antigo componente TransactionList e criar novamente utilizando uma pasta:



// components/TransactionList/styles.ts

import styled from 'styled-components';

export const TableContainer = styled.section`
  margin-top: 64px;
  table {
    width: 100%;
    border-spacing: 0 8px;
    th {
      color: #969cb3;
      font-weight: normal;
      padding: 20px 32px;
      text-align: left;
      font-size: 16px;
      line-height: 24px;
    }
    td {
      padding: 20px 32px;
      border: 0;
      background: #fff;
      font-size: 16px;
      font-weight: normal;
      color: #969cb3;
      &.title {
        color: #363f5f;
      }
      &.income {
        color: #12a454;
      }
      &.outcome {
        color: #e83f5b;
      }
    }
    td:first-child {
      border-radius: 8px 0 0 8px;
    }
    td:last-child {
      border-radius: 0 8px 8px 0;
    }
  }
`;



// components/TransactionList/index.tsx

import formatValue from "../../utils/formatValue";

import { TableContainer } from "./styles";

export interface Transaction {
  id: string;
  title: string;
  value: number;
  type: "income" | "outcome";
  category: { title: string };
  created_at: string;
}

type TransactionListProps = {
  transactions: Transaction[];
};

function TransactionList({ transactions }: TransactionListProps) {
  return (
    <TableContainer>
      <table>
        <thead>
          <tr>
            <th>Título</th>
            <th>Preço</th>
            <th>Categoria</th>
            <th>Data</th>
          </tr>
        </thead>

        <tbody>
          {transactions.map((transaction) => (
              <tr key={transaction.id}>
                <td className="title">{transaction.title}</td>
                <td className={transaction.type}>
                  {formatValue(transaction.value)}
                </td>
                <td>{transaction.category?.title}</td>
                <td>
                  {new Date(transaction.created_at).toLocaleDateString("pt-br")}
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    </TableContainer>
  );
}

export default TransactionList;

E no src/pages/Home:



// pages/Home/styles.ts

import styled from 'styled-components';

export const Container = styled.div`
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 20px;
`;



// pages/Home/index.tsx

import { useState } from "react";

import Header from "../../components/Header";

import Cards, { Balance } from "../../components/Cards";
import TransactionList, { Transaction } from "../../components/TransactionList";

import { Container } from "./styles";

function Home() {
  const [balance, setBalance] = useState<Balance>({
    income: 12.12,
    outcome: 6,
    total: 6.12,
  });

  const [transactions, setTransactions] = useState<Transaction[]>([
    {
      id: "1",
      category: { title: "Trabalho" },
      title: "Venda",
      type: "income",
      value: 12.12,
      created_at: "2021-02-03T00:00:00",
    },
    {
      id: "2",
      category: { title: "Comida" },
      title: "Lanche",
      type: "outcome",
      value: 6,
      created_at: "2021-02-21T00:00:00",
    },
  ]);

  return (
    <>
      <Header />
      <Container>
        <Cards balance={balance} />
        <TransactionList transactions={transactions} />
      </Container>
    </>
  );
}

export default Home;

Na Home temos algo novo: useState<Transaction[]>.
Utilizamos <> para informar para o useState qual a tipagem do valor a ser armazenado. Isso ajuda ao desenvolver pois o próprio VSCode vai informar se tentarmos salvar um valor que poderá quebrar código.
Por exemplo, se fossemos salvar uma string seria: useState<string>. Vale lembrar que o valor inicial do estado deve ser do mesmo tipo da tipagem.

😄 Ficou bonito?

Aqui terminamos a estilização da tela de listagem. Aconselho a digitarem todo o código para guardar na mente como criar componentes estilizados.

No próximo post vamos criar uma API de teste utilizando apenas JSON e começar a consumir essa API para gerar nossa tela dinamicamente.

PS: Um agradecimento especial💜 ao pessoal da Rocketseat🚀 pelo conteúdo de qualidade em React.

React - Como iniciar um projeto?

Bruno Felipe — Mon, 08 Feb 2021 01:15:35 +0000

🔰 Introdução

Nesse post vamos criar nossa primeira aplicação React utilizando o template Create-React-App e Typescript, um superset de Javascript que adiciona tipagem e várias outra funcionalidades mais atuais da linguagem.

📝 Pré-requisitos

Node.js instalado na sua versão LTS.
VSCode ou qualquer outro editor de código da sua preferencia.
Um browser qualquer.

⚠️ Esse tutorial foi desenvolvido utilizando o Linux, e é possível que algum comando talvez não funcione exatamente no Windows ou Mac. Nesses casos, Google é seu melhor amigo.

🔭 Conhecendo o projeto

Nós vamos criar um projeto chamado de GoFinances, um gerenciador de gastos. Nele vamos poder cadastrar saídas e entradas de dinheiro, além de informar a categoria desse valor.

Algo básico, mas um bom projeto para começar.

💻 Criando projeto com CRA

Primeiramente escolha a pasta onde você vai trabalhar no seu novo projeto e acesse ele pelo terminal. Se tiver instalado corretamente o Node, você terá acesso a um comando chamado npx. Com ele é possível executar códigos externos sem a necessidade de baixá-los e instalá-los em nossa máquina.

O comando completo é:

npx create-react-app go-finances --template=typescript

O que significa cada parte desse comando:

npx executa o comando.
create-react-app é pacote que será usado para criar o template da nossa aplicação.
go-finances é o nome do projeto.
--template=typescript é para sobrescrever o template padrão para o que utiliza o typescript.

Após rodar esse comando, o projeto e todas suas dependências começaram a serem baixadas, e assim que terminar, bastar rodar...

cd go-finances

... para entrar na pasta do projeto, e...

npm start

... para abrir no seu browser padrão.

Você deve ver uma tela como essa:

Abrindo o projeto no VSCode vamos encontrar uma estrutura como essa:

├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
├── tsconfig.json
└── yarn.lock

Vamos começar a limpar essa estrutura. Na pasta public vamos deixar apenas o index.html e favicon.ico. Dentro do index.html vamos apagar tudo que não é necessário por agora deixando apenas:

<!DOCTYPE html>
<html lang="pt_BR">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Go Finances"
    />
    <title>Go Finances</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Tá vendo essa <div id="root"></div>? É dentro dela que toda nossa aplicação vai ser renderizada pelo React. Então ela é bem importante. Não apaguem ela!

Na pasta src, vamos deixar App.tsx, index.tsx e react-app-env.d.ts por enquanto e mudando o conteúdo do index.tsx para:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Esse arquivo é a entrada da nossa aplicação. No fim do arquivo dá pra ver que a lib react-dom renderiza o conteúdo do primeiro parâmetro na <div id="root"></div>.

Agora o App.tsx:

function App() {
  return (
    <div>
      <header>
        <p>
          Edite <code>src/App.tsx</code> e salve para recarregar.
        </p>
        <a
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Aprenda React
        </a>
      </header>
    </div>
  );
}

export default App;

Se você não cancelou o npm start, basta acessar no seu browser http://localhost:3000 e verá algo como isso:

⚠️ Vale ressaltar de que desde a versão 17 do React não é mais necessário importar o React em cada arquivo. Se você tiver trabalhando em um projeto em uma versão anterior, é necessário adicionar import React from 'react' na primeira linha do App.tsx. E não se esqueça do export default nome-do-componente, sem ele o componente não poderá ser importado em outro arquivo.

📦 Componentização

Esse é o um dos mais importantes conceitos do React e você já está utilizando. Tudo na nossa aplicação é um componente. O arquivo App.tsx é o componente principal dessa aplicação. O que define um componente para mim é: "Uma função que recebe parâmetros e retorna um conteúdo JSX".

Os parâmetros ficam para o próximo tópico, mas o que é JSX?

JSX é o HTML dentro do Javascript. No nosso caso usando Typescript os aquivos que são componentes tem terminação *.tsx. Lembrando que todos componentes devem iniciar com letra maiúscula.

Todo componente pode ser importado e utilizado dentro de outro componente, ou até mesmo dentro um arquivo normal TS (ou JS).

Vamos criar o primeiro componente que será o header (cabeçalho). Primeiro, dentro da pasta src, vamos criar uma pasta components onde ficaram guardados todos nossos componentes. Criaremos um arquivo assim:

// components/Header.tsx

function Header() {
  return (
    <div>
      <header>
        <span>Go Finance</span>
        <nav>
          <a href="#">Listagem</a>
          <a href="#">Cadastro</a>
        </nav>
      </header>
    </div>
  )
}

export default Header

E importaremos no App.tsx:

import Header from "./components/Header";

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

export default App;

Agora com esse componente de Header podemos reutilizá-lo em todas as telas, e se qualquer mudança for necessária basta alterar o componente e a mudança será refletida em todas as telas.

🔧 Propriedade

Como fazemos para alterar um componente sem ter que mudar o código? E se em cada tela diferente quiséssemos que o texto dentro do Header fosse diferente? É aí que entra as propriedades.

// components/Header.tsx

type HeaderProps = {
  title?: string
}

function Header(props: HeaderProps) {
  return (
    <div>
      <header>
        <span>{props.title ?? 'Go Finances'}</span>
        <nav>
          <a href="#">Listagem</a>
          <a href="#">Cadastro</a>
        </nav>
      </header>
    </div>
  )
}

export default Header

Todas as propriedades de um componente vem dentro do argumento props. Já que estamos utilizando Typescript vamos tipar as propriedades com o tipo HeaderProps indicando que o objeto props tem um valor opcional title que deve ser uma string. Para adicionar o valor no JSX basta colocar a variável props.title entre {}. Caso nada seja passado para essa propriedade o valor padrão é Go Finances.

Podemos melhorar esse código utilizando de desestruturação:

// components/Header.tsx

type HeaderProps = {
  title?: string
}

function Header({ title = 'Go Finances' }: HeaderProps) {
  return (
    <div>
      <header>
        <span>{title}</span>
        <nav>
          <a href="#">Listagem</a>
          <a href="#">Cadastro</a>
        </nav>
      </header>
    </div>
  )
}

export default Header

E no App.tsx:

import Header from "./components/Header";

function App() {
  return (
    <div>
      <Header />
      <Header title="Titulo Novo" />
    </div>
  );
}

export default App;

Para passar um valor que não seja string utilizamos {}:

// number
<Component prop={1} />

// array
<Component prop={[1, 2, 3]} />

//object
<Component prop={{ a: 1, b: 2, c: 3 }} />

// true
<Component prop={true} />
      or
<Component prop />

//false
<Component prop={false} />

Uma propriedade especial que o próprio React adiciona é o children que nada mais é que o conteúdo de um componente.
Imagine que dentro do Header queremos passar também os links, como podemos fazer isso?

function App() {
  return (
    <div>
      <Header>
        <a href="/">Home</a>
        <a href="/sobre">Sobre</a>
        <a href="/login">Login</a>
      </Header>
    </div>
  );
}

// components/Header.tsx

import { ReactNode } from "react"

type HeaderProps = {
  children?: ReactNode
}

function Header({ children } : HeaderProps) {
  return (
    <div>
      <header>
        <span>Go Finances</span>
        <nav>
          {children}
        </nav>
      </header>
    </div>
  )
}

Vamos voltar o código para como estava no fim no tópico de Componentização.

💡 Estado e Imutabilidade

Vamos criar um novo componente para essa explicação e importar no App.tsx para ver na tela:

// components/TransactionList.tsx

function TransactionList() {
  return (
    <div />
  )
}

export default TransactionList

import Header from "./components/Header";
import TransactionList from "./components/TransactionList";

function App() {
  return (
    <>
      <Header />
      <TransactionList />
    </>
  );
}

export default App;

📌 O React não aceita que o return tenha mais de um componente diretamente um abaixo do outro, por isso estamos utilizando o <></> por volta dos dois.
Eles servem para agrupar os componentes sem ter que renderizar uma <div> em volta por exemplo.

No componente TransactionList.tsx vamos salvar uma lista fictícia de transações e tentar renderiza-las em uma <ul>:

// components/TransactionList.tsx

function TransactionList() {
  const transactions = [
    '-R$ 100,00 - Compra de Alimentos - 22/11/2020', 
    '-R$50,00 - Gasolina - 20/12/2020', 
    'R$32,00 - Investimento - 22/12/2020'
  ];

  return (
    <ul>
      {transactions.map((transaction, i) => (
        <li key={i}>{transaction}</li>
      ))}
    </ul>
  )
}

export default TransactionList

Criamos inicialmente uma lista de strings que contém nossas transações. Depois retornamos no componente uma lista (<ul>) que renderiza todos as transactions através de um map que retorna uma <li> que tem como conteúdo cada item da nossa lista.

Há também a propriedade key que recebe um valor único entre os elementos da lista. Como não temos essa valor ainda, vamos colocar o index de cada transação.

A documentação diz:

As chaves ajudam o React a identificar quais itens sofreram alterações, foram adicionados ou removidos.

A chave deve ser colocada no elemento mais "externo" do retorno do map. Caso você não coloque aparecerá um erro como esse:

Vamos agora criar um botão para adicionar uma nova transação na lista.

// components/TransactionList.tsx

function TransactionList() {
  const transactions = [
    '-R$ 100,00 - Compra de Alimentos - 22/11/2020', 
    '-R$50,00 - Gasolina - 20/12/2020', 
    'R$32,00 - Investimento - 22/12/2020'
  ];

  function handleAddTransaction() {
    console.log('clicado')
  }

  return (
    <>
      <ul>
        {transactions.map((transaction, i) => (
          <li key={i}>{transaction}</li>
        ))}
      </ul>
      <button onClick={handleAddTransaction}>
        Adicionar Transação
      </button>
    </>
  )
}

export default TransactionList

Para adicionar uma função que é disparada ao clicar no botão, basta criar a função e adiciona-lá a propriedade onClick. Teste no seu projeto e veja no console (ctrl + shift + i) do browser se está funcionando.

Se mudarmos o código da função para adicionar uma nova transação na lista ficaria assim:

function handleAddTransaction() {
   transactions.push('Nova transação')

   console.log(transactions)
 }

Porém se abrirmos nossa aplicação e clicarmos no botão veremos que a tela não é atualizada, mas no console aparece que a lista está recebendo novos items.

Isso acontece porque o React não sabe que deve atualizar a tela apenas de mudarmos o valor da variável transactions. Temos que criar um estado que guardará a lista de transações. Para isso utilizaremos o hook useState.

// components/TransactionList.tsx

import { useState } from "react";

function TransactionList() {
  const [transactions, setTransactions] = useState([
    '-R$ 100,00 - Compra de Alimentos - 22/11/2020', 
    '-R$50,00 - Gasolina - 20/12/2020', 
    'R$32,00 - Investimento - 22/12/2020'
  ])

  function handleAddTransaction() {
    console.log(transactions)
  }

  return (
    <>
      <ul>
        {transactions.map((transaction, i) => (
          <li key={i}>{transaction}</li>
        ))}
      </ul>
      <button onClick={handleAddTransaction}>
        Adicionar Transação
      </button>
    </>
  )
}

export default TransactionList

O useState retorna um array, sendo a primeira posição a valor real do estado e como segunda posição uma função utilizada para alterar esse estado.

Como parâmetro ele recebe o valor inicial do estado. No nosso caso são os valores das primeiras transações de teste.

Para alteramos o valor de transactions passamos o novo valor para a função setTransactions. Ai entra a imutabilidade. Não devemos alterar o valor do estado diretamente como fizemos anteriormente usando transactions.push('Nova transação'). Devemos criar uma nova lista de transações que contenha os valores anterior da lista e adicionando o novo valor:

function handleAddTransaction() {
    setTransactions([...transactions, 'Nova Transação'])
}

Assim deixamos a cargo do React alterar o estado, e consequentemente alterar a tela.

Utilizamos o useState quando precisamos salvar um valor que será utilizado para alterar a tela ou algum componente. Poderia ser por exemplo o número de notificações não lidas pelo usuário, ou o número de likes em foto ou até a lista de comentários de uma postagem. Todos são valores que, se alterados, devem alterar o que o usuário vê.

😅 Só isso tudo?

É bastante coisa para aprender de uma vez. O que eu aconselho é entre esse e o próximo tutorial você teste algumas das suas ideias utilizando Componentização, Propriedade e Estado. Talvez criar um pequeno contador que diminui e aumente o valor recebido por propriedade... Bem são infinitas possibilidades.

Se for seguir meu conselho tente algo simples, nada de tentar começar com a próxima ideia revolucionaria de uma nova empresa do Elon Musk.

Bem... por enquanto, isso é tudo pessoal!

No próximo post vamos iniciar de verdade nosso projeto já estilizando a aplicação.

PS: Um agradecimento especial💜 ao pessoal da Rocketseat🚀 pelo conteúdo de qualidade em React.

React - O que é?

Bruno Felipe — Mon, 08 Feb 2021 00:59:52 +0000

👋 Introdução

React é uma das maiores ferramentas para criação de interfaces de usuário. Com ela é possível criar desde de aplicações web (React-DOM), aplicações mobile (React Native) e até aplicações desktop c/ Electron.

Mas já que ela pode fazer tudo isso e mais um pouco, React é uma biblioteca ou um framework?

❓ O que é o que é? Parece framework mas é biblioteca?

Como a própria documentação do React diz sobre si: "Uma biblioteca JavaScript para criar interfaces de usuário".

Porém, algumas pessoas ao se referirem a todo ecossistema da lib, acabam dizendo framework, mas não se enganem! Existem sim frameworks feitos em cima do React como o Next.js para web e o Expo para mobile, mas ambos utilizam da biblioteca React para funcionarem.

🤔 Tá, mas por que utilizar React na web?

Que bom que você perguntou!

O React na web é muito utilizado para criação de SPAs (Single-Page Applications), aqueles sites onde ao mudar de páginas dentro de uma aplicação a tela não é recarregada do zero, ela só modifica o que precisa mostrar no momento.

Antes do SPA, a cada requisição toda aplicação era recarregada e quem era responsável pela criação da nova tela a ser mostrada era o back-end (o servidor).

Um bom exemplo disso é o Youtube.

Outro ponto muito legal de se trabalhar com React é que tudo fica dentro do Javascript, desde o HTML até o CSS, tudo é Javascript 😄

Mas isso não quer dizer que todo conhecimento com essas tecnologias para web devem ser jogadas fora e temos que aprender totalmente do zero. Não.

O mesmo HTML e CSS que você escreve em uma aplicação tradicional vai ser escrito no React, porém o Javascript vai ter controle sobre tudo e vai turbinar sua aplicação.

Um exemplo de código em React:

import React from 'react'

import './button.css'

function Button() {
  return (
    <div>
      <button>Salvar</button>
    </div>
  )
}

E falando em Javascript, todo mundo que trabalha com desenvolvimento web tem que aprender JS, porém esse conhecimento é "perdido" ao se ter que trabalhar em mobile, por exemplo.

Já pensou se você pudesse manter a mesma base de conhecimento e construir ambas aplicações? Com React você pode, mudando apenas um pouco da sintaxe tudo que você sabe na web é reutilizado no mobile.

Um exemplo de código em React Native:

import React from 'react'
import { View, Button } from 'react-native'

function Button() {
  return (
    <View>
      <Button title="Salvar" />
    </View>
  )
}

O que mais eu ganho com o React?

📦 Componentização

Com React é possível separar nossa aplicação em diversos componentes que funcionam de forma independente um dos outros, assim facilitando a reutilização de código.

Além de melhorar a organização do código, dividindo uma tela complexa em partes menores é mais simples e rápido a manutenção do código.

✅ Divisão de Responsabilidades

Ao se utilizar um front-end separado do back-end, temos a divisão bem clara de responsabilidades. O back-end deve tratar das regras de negócio enquanto o front-end (React) deve tratar de apresentar os dados.

💄 Uma API, múltiplos clientes

Separando as responsabilidades, com uma mesma API é possível criar tanto uma aplicação web e mobile sem precisar modificar as regras de negócio para cara cliente que consome nossa API.

⚡ Programação declarativa

Já teve que alterar uma tela de acordo com o clique de um botão? Ou mudar uma lista assim que usuário digita algo no filtro? Com React esse tipo de mudança é muito mais simples.

Veja no próximo tópico.

🏗️ Imperativo vs Declarativo

Vamos pegar o exemplo de um sininho de notificações e a badge que mostra a quantidade de notificação não vistas pelo usuário.

De maneira imperativa, como esse código poderia ser escrito?

const pastNotifications = 0

function montaBadge(newNotify) {
  // Se não haviam notificações anteriormente 
  // e existem novas notificações
  if (pastNotifications === 0 && newNotify > 0) {
    // Adiciona badge ao sininho
    // container.appendChild(badge)...
  }

  // Se haviam notificações anteriormente 
  // e existem novas notificações
  if (pastNotifications !==  0 && newNotify > 0) {
    // Apenas muda o número
    // badge.innetHTML = newNotify...
  }

  // Se haviam notificações anteriormente 
  // e não existem novas notificações
  if (pastNotifications !== 0 && newNotify === 0) {
    // Remove a badge
    // container.removeChild(badge)
  }
}

Percebe o quão complexo e trabalhoso uma simples função pode se tornar? E se não forem só esses casos (if)? E se alguém errar o código que remove a badge?

Na maneira imperativa temos que descrever para o "computador" tudo que queremos que ele faça, explicado passo a passo o que fazer em cada caso.

E de forma declarativa? Como esse código ficaria?

// Não comparamos com o estado anterior

function Bagde({ notifications }) {
  return (
    <div id="container">
      {notifications > 0 && <div id="badge">{notifications}</div>}
      <span class="icon"></span>
    </div>
  )
}

A primeira grande diferença é a falta de um estado anterior que guarda quantas notificações haviam anteriormente. Não precisamos mais disso.

Outra mudança é a utilização dos &&. Eles significam:
"Caso o que houver do meu lado esquerdo seja verdadeiro, eu irei retornar o que há no meu lado direito. Se for falso, retorno nada".

A utilização dos && facilita muito pois não precisamos mais de um if para mostrar ou remover a badge.

E por último declaramos que o conteúdo da bagde é o numero de notificações. Enfim, o React trata de resolver o que for necessário para manter seu componente comportando-se da maneira que você declarou. 🥳

💁 E aí? Já acabou Jéssica?

Ufa! Foi muita coisa, muita explicação, mas espero que esse texto tenha te ajudado a entender pelo menos um pouco do que é o React e suas vantagens 🎉

Poxa, gostei tanto do React. Como que faço para criar meu primeiro projeto? Como crio um site e faço deploy dele de maneira gratuita na internet?

Oi, eu sou Bruno. Eu vou mostrar a vocês como criar um projeto utilizando um template que nos facilita toda a configuração necessária para iniciar um projeto React. Além de explicar o que é componente, propriedade e estado.

Não percam, o próximo post de React será...

Criando seu primeiro projeto!

PS: Um agradecimento especial💜 ao pessoal da Rocketseat🚀 pelo conteúdo de qualidade em React.