Como realizar operações de CRUD usando React, hooks do React e Axios

Artigo original: https://www.freecodecamp.org/news/how-to-perform-crud-operations-using-react/

Se você está trabalhando com React, pode ser difícil entender e implementar solicitações de API.

Neste artigo, aprenderemos como tudo funciona implementando operações de CRUD usando React, hooks do React, React Router e Axios.

Vamos lá.

Como instalar o Node e o npm

Primeiramente, vamos instalar o Node em nosso sistema. Vamos usá-lo, primeiramente, para executar nosso código em JavaScript.

Para baixar o Node, acesse https://nodejs.org/en/.

Você também precisará do node package manager, ou npm, que já vem integrado ao Node. Você pode usá-lo para instalar os pacotes para seus apps em JavaScript. Felizmente, como ele vem com o Node, não é necessário baixá-lo separadamente.

Depois de baixá-los e instalá-los, abra seu terminal ou o prompt de comando e digite node -v. Assim, você poderá conferir a versão do Node que você tem.

Como criar sua aplicação em React

Para criar sua aplicação em React, digite npx-create-react-app <nome-do-seu-app> no seu terminal ou npx-create-react-app react-crud, neste caso.

Você verá os pacotes serem instalados.

Ao terminar de baixar os pacotes, vá até a pasta do projeto e digite npm start.

Você verá o modelo padrão do React, que tem essa aparência:

Screenshot-2021-07-24-124754 — O boilerplate padrão do React

Screenshot-2021-07-24-124858--1- — Nosso arquivo App.js

Como instalar o pacote Semantic UI para o React

Vamos instalar o pacote Semantic UI para o React em nosso projeto. Semantic UI é uma biblioteca de UI (interface de usuário) feita para o React que tem componentes de UI pré-construídos, como tabelas, botões e muitos outros recursos.

Você pode instalar o pacote usando um dos comandos abaixo, dependendo do seu gerenciador de pacotes.

yarn add semantic-ui-react semantic-ui-css

Para o gerenciador de pacotes do Yarn

npm install semantic-ui-react semantic-ui-css

Para o gerenciador de pacotes do Node, o NPM

Além disso, importe a biblioteca em seu arquivo de entrada principal do app, chamado index.js.

import 'semantic-ui-css/semantic.min.css'

Cole isto no seu arquivo index.js

Como criar sua aplicação com CRUD

Agora, vamos começar a criar nossa aplicação com CRUD usando o React.

Primeiro, vamos adicionar um título à nossa aplicação.

Em nosso arquivo app.js, teremos o seguinte:

import './App.css';

function App() {
  return (
    <div>
      React Crud Operations
    </div>
  );
}

export default App;

Adicionando um título à nossa aplicação

Agora, vamos garantir que ela esteja centralizada.

Dê à div pai a classname main. No arquivo App.css, usaremos Flexbox para centralizar o título.

import './App.css';

function App() {
  return (
    <div className="main">
      React Crud Operations
    </div>
  );
}

export default App;

app.js com a className main na div pai

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Nosso arquivo app.css

Nosso título, agora, está centralizado com perfeição.

Agora que a aparência está melhor, precisamos colocá-lo em realce e adicionar umas fontes legais. Para fazer isso, usaremos as tags ao redor do título, assim:

import './App.css';

function App() {
  return (
    <div className="main">
      <h2 className="main-header">React Crud Operations</h2>
    </div>
  );
}

export default App;

Vamos importar uma Google Font. Acesse https://fonts.google.com/ para escolhermos uma.

Selecione a fonte de sua preferência. Para o exemplo, usaremos a família de fontes Montserrat.

Importe a sua fonte preferida no arquivo App.css, assim:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

Agora, vamos mudar a fonte do título.

<div className="main">
      <h2 className="main-header">React Crud Operations</h2>
    </div>

Dê à tag do título a className main-header, assim.

Em seguida, no seu App.css, adicione a família da fonte:

.main-header{
  font-family: 'Montserrat', sans-serif;
}

Agora, você verá o título modificado.

Como criar seus componentes de CRUD

Vamos criar quatro componentes de CRUD – Create, Read, Update e Delete (criar, ler, atualizar e excluir, respectivamente).

Na nossa pasta src, criamos uma pasta chamada components. Dentro dela, criamos três arquivos – create.js, read.js e update.js. Para a exclusão (delete), não precisamos de um componente adicional.

Agora, vamos implementar a operação de criação.

Para isso, precisamos usar APIs mock ou de simulação. Essas APIs enviarão dados ao servidor falso que criaremos, apenas para fins didáticos.

Assim, acesse https://mockapi.io/ e crie sua conta.

Criar um projeto clicando no botão +.

Screenshot-2021-07-24-133553 — Clique no botão + para criar um novo projeto

Adicione o nome do projeto e clique no botão Create (Criar).

Em seguida, crie um novo recurso clicando no botão NEW RESOURCE (Novo recurso).

Será solicitado o nome do recurso (em Resource Name). Coloque ali o nome que achar apropriado.

Remova os campos adicionais, como name, avatar e createdAt, pois não precisaremos deles. Então, clique em Create (Criar).

Criamos nossa API falsa, que chamei de fakeData (dados falsos).

Clique em fakeData e você verá a API sendo aberta em uma nova guia. O banco de dados agora está vazio.

Como criar um formulário para o componente Create

Vamos usar um formulário da biblioteca Semantic UI.

Vá até Semantic UI, e procure por Form na barra de pesquisa à esquerda.

Você verá um formulário assim. Clique em Try it (Experimente) na parte superior esquerda para obter o código.

Copie este código e cole-o no seu arquivo Create.js, assim:

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    <Form>
        <Form.Field>
            <label>First Name</label>
            <input placeholder='First Name' />
        </Form.Field>
        <Form.Field>
            <label>Last Name</label>
            <input placeholder='Last Name' />
        </Form.Field>
        <Form.Field>
            <Checkbox label='I agree to the Terms and Conditions' />
        </Form.Field>
        <Button type='submit'>Submit</Button>
    </Form>
)

export default Create;

Importe o componente Create no seu arquivo app.js.

import './App.css';
import Create from './components/create';

function App() {
  return (
    <div className="main">
      <h2 className="main-header">React Crud Operations</h2>
      <div>
        <Create/>
      </div>
    </div>
  );
}

export default App;

Este é o resultado:

Temos um problema agora – os itens não estão alinhados adequadamente e as cores dos labels para os inputs de texto estão em preto. Vamos mudar isso.

No arquivo Create.js, dê à Form a className de create-form.

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    <Form className="create-form">
        <Form.Field>
            <label>First Name</label>
            <input placeholder='First Name' />
        </Form.Field>
        <Form.Field>
            <label>Last Name</label>
            <input placeholder='Last Name' />
        </Form.Field>
        <Form.Field>
            <Checkbox label='I agree to the Terms and Conditions' />
        </Form.Field>
        <Button type='submit'>Submit</Button>
    </Form>
)

export default Create;

app.js

E adicione a classe abaixo ao seu arquivo App.css:

.create-form label{
  color: whitesmoke !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px !important;
}

App.css

Esta classe terá como alvo todos os labels dos campos do formulários e aplicará a eles a cor whitesmoke. Ela também mudará a fonte e aumentará o tamanho da fonte.

Em nosso className main, adicione a propriedade flex-direction. Essa propriedade definirá a orientação como column, de modo que cada elemento na className main seja alinhado na horizontal.

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #212121;
  color: whitesmoke;
  flex-direction: column;
}

App.css

O formulário, agora, tem uma aparência bem melhor.

Em seguida, vamos obter os dados dos campos do formulário e colocá-los em nosso console. Para isso, usaremos o hook useState em React.

No arquivo Create.js, importe useState de React.

import React, { useState } from 'react';

Depois, crie states para first name, last name (nome e sobrenome, respectivamente) e para a caixa de seleção. Inicializaremos os states como vazios ou false.

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' />
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' />
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' />
                </Form.Field>
                <Button type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

Você poderá ver agora que o código está agindo como um componente funcional. Por isso, precisamos transformar o componente em um componente funcional . Somente poderemos usar hooks com esse tipo de componente.

Vamos configurar first name, last name e a caixa de seleção usando as propriedades setFirstName, setLastName e setCheckbox, respectivamente.

<input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>

<input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>

<Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>

Agora, estamos capturando os states de first name, last name e da caixa de seleção.

Crie uma função chamada postData, que usaremos para enviar dados para a API. Dentro da função, escreveremos este código:

const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
}

Estamos imprimindo no console o conteúdo de first name, last name e da caixa de seleção.

No botão Submit, atribua essa função usando o evento onClick para que, quando o botão Submit for pressionado, essa função seja chamada.

<Button onClick={postData} type='submit'>Submit</Button>

Aqui temos o código completo para o arquivo create.js:

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
    }
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button onClick={postData} type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

Digite algum valor em first name e last name e marque a caixa de seleção. Em seguida, clique no botão Submit. Você verá os dados aparecerem no console, assim:

Como usar o Axios para enviar solicitações de API para as Mock APIs

Vamos usar o Axios para enviar os dados do formulário para o servidor mock.

Primeiro, porém, precisamos instalá-lo.

Apenas digite npm i axios para instalar o pacote.

Após termos instalado o pacote, vamos fazer a operação de criação.

Importe o Axios na parte superior do arquivo.

import axios from 'axios';

Importação do Axios

Na função postData, usaremos o Axios para enviar a solicitação de POST.

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        })
    }

Enviando a solicitação de Post

Como você pode ver, estamos usando axios.post. Dentro de axios.post, temos o endpoint da API, a qual criamos anteriormente. Em seguida, temos os campos do formulário envolvidos em chaves.

Ao clicarmos em Submit, essa função será chamada e enviará os dados ao servidor da API.

Insira seu nome, sobrenome e marque a caixa de seleção. Clique em Submit.

Se você verificar a API, verá seu nome, sobrenome e a caixa de seleção (ou checkbox, em inglês) assinalada como true, dentro do objeto.

Como implementar as operações de leitura e atualização

Para iniciar a operação de leitura (Read), precisamos criar uma página de leitura. Também precisaremos do pacote React Router para navegar entre páginas diferentes.

Acesse https://reactrouter.com/web/guides/quick-start e instale o pacote usando npm i react-router-dom.

Depois de ele ter sido instalado, importamos algumas coisas do React Router:

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

Importando Browser Router como Router e Route do pacote React Router

Em nosso App.js, envolvemos todo o return em um Router (roteador). O que isso significa, basicamente, é que tudo o que estiver dentro desse Router poderá usar roteamento em React.

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Create />
        </div>
      </div>
    </Router>
  );
}

export default App;

Nosso App.js terá, agora, a aparência que vemos acima.

Substitua o Create dentro do return e adicione o código a seguir:

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Route exact path='/create' component={Create} />
        </div>
      </div>
    </Router>
  );
}

export default App;

Aqui, estamos usado o componente Route como Create. Definimos o caminho de Create como '/create'. Assim, se acessarmos http://localhost:3000/create, veremos a página de criação.

Do mesmo modo, precisamos das rotas para leitura e atualização.

import './App.css';
import Create from './components/create';
import Read from './components/read';
import Update from './components/update';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Route exact path='/create' component={Create} />
        </div>
        <div style={{ marginTop: 20 }}>
          <Route exact path='/read' component={Read} />
        </div>

        <Route path='/update' component={Update} />
      </div>
    </Router>
  );
}

export default App;

Assim, crie as rotas de leitura e atualização (read e update) da mesma forma que você vê acima.

Se você acessar http://localhost:3000/read, verá o seguinte:

Screenshot-2021-07-24-180318 — Rota de leitura (Read)

E no URL http://localhost:3000/update, teremos o componente de atualização (Update) assim:

Screenshot-2021-07-24-180440 — Rota de atualização (Update)

A operação de leitura

Para a operação de leitura (Read), precisaremos de um componente Table (tabela). Então, vá para a Semantic UI do React e use uma tabela da biblioteca.

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>Name</Table.HeaderCell>
                        <Table.HeaderCell>Registration Date</Table.HeaderCell>
                        <Table.HeaderCell>E-mail address</Table.HeaderCell>
                        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>John Lilki</Table.Cell>
                        <Table.Cell>September 14, 2013</Table.Cell>
                        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
                        <Table.Cell>No</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <Table.Cell>Jamie Harington</Table.Cell>
                        <Table.Cell>January 11, 2014</Table.Cell>
                        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <Table.Cell>Jill Lewis</Table.Cell>
                        <Table.Cell>May 11, 2014</Table.Cell>
                        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

Read.js

Aqui, você pode ver uma tabela com alguns dados de teste. Temos apenas uma linha de tabela. Assim, removeremos o resto.

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>Name</Table.HeaderCell>
                        <Table.HeaderCell>Registration Date</Table.HeaderCell>
                        <Table.HeaderCell>E-mail address</Table.HeaderCell>
                        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>John Lilki</Table.Cell>
                        <Table.Cell>September 14, 2013</Table.Cell>
                        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
                        <Table.Cell>No</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

Read.js

Esse é o resultado da página de leitura (Read). Temos uma tabela com quatro colunas, mas somente precisamos de três.

Remova as colunas adicionais de campo e renomeio os campos assim:

Esta é a aparência de nossa página de leitura agora:

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>First Name</Table.HeaderCell>
                        <Table.HeaderCell>Last Name</Table.HeaderCell>
                        <Table.HeaderCell>Checked</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>Nishant</Table.Cell>
                        <Table.Cell>Kumar</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

Read.js

Em seguida, vamos enviar uma solicitação de GET para obter os dados da API.

Precisamos dos dados quando nossa aplicação carregar. Assim, vamos usar o hook useEffect.

import React, { useEffect } from 'react';

 useEffect(() => {
       
 }, [])

Hook useEffect

Crie um state que conterá os dados recebidos. Este state será um array.

import React, { useEffect, useState } from 'react';

const [APIData, setAPIData] = useState([]);
useEffect(() => {
       
}, [])

State de APIData para armazenar os dados recebidos da API

No hook useEffect, vamos enviar a solicitação de GET.

 useEffect(() => {
        axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
            .then((response) => {
                setAPIData(response.data);
            })
    }, [])

Assim, usaremos axios.get para enviar a solicitação de GET à API. Então, se a solicitação for preenchida, definiremos os dados da resposta em nosso state da APIData.

Agora, vamos mapear nossas linhas da tabela de acordo com os dados da API.

Vamos usar a função Map para fazer isso. A função vai percorrer o array e exibir os dados no resultados.

<Table.Body>
  {APIData.map((data) => {
     return (
       <Table.Row>
          <Table.Cell>{data.firstName}</Table.Cell>
           <Table.Cell>{data.lastName}</Table.Cell>
           <Table.Cell>{data.checkbox ? 'Checked' : 'Unchecked'}</Table.Cell>
        </Table.Row>
   )})}
</Table.Body>

Estamos mapeando firstName, lastName e a caixa de seleção de acordo com os dados na API. Nossa caixa de seleção, no entanto, é um pouco diferente. Usei aqui um operador ternário ('?'). Se data.checkbox for true, o resultado será Checked (marcado). Do contrário, será Unchecked (desmarcado).

Screenshot-2021-07-24-184955 — Resultado de Read.js

A operação de atualização

Crie mais um cabeçalho para a atualização (Update) e uma coluna para cada linha da tabela para um botão de atualização. Use o botão de Semantic UI do React.

<Table.HeaderCell>Update</Table.HeaderCell>

<Table.Cell> 
  <Button>Update</Button>
</Table.Cell>

Criação do botão Update

Agora, ao clicarmos nesse botão, deveremos ser redirecionados para a página de atualização. Para isso, precisamos do Link de React Router.

Importe Link de React Router. Envolva a célula da tabela para o botão Update com as tags para Link.

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

<Link to='/update'>
  <Table.Cell> 
     <Button>Update</Button>
   </Table.Cell>
</Link>

Link para o botão Update

Desse modo, se clicarmos no botão Update, seremos redirecionados para a página de atualização.

Para atualizar os dados da coluna, precisaremos dos ID respectivos, os quais obteremos na API.

Crie uma função chamada setData. Vincule essa função ao botão Update.

 <Button onClick={() => setData()}>Update</Button>

Depois disso, precisamos passar os dados como parâmetro para a função superior.

 <Button onClick={() => setData(data)}>Update</Button>

Na função acima, registramos esses dados no console:

const setData = (data) => {
   console.log(data);
}

Screenshot-2021-07-24-190515 — Dados no console

Clique no botão Update na tabela e confira o console. Você obterá os dados do campo da tabela respectivo.

Vamos definir esses dados no localStorage.

const setData = (data) => {
        let { id, firstName, lastName, checkbox } = data;
        localStorage.setItem('ID', id);
        localStorage.setItem('First Name', firstName);
        localStorage.setItem('Last Name', lastName);
        localStorage.setItem('Checkbox Value', checkbox)
}

Definindo os dados no localStorage (Armazenamento local)

Estamos fazendo a desestruturação dos nossos dados em id, firstName, lastName, e checkbox. Em seguida, definimos esses dados no armazenamento local. Você pode usar o armazenamento local para armazenar os dados localmente no navegador.

Em seguida, no componente Update, precisamos de um formulário para a operação de atualização. Vamos reutilizar o formulário do componente Create. Apenas mude o nome da função de Create para Update.

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';

export default function Update() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit'>Update</Button>
            </Form>
        </div>
    )
}

Nossa página de atualização

Crie um hook useEffect no componente Update. Nós o utilizaremos para obter os dados que armazenamos anteriormente em localStorage. Além disso, crie mais um state para o campo ID.

const [id, setID] = useState(null);

useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'))
}, []);

Defina os dados respectivos de acordo com suas chaves no armazenamento local. Precisamos definir esses valores nos campos do formulário. Isso preencherá os campos automaticamente quando a página de Update for carregada.

<Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' value={lastName} onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' checked={checkbox} onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit'>Update</Button>
            </Form>

Definindo os valores nos campos do formulário

Agora, se clicarmos no botão Update na página de leitura, seremos redirecionados para a página de atualização, onde veremos todos os dados do formulário preenchidos automaticamente.

Screenshot-2021-07-24-193521 — Página de atualização

Em seguida, criaremos a solicitação para a atualização dos dados.

Crie uma função chamada updateAPIData. Dentro dessa função, usaremos o axios.put para enviar uma solicitação de PUT, a qual atualizará nossos dados.

const updateAPIData = () => {
    axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
        firstName,
         lastName,
         checkbox
	})
}

Aqui, você pode ver que estamos adicionando ao endpoint da API um campo id.

Ao clicarmos em um campo na tabela, seu ID será armazenado no armazenamento local. Na página de atualização, nós o obtemos. Em seguida, armazenamos esse ID no state id.

Depois disso, passamos o id para o endpoint. Isso nos permite atualizar o campo cujo ID nós acabamos de passar.

Vincule a função updateAPIData ao botão Update.

<Button type='submit' onClick={updateAPIData}>Update</Button>

Vinculando updateAPIData ao botão Update

Clique no botão Update na tabela na página de leitura, altere seu sobrenome e clique no botão Update na página de atualização.

Screenshot-2021-07-24-194627 — Atualização dos campos

Volte à página de leitura ou confira a API. Você verá que seu sobrenome foi alterado.

Screenshot-2021-07-24-194756 — Na Mock API

Screenshot-2021-07-24-194822 — Em nossa página de leitura

A operação de exclusão

Adicione mais um botão na tabela em Read, que usaremos para a operação de exclusão.

<Table.Cell>
   <Button onClick={() => onDelete(data.id)}>Delete</Button>
</Table.Cell>

Botão de exclusão na tabela do componente Read

Crie uma função chamada onDelete, vinculando-a ao botão Delete. Essa função receberá um parâmetro de ID ao clicarmos no botão Delete.

const onDelete = (id) => {

}

A função de exclusão

Usaremos o axios.delete para excluir as colunas respectivas.

const onDelete = (id) => {
  axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
}

Exclusão dos campos da API

Clique no botão Delete e confira a API. Você verá que os dados foram excluídos.

Precisamos carregar os dados da tabela após eles terem sido excluídos.

Desse modo, crie uma função para carregar os dados da API.

const getData = () => {
    axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
        .then((getData) => {
             setAPIData(getData.data);
         })
}

Obtendo os dados da API

Agora, na função onDelete, precisamos carregar os dados atualizados após excluirmos um campo.

const onDelete = (id) => {
        axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
     .then(() => {
        getData();
    })
}

Carregando os dados atualizados após excluir um campo

Screenshot-2021-07-24-201047 — Tabela do componente Read

Nesse momento, se clicarmos em Delete em qualquer um dos campos, ele será excluído e a tabela será atualizada automaticamente.

Screenshot-2021-07-24-201423 — Tabela do componente Read após excluir um campo

Vamos fazer algumas melhorias ao nosso app com CRUD

Então, ao publicarmos nossos dados na página Create, simplesmente estaremos obtendo os dados de nosso banco de dados falso. Precisamos redirecionar para a página de leitura quando nossos dados são criados na página de criação.

Importe useHistory de React Router.

import { useHistory } from 'react-router';

Importando useHistory de React Router

Crie uma variável chamada history e defina useHistory dentro dela.

let history = useHistory();

Em seguida, use a função history.push para fazer o push para a página de leitura logo após a API de publicação ser chamada.

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }

Fazendo o push para a página de leitura após o post na API ter sido bem-sucedido

Faremos o push para a página de leitura usando o hook useHistory.

Faça o mesmo para a página de atualização.

import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useHistory } from 'react-router';

export default function Update() {
    let history = useHistory();
    const [id, setID] = useState(null);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'));
    }, []);

    const updateAPIData = () => {
        axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' value={lastName} onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' checked={checkbox} onChange={() => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit' onClick={updateAPIData}>Update</Button>
            </Form>
        </div>
    )
}

Update.js

Agora, você sabe como realizar operações de CRUD usando o React e os hooks do React!

Como alternativa, assista no YouTube o vídeo do autor sobre operações de CRUD em React (em inglês) se quiser complementar seu aprendizado.

Você pode encontrar o código deste tutorial no GitHub se quiser fazer mais testes com ele.

Feliz aprendizagem.