Forem: Eduardo Ramos

React JS - Construindo uma wiki de personagens Ricky e Morty - parte 1

Eduardo Ramos — Wed, 27 Jul 2022 12:32:06 +0000

Nesse primeiro tutorial de React, vamos fazer um "hands on lab" ou melhor "mão na massa" porque primeiramente será todo em português e segundo que será o mais prático possível sem entrar muito afundo sobre cada funcionalidade aqui utilizada. No final deste artigo você terá aprendido (ou não) alguns conceitos:

Criar componentes;
Usar filtros;
Usar paginação;
Usar react hooks (useState, useEffect);
Criar rotas dinâmicas;
Criar barra de pesquisa, navegação dentre outros;

Obs: Embora o artigo seja em português, todo o código será escrito em inglês por questões de boas práticas.

Então vamos lá!
Crie uma pasta com o nome 'react-wiki';
Abra essa pasta no VSCODE;

Agora abra o terminal (CTRL + ') e rode os seguintes comandos:

1- O NPX é um package runner do NPM. Ele executa as bibliotecas que podem ser baixadas do site npmjs.
npx create-react-app .

2- Bootstrap é um framework front-end que fornece estruturas de CSS para a criação de sites e aplicações responsivas de forma rápida e simples.
npm install bootstrap

3- O Popper. js é uma biblioteca JavaScript que serve para posicionar elementos como menus, tooltips e popovers.
npm install @popperjs/core --save

4- O SASS é uma linguagem de extensão do CSS, a sigla significa “Syntactically Awesome Style Sheets” traduzindo ao pé da letra, folhas de estilo com uma sintaxe incrível. A sua ideia é adicionar recursos especiais como variáveis, funções, operações e outras coisas.
npm install sass

5- O React Router é uma biblioteca do React que permite a navegação entre diversas partes da aplicação, como páginas.
npm install react-router-dom

6- O React Paginate é um componente que fará toda a paginação. Neste artigo vou mostrar apenas como implementá-lo sem entrar na lógica de funcionamento do mesmo.
npm install react-paginate --save

E por último rode a aplicação para ver se está tudo OK com:
npm start

Tudo funcionando? Se sim, vc deve ter visto um logo do ReactJs girando na tela e ela provavelmente abriu no endereço "http://localhost:3000".

A aplicação que vamos desenvolver será uma "wiki" de personagens do desenho animado Rick and Morty e para isso vamos consumir a api pública que está neste endereço https://rickandmortyapi.com.
Toda documentação e como usar a api pode ser conferida na seção Docs ou na url https://rickandmortyapi.com/documentation.

Nossa aplicação terá um menu de navegação, barra de pesquisa, filtros por status, gênero (gender), espécies (species), episódios (episodes) e localização (location).
Segue uma figura pra ver a cara da aplicação final. No final do artigo vou deixar um link do app rodando para que possam conferir com mais detalhes.

Nosso primeiro passo agora é criar uma estrutura de pasta para organizar o app.

Crie uma estrutura de pastas como essa abaixo:

src > components >

Card
Filter
Navbar
Pagination
Search

Vamos remover todo o conteúdo do arquivo App.css e transformá-lo em arquivo SASS, basta renomeá-lo para App.scss;
Dentro desse arquivo vamos ter apenas uma classe css, mas já vamos nos habituar a usar como sass:

.active { color: #0b5ed7 !important; font-weight: bold; border-bottom: 3px solid #0b5ed7; }

Dentro do arquivo App.js vamos importar inicialmente o css do bootstrap, o js do bootstrap e os hooks useState e useEffect do react. Suas primeiras linhas de código no arquivo App.js:

import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/js/bootstrap"; import React, { useState, useEffect } from "react";

Antes de continuar vamos criar um card para exibir o resultado da api.

» Card

Agora criaremos um card para exibir o resultado da api que iremos utilizar. O resultado ficará igual a imagem abaixo:

Primeiro vamos criar um arquivo chamado Card.module.scss dentro da pasta Card. Ele terá o css do card e será interpretado pelo sass.

Coloque o código abaixo:

$radius: 10px;

.card {
  border: 2px solid #0b5ed7;
  border-radius: $radius;
}

.content {
  padding: 10px;
}

.img {
  border-radius: $radius $radius 0 0;
}

.badge {
  top: 10px;
  right: 20px;
  font-size: 17px;
}

Pra quem nunca viu ou usou o sass. O uso do sass pode ser conferido na variável $radius. Ao atribuir um valor para $radius, podemos atribuí-la diretamente como valor para cada propriedade no restante do css e ao mudar o valor da variável, mudará para todas as propriedades de uma vez, assim como fazemos com javascript por exemplo.

Dentro da pasta Card, crie um arquivo javascript Card.js e adicione o seguinte código:

import React from "react";
import styles from "./Card.module.scss";

const Card = ({ page, results }) => {    

    let display;

    if (results) {
        display = results.map((x) => {
        let { id, image, name, status, location } = x;

          return (
            <div
            key={id}
            className="col-lg-4 col-md-6 col-sm-6 col-12 mb-4 position-relative text-dark"
          >
            <div className={`${styles.card} d-flex flex-column justify-content-center`}>
                <img className={`${styles.img} img-fluid`} src={image} alt="" />
                <div className={`${styles.content}`}>
                    <div className="fs-5 fw-bold mb-4">{name}</div>
                    <div className="">
                        <div className="fs-6 fw-normal">Last Location</div>
                        <div className="fs-5">{location.name}</div>
                    </div>
                </div>
            </div>
            </div>
        );
      });
      }
    else{
      display = "Nenhum personagem encontrado :/";
    }

    return <>{display}</>;
  }

  export default Card;

A função Card epera dois parametros "page" e "results". Ela mapeia o results e extrai as propriedades que vamos utilizar como id, image, name, etc. No "return" colocamos o html que queremos renderizar. Note algumas particularidades aqui, como ao invés de usar "class" no ReactJS usamos "className" para atribuir uma classe de css.
E para usar uma classe do arquivo scss, fazemos o que chamamos de interpolação e atribuimos com o "styles" na frente da classe, ou seja se quiser usar a classe "card" numa div tem que colocar algo similar a isso:

<div className={`${styles.card}`} >conteudo da div</div>

.

Agora preparar o nosso App.js e adicionar o código abaixo para importar o card:
import Card from "./components/Card/Card";

e dentro da "function App()" vamos fazer uso dos hooks useState e useEffect, adicione o seguinte código:

  let [fetchedData, updateFetchedData] = useState([]);
  let { info, results } = fetchedData;

  let api = `https://rickandmortyapi.com/api/character/?page=1`;
  useEffect(() => {
    (async function () {
      let data = await fetch(api).then((res) => res.json());
      updateFetchedData(data);
    })();
  }, [api]);

  return (
    <div className="App">
    <h1 className="text-center mb-3">Personagens</h1>
    <div className="container">
    <div className="row">
      Filtro aparecerá aqui
      <div className="col-lg-8 col-12">

            <div className="row">
              <Card page="/" results={results} />
            </div>

      </div>
    </div>
    </div>
  </div>
  );

Aqui foi feito uma chamada para api e agora já vamos ver o resultado preenchendo nossos cards.

O Arquivo App.js completo deverá estar assim:

import 'bootstrap/dist/css/bootstrap.min.css';
import "bootstrap/dist/js/bootstrap";
import React, { useState, useEffect } from "react";
import Card from "./components/Card/Card";

function App() {
  let [fetchedData, updateFetchedData] = useState([]);
  let { info, results } = fetchedData;

  let api = `https://rickandmortyapi.com/api/character/?page=1`;
  useEffect(() => {
    (async function () {
      let data = await fetch(api).then((res) => res.json());
      updateFetchedData(data);
    })();
  }, [api]);

  return (
    <div className="App">
    <h1 className="text-center mb-3">Personagens</h1>
    <div className="container">
    <div className="row">
      Filtro aparecerá aqui
      <div className="col-lg-8 col-12">       
            <div className="row">
              <Card page="/" results={results} />
            </div>         
      </div>
    </div>
    </div>
  </div>
  );
}

export default App;

O resultado deverá ser igual a esse:

Agora vamos acrescentar o indicador de status do personagem em nosso card, para isso coloque o seguinte código no retorno da função Card no arquivo Card.js:

 {(() => {
            if (status === "Dead") {
              return (
                <div
                  className={`${styles.badge} position-absolute badge bg-danger`}
                >
                  {status}
                </div>
              );
            } else if (status === "Alive") {
              return (
                <div
                  className={`${styles.badge} position-absolute badge bg-success`}
                >
                  {status}
                </div>
              );
            } else {
              return (
                <div
                  className={`${styles.badge} position-absolute badge bg-secondary`}
                >
                  {status}
                </div>
              );
            }
          })()}

O código acima verifica o status e adiciona um "badge" da cor do status para cada card.
O Arquivo Card.js completo ficará assim:

import React from "react";
import styles from "./Card.module.scss";


const Card = ({ page, results }) => {

    let display;

    if (results) {
        display = results.map((x) => {
        let { id, image, name, status, location } = x;

          return (
            <div
            key={id}
            className="col-lg-4 col-md-6 col-sm-6 col-12 mb-4 position-relative text-dark"
          >
            <div className={`${styles.card} d-flex flex-column justify-content-center`}>
                <img className={`${styles.img} img-fluid`} src={image} alt="" />
                <div className={`${styles.content}`}>
                    <div className="fs-5 fw-bold mb-4">{name}</div>
                    <div className="">
                        <div className="fs-6 fw-normal">Last Location</div>
                        <div className="fs-5">{location.name}</div>
                    </div>
                </div>
            </div>

            {(() => {
            if (status === "Dead") {
              return (
                <div
                  className={`${styles.badge} position-absolute badge bg-danger`}
                >
                  {status}
                </div>
              );
            } else if (status === "Alive") {
              return (
                <div
                  className={`${styles.badge} position-absolute badge bg-success`}
                >
                  {status}
                </div>
              );
            } else {
              return (
                <div
                  className={`${styles.badge} position-absolute badge bg-secondary`}
                >
                  {status}
                </div>
              );
            }
          })()}

            </div>
        );
      });
      }
    else{
      display = "Nenhum personagem encontrado :/";
    }

    return <>{display}</>;
  }

  export default Card;

O resultado dessa alteração será esse:

» Search

O próximo passo será a criação do componente Search para pesquisar o card pelo termo digitado conforme a figura abaixo:

Primeiramente vamos criar 2 hooks do tipo useState para nos auxiliar na pesquisa.

Dentro de App.js crie os hooks conforme o código abaixo:
let [pageNumber, updatePageNumber] = useState(1);
let [search, setSearch] = useState("");

Vamos precisar modificar a url da api (no arquivo App.js) para receber os parâmetros que iremos informar de agora em diante.

troque isso:

 let api = `https://rickandmortyapi.com/api/character/?page=1`;

por isso:

let api = `https://rickandmortyapi.com/api/character/?page=${pageNumber}&name=${search}`;

Dentro da pasta Sidebar, crie dois arquivos, um Sidebar.js e um arquivo Search.module.scss e coloque o código abaixo neste ultimo:

.input {
  width: 40%; border-radius: 8px;
  border: 2px solid #0b5ed7;
  box-shadow: 1px 3px 9px rgba($color: #000000, $alpha: 0.25);
  padding: 10px 15px;
  &:focus { outline: none; }
}
.btn {
  box-shadow: 1px 3px 9px rgba($color: #000000, $alpha: 0.25);
}
@media (max-width: 576px) {
  .input { width: 80%; }
}
```


Esse css estilizará nossa barra e botão de pesquisa.

Agora vamos colocar o código do **Search.js** conforme abaixo:


```
import React from "react";
import styles from "./Search.module.scss";

const Search = ({ setSearch, updatePageNumber }) => {
  let searchBtn = (e) => {
    e.preventDefault();
  };
  return (
    <form
      className={`${styles.search} d-flex flex-sm-row flex-column align-items-center justify-content-center gap-4 mb-5`}
    >
      <input
        onChange={(e) => {
          updatePageNumber(1);
          setSearch(e.target.value);
        }}
        placeholder="Pesquisar por personagens..."
        className={styles.input}
        type="text"
      />
      <button
        onClick={searchBtn}
        className={`${styles.btn} btn btn-primary fs-5`}
      >
        Search
      </button>
    </form>
  );
};

export default Search;

```


O código acima faz com que o clique do botão como o digitar do campo texto, efetuem uma pesquisa.

Agora vamos importar o componente Search dentro do nosso **App.js**. Insira a linha de código logo abaixo da importação do Card:
` import Search from "./components/Search/Search"; `

Ainda no **App.js** colocamos o trecho de código a seguir logo abaixo o **H1** com o titulo da página: 
` <Search setSearch={setSearch} updatePageNumber={updatePageNumber} />`


Alterações feitas! Agora podemos testar, apenas digitando na barra de pesquisa já veremos o resultado acontecer.

![fig5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y94ftpk2zpzblwblwxuh.PNG)

__________________________________________________________________

![fig6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36zwyzw4uws3vkaeyqs8.PNG)
__________________________________________________________________

##&nbsp;
##&nbsp;
##&raquo; Pagination
##&nbsp;

Paginação! Chegou a hora de paginar a _p@rr#!_ toda! 
E pra fazer isso vamos usar um componente chamado **react-paginate**. 
Toda documentação e mais informações podem ser encontrada neste link [https://www.npmjs.com/package/react-paginate](https://www.npmjs.com/package/react-paginate). O intuito deste artigo não é aprofundar neste componente e sim mostrar sua implementação na prática.   

Então vamos lá!

Dentro da pasta **__Pagination__**, crie um arquivo **Pagination.js**. Nele vamos colocar o seguinte código para fazer nossa paginação:



```
import React, { useState, useEffect } from "react";
import ReactPaginate from "react-paginate";

const Pagination = ({ pageNumber, info, updatePageNumber }) => {
  let pageChange = (data) => {
    updatePageNumber(data.selected + 1);
  };

  const [width, setWidth] = useState(window.innerWidth);
  const updateDimensions = () => {
    setWidth(window.innerWidth);
  };
  useEffect(() => {
    window.addEventListener("resize", updateDimensions);
    return () => window.removeEventListener("resize", updateDimensions);
  }, []);

  return (
    <>
      <style jsx>
        {`
          @media (max-width: 768px) {
            .pagination {
              font-size: 12px;
            }
            .next,
            .prev {
              display: none;
            }
          }
          @media (max-width: 768px) {
            .pagination {
              font-size: 14px;
            }
          }
        `}
      </style>
      <ReactPaginate
        className="pagination justify-content-center my-4 gap-4"
        nextLabel="Next"
        forcePage={pageNumber === 1 ? 0 : pageNumber - 1}
        previousLabel="Prev"
        previousClassName="btn btn-primary fs-5 prev"
        nextClassName="btn btn-primary fs-5 next"
        activeClassName="active"
        marginPagesDisplayed={width < 576 ? 1 : 2}
        pageRangeDisplayed={width < 576 ? 1 : 2}
        pageCount={info?.pages}
        onPageChange={pageChange}
        pageClassName="page-item"
        pageLinkClassName="page-link"
      />
    </>
  );
};

export default Pagination;

```


No código acima temos uma função que recebe os parâmetros "pageNumber", "info" e "updatePageNumber" e atualiza os dados de acordo com a pagina informada. O ReactPaginate tem algumas propriedades que podem ser conferidas na documentação no site do componente.

No **App.js** colocamos bem próximo ao fechamento da ultima div o seguinte trecho de código:

`<Pagination info={info} pageNumber={pageNumber} updatePageNumber={updatePageNumber}/>`

A essa altura o seu arquivo **App.js** deve estar assim:



```
import 'bootstrap/dist/css/bootstrap.min.css';
import "bootstrap/dist/js/bootstrap";
import React, { useState, useEffect } from "react";
import Card from "./components/Card/Card";
import Search from "./components/Search/Search"
import Pagination from "./components/Pagination/Pagination"

function App() {

  let [fetchedData, updateFetchedData] = useState([]);
  let { info, results } = fetchedData;
  let [pageNumber, updatePageNumber] = useState(1);
  let [search, setSearch] = useState("");

  let api = `https://rickandmortyapi.com/api/character/?page=${pageNumber}&name=${search}`;
  useEffect(() => {
    (async function () {
      let data = await fetch(api).then((res) => res.json());
      updateFetchedData(data);
    })();
  }, [api]);

  return (
    <div className="App">
    <h1 className="text-center mb-3">Personagens</h1>

    <Search setSearch={setSearch} updatePageNumber={updatePageNumber} />

    <div className="container">
    <div className="row">
      Filtro aparecerá aqui
      <div className="col-lg-8 col-12">       
            <div className="row">
              <Card page="/" results={results} />
            </div>         
      </div>
    </div>
    </div>

    <Pagination
        info={info}
        pageNumber={pageNumber}
        updatePageNumber={updatePageNumber}
      />
  </div>
  );
}

export default App;


```



E o resultado tem que estar parecido com a figura abaixo:


![fig7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u22s0sh6qb1bjbgfb9n6.gif)







##&nbsp;






Continua... 

[Parte 2](https://dev.to/dooramos/react-js-construindo-uma-wiki-de-personagens-ricky-e-morty-parte-2-51dm)

React JS - Construindo uma wiki de personagens Ricky e Morty - parte 2

Eduardo Ramos — Wed, 27 Jul 2022 12:29:00 +0000

» Filter

Bora lá colocar filtros...

Primeiramente vamos criar uma estrutura de pasta e arquivos.
Dentro da pasta Filter teremos os arquivos: Filter.js e FilterBTN.js. Teremos também uma pasta category e dentro dela os arquivos: Gender.js, Species.js e Status.js

No arquivo App.js vamos criar mais alguns hooks para armazenar os filtros. Também vamos precisar mudar a url da api novamente, para receber os novos parâmetros.

Adicione na função App() esse código abaixo:

let [status, updateStatus] = useState("");
let [gender, updateGender] = useState("");
let [species, updateSpecies] = useState("");

e altere a api para:

 let api = `https://rickandmortyapi.com/api/character/?page=${pageNumber}&name=${search}&status=${status}&gender=${gender}&species=${species}`;

Feito isso, substitua o "Filtro aparecerá aqui" por:

<Filter
  pageNumber={pageNumber}
  status={status}
  updateStatus={updateStatus}
  updateGender={updateGender}
  updateSpecies={updateSpecies}
  updatePageNumber={updatePageNumber}
/>

No arquivo Filter.js vamos importar as categorias criadas:

import React from "react";
import Gender from "./category/Gender";
import Species from "./category/Species";
import Status from "./category/Status";

Antes que eu me esqueça vou colocar o código de cada arquivo das categorias aqui, começando pelo Gender.js:

import React from "react";
import FilterBTN from "../FilterBTN";

const Gender = ({ updateGender, updatePageNumber }) => {
  let genders = ["female", "male", "genderless", "unknown"];
  return (
    <div className="accordion-item">
      <h2 className="accordion-header" id="headingThree">
        <button
          className="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#collapseThree"
          aria-expanded="false"
          aria-controls="collapseThree"
        >
          Gender
        </button>
      </h2>
      <div
        id="collapseThree"
        className="accordion-collapse collapse"
        aria-labelledby="headingThree"
        data-bs-parent="#accordionExample"
      >
        <div className="accordion-body d-flex flex-wrap gap-3">
          {genders.map((items, index) => {
            return (
              <FilterBTN
                name="gender"
                index={index}
                key={index}
                updatePageNumber={updatePageNumber}
                task={updateGender}
                input={items}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Gender;

Agora o Species.js:

import React from "react";
import FilterBTN from "../FilterBTN";

const Species = ({ updateSpecies, updatePageNumber }) => {
  let species = [
    "Human",
    "Alien",
    "Humanoid",
    "Poopybutthole",
    "Mythological",
    "Unknown",
    "Animal",
    "Disease",
    "Robot",
    "Cronenberg",
    "Planet",
  ];
  return (
    <div className="accordion-item ">
      <h2 className="accordion-header" id="headingTwo">
        <button
          className="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#collapseTwo"
          aria-expanded="false"
          aria-controls="collapseTwo"
        >
          Species
        </button>
      </h2>
      <div
        id="collapseTwo"
        className="accordion-collapse collapse"
        aria-labelledby="headingTwo"
        data-bs-parent="#accordionExample"
      >
        <div className="accordion-body d-flex flex-wrap gap-3">
          {species.map((item, index) => {
            return (
              <FilterBTN
                name="species"
                index={index}
                key={index}
                updatePageNumber={updatePageNumber}
                task={updateSpecies}
                input={item}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Species;

E por ultimo o Status.js

import React from "react";
import FilterBTN from "../FilterBTN";

const Status = ({ updateStatus, updatePageNumber }) => {
  let status = ["Alive", "Dead", "Unknown"];
  return (
    <div className="accordion-item">
      <h2 className="accordion-header" id="headingOne">
        <button
          className="accordion-button"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#collapseOne"
          aria-expanded="true"
          aria-controls="collapseOne"
        >
          Status
        </button>
      </h2>
      <div
        id="collapseOne"
        className="accordion-collapse collapse show"
        aria-labelledby="headingOne"
        data-bs-parent="#accordionExample"
      >
        <div className="accordion-body d-flex flex-wrap gap-3">
          {status.map((item, index) => (
            <FilterBTN
              key={index}
              index={index}
              name="status"
              task={updateStatus}
              updatePageNumber={updatePageNumber}
              input={item}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default Status;

```



Vamos deixar o arquivo **FilterBTN.js** pronto também com o seguinte código:



```
import React from "react";

const FilterBTN = ({ input, task, updatePageNumber, index, name }) => {
  return (
    <div>
      <style jsx>
        {`
          .x:checked + label {
            background-color: #0b5ed7;
            color: white;
          }
          input[type="radio"] {
            display: none;
          }
        `}
      </style>

      <div className="form-check">
        <input
          className="form-check-input x"
          type="radio"
          name={name}
          id={`${name}-${index}`}
        />
        <label
          onClick={(x) => {
            task(input);
            updatePageNumber(1);
          }}
          className="btn btn-outline-primary"
          for={`${name}-${index}`}
        >
          {input}
        </label>
      </div>
    </div>
  );
};

export default FilterBTN;

```



Voltando ao arquivo **Filter.js** que até esse ponto possui apenas 4 linhas de código. Vamos deixá-lo assim:



```
import React from "react";
import Gender from "./category/Gender";
import Species from "./category/Species";
import Status from "./category/Status";

const Filter = ({
  pageNumber,
  updatePageNumber,
  updateStatus,
  updateGender,
  updateSpecies,
}) => {
  let clear = () => {
    updateStatus("");
    updateGender("");
    updateSpecies("");
    updatePageNumber(1);
    window.location.reload(false);
  };
  return (
    <div className="col-lg-3 col-12 mb-5">
      <div className="text-center fw-bold fs-4 mb-2">Filtros</div>
      <div
        style={{ cursor: "pointer" }}
        onClick={clear}
        className="text-primary text-decoration-underline text-center mb-3"
      >
        Limpar Filtros
      </div>
      <div className="accordion" id="accordionExample">
        <Status
          updatePageNumber={updatePageNumber}
          updateStatus={updateStatus}
        />
        <Species
          updatePageNumber={updatePageNumber}
          updateSpecies={updateSpecies}
        />
        <Gender
          updatePageNumber={updatePageNumber}
          updateGender={updateGender}
        />
      </div>
    </div>
  );
};

export default Filter;

```



Pra finalizar e testar os filtros o **App.js** tem que estar assim:

import 'bootstrap/dist/css/bootstrap.min.css';
import "bootstrap/dist/js/bootstrap";
import React, { useState, useEffect } from "react";
import Search from "./components/Search/Search";
import Card from "./components/Card/Card";
import Pagination from "./components/Pagination/Pagination";
import Filter from "./components/Filter/Filter";

function App() {

let [pageNumber, updatePageNumber] = useState(1);
let [status, updateStatus] = useState("");
let [gender, updateGender] = useState("");
let [species, updateSpecies] = useState("");
let [fetchedData, updateFetchedData] = useState([]);
let [search, setSearch] = useState("");
let { info, results } = fetchedData;

return (

Personagens

<Search setSearch={setSearch} updatePageNumber={updatePageNumber} />

<div className="container">
<div className="row">
<Filter
        pageNumber={pageNumber}
        status={status}
        updateStatus={updateStatus}
        updateGender={updateGender}
        updateSpecies={updateSpecies}
        updatePageNumber={updatePageNumber}
      />
  <div className="col-lg-8 col-12">       
        <div className="row">
          <Card page="/" results={results} />
        </div>         
  </div>
</div>
</div>

<Pagination
    info={info}
    pageNumber={pageNumber}
    updatePageNumber={updatePageNumber}
  />

);
}

export default App;




Agora vamos criar o componente com o menu de navegação.

##&nbsp;
##&nbsp;
##&raquo; Navigation
##&nbsp;

![fig8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s76g5e5lgp7wk0xipsfj.png)


Dentro da pasta **_src_**, crie uma pasta **_Pages_** e dentro dela crie 2 arquivos **Episodes.js** e **Location.js**.

Agora vá para o arquivo **App.js** e importe esses arquivos que acabamos de criar:

import Episodes from "./Pages/Episodes";
import Location from "./Pages/Location";



Vamos adicionar o react-router-dom e importar alguns componentes:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";




Agora vamos criar uma função auxiliar dentro do **App.js** mesmo:

const Home = () => {
// Código aqui
}




Dentro da função **App** vamos criar um **Router** e um **Navbar** igual o código abaixo:

function App() {
return (

);
}



Agora definimos nossas rotas. Cada rota requer o caminho (path) e o componente (element):

} />
} />
} />




Feito isso, vamos criar o código da nossa **Navbar.js**.
Dentro do pasta **_Navbar_** crie um arquivo chamado **Navbar.js** e coloque o código abaixo:

import React from "react";
import { NavLink, Link } from "react-router-dom";
import "../../App.scss";

export default Navbar;




Vamos criar mais páginas para testar a navegação. Porém antes de criarmos as próximas páginas, vamos criar um componente para auxiliar no filtro, que será incluído nelas. 
Esse componente terá o papel similar aos filtros de categoria, logo vamos criá-lo dentro da pasta **_category_** que está dentro da pasta **_Filter_**. Crie um arquivo chamado **InputGroup.js**

Coloque o código abaixo:

import React from "react";

const InputGroup = ({ name, changeID, total }) => {
return (

onChange={(e) => changeID(e.target.value)}
className="form-select"
id={name}
>
Escolha...
{[...Array(total).keys()].map((x, index) => {
return (

{name} - {x + 1}

);
})}

);
};

export default InputGroup;




Dentro de **Episode.js** que está na pasta **_Pages_**, coloque o código abaixo:

import React, { useEffect, useState } from "react";
import Card from "../components/Card/Card";
import InputGroup from "../components/Filter/category/InputGroup";

const Episodes = () => {
let [results, setResults] = React.useState([]);
let [info, setInfo] = useState([]);
let { air_date, episode, name } = info;
let [id, setID] = useState(1);

let api = https://rickandmortyapi.com/api/episode/${id};

useEffect(() => {
(async function () {
let data = await fetch(api).then((res) => res.json());
setInfo(data);

  let a = await Promise.all(
    data.characters.map((x) => {
      return fetch(x).then((res) => res.json());
    })
  );
  setResults(a);
})();

}, [api]);

return (

Episode name :{" "}
{name === "" ? "Unknown" : name}

Air Date: {air_date === "" ? "Unknown" : air_date}

Episódios

);
};

export default Episodes;



O que foi feito aqui é uma página com uma nova url para a api, onde o combo representado pelo componente **InputGroup** filtra o resultado.

No arquivo **Location.js** coloque este código:

import React, { useEffect, useState } from "react";
import Card from "../components/Card/Card";
import InputGroup from "../components/Filter/category/InputGroup";

const Location = () => {
let [results, setResults] = React.useState([]);
let [info, setInfo] = useState([]);
let { dimension, type, name } = info;
let [number, setNumber] = useState(1);

let api = https://rickandmortyapi.com/api/location/${number};

useEffect(() => {
(async function () {
let data = await fetch(api).then((res) => res.json());
setInfo(data);

  let a = await Promise.all(
    data.residents.map((x) => {
      return fetch(x).then((res) => res.json());
    })
  );
  setResults(a);
})();

}, [api]);

return (

Location :

{" "}
{name === "" ? "Unknown" : name}

Dimension: {dimension === "" ? "Unknown" : dimension}

Type: {type === "" ? "Unknown" : type}

Localização

);
};

export default Location;



Perceba que fizemos a mesma coisa aqui, trocando obviamente o _episodes_ por _location_ e alterando a url da api.


Agora vamos conferir mais uma vez o arquivo **App.js** que deve estar igual o código abaixo:

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap";
import React, { useState, useEffect } from "react";

import Search from "./components/Search/Search";
import Card from "./components/Card/Card";
import Pagination from "./components/Pagination/Pagination";
import Filter from "./components/Filter/Filter";
import Navbar from "./components/Navbar/Navbar";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Episodes from "./Pages/Episodes";
import Location from "./Pages/Location";

function App() {
return (

} />

    <Route path="/episodes" element={<Episodes />} />


    <Route path="/location" element={<Location />} />

  </Routes>
</Router>

);
}
const Home = () => {
let [pageNumber, updatePageNumber] = useState(1);
let [status, updateStatus] = useState("");
let [gender, updateGender] = useState("");
let [species, updateSpecies] = useState("");
let [fetchedData, updateFetchedData] = useState([]);
let [search, setSearch] = useState("");
let { info, results } = fetchedData;

let api = https://rickandmortyapi.com/api/character/?page=${pageNumber}&name=${search}&status=${status}&gender=${gender}&species=${species};

useEffect(() => {
(async function () {
let data = await fetch(api).then((res) => res.json());
updateFetchedData(data);
})();
}, [api]);
return (

Personagens

pageNumber={pageNumber}
status={status}
updateStatus={updateStatus}
updateGender={updateGender}
updateSpecies={updateSpecies}
updatePageNumber={updatePageNumber}
/>

info={info}
pageNumber={pageNumber}
updatePageNumber={updatePageNumber}
/>

);
};

export default App;




Sua aplicação  deve estar similar a isso:
![fig9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9is0rldza8zerq0rgx1e.png)

_______________

![fig10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ft15j9u24jx4dd41bn0l.png)

___________________ 

![fig11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0rogy3ijdpln4zj59i0.png)

___________________

Antes de finalizar vamos criar uma página/componente para exibir detalhes do card que foi clicado.
Será uma página simples apenas com alguns detalhes a mais.
Futuramente iremos implementar uma modal, na evolução deste artigo, mas por ora optamos pela simplicidade de uma página comum.

Vá até a pasta **_Card_** e crie um arquivo chamado **CardDetails.js**.

Nele coloque o seguinte código:

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

const CardDetails = () => {
let { id } = useParams();

let [fetchedData, updateFetchedData] = useState([]);
let { name, location, origin, gender, image, status, species } = fetchedData;

let api = https://rickandmortyapi.com/api/character/${id};

useEffect(() => {
(async function () {
let data = await fetch(api).then((res) => res.json());
updateFetchedData(data);
})();
}, [api]);

return (

{name}

    <img className="img-fluid" src={image} alt="" />
    {(() => {
      if (status === "Dead") {
        return <div className="badge bg-danger fs-5">{status}</div>;
      } else if (status === "Alive") {
        return <div className=" badge bg-success fs-5">{status}</div>;
      } else {
        return <div className="badge bg-secondary fs-5">{status}</div>;
      }
    })()}
    <div className="content">
      <div className="">
        <span className="fw-bold">Gender : </span>
        {gender}
      </div>
      <div className="">
        <span className="fw-bold">Location: </span>
        {location?.name}
      </div>
      <div className="">
        <span className="fw-bold">Origin: </span>
        {origin?.name}
      </div>
      <div className="">
        <span className="fw-bold">Species: </span>
        {species}
      </div>
    </div>
  </div>
</div>

);
};

export default CardDetails;



Aqui estamos criando um card, a partir de um id que foi selecionado previamente no momento do click.
A api retorna alguns dados de acordo com o id que foi informado para ela. Dessa forma conseguimos ter nossa página de detalhes funcionando.

Vamos finalizar ajustando o arquivo **App.js** para redirecionar corretamente para a rota de detalhes. Para isso inclua mais algumas rotas:
`<Route path="/:id" element={<CardDetails />} />`
`<Route path="/episodes/:id" element={<CardDetails />} />`
`<Route path="/location/:id" element={<CardDetails />} />` 

Dentro do arquivo **Card.js** vamos colocar um elemento Link para encapsular a div e tornar o card "clicável". Para facilitar vou deixar aqui o código atualizado do **Card.js**:

import React from "react";
import { Link } from "react-router-dom";
import styles from "./Card.module.scss";

const Card = ({ page, results }) => {
let display;

if (results) {
display = results.map((x) => {
let { id, image, name, status, location } = x;

  return (
    <Link
      style={{ textDecoration: "none" }}
      to={`${page}${id}`}
      key={id}
      className="col-lg-4 col-md-6 col-sm-6 col-12 mb-4 position-relative text-dark"
    >
      <div
        className={`${styles.card} d-flex flex-column justify-content-center`}
      >
        <img className={`${styles.img} img-fluid`} src={image} alt="" />
        <div className={`${styles.content}`}>
          <div className="fs-5 fw-bold mb-4">{name}</div>
          <div className="">
            <div className="fs-6 fw-normal">Last Location</div>
            <div className="fs-5">{location.name}</div>
          </div>
        </div>
      </div>

      {(() => {
        if (status === "Dead") {
          return (
            <div
              className={`${styles.badge} position-absolute badge bg-danger`}
            >
              {status}
            </div>
          );
        } else if (status === "Alive") {
          return (
            <div
              className={`${styles.badge} position-absolute badge bg-success`}
            >
              {status}
            </div>
          );
        } else {
          return (
            <div
              className={`${styles.badge} position-absolute badge bg-secondary`}
            >
              {status}
            </div>
          );
        }
      })()}
    </Link>
  );
});

} else {
display = "Nenhum personagem encontrado :/";
}

return <>{display}</>;
};

export default Card;




Importe o componente **CardDetails.js** dentro do **App.js**:
`import CardDetails from "./components/Card/CardDetails";`

E pra não ter erro o seu arquivo **App.js** deverá ficar assim:

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap";
import React, { useState, useEffect } from "react";

import Search from "./components/Search/Search";
import Card from "./components/Card/Card";
import CardDetails from "./components/Card/CardDetails";
import Pagination from "./components/Pagination/Pagination";
import Filter from "./components/Filter/Filter";
import Navbar from "./components/Navbar/Navbar";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Episodes from "./Pages/Episodes";
import Location from "./Pages/Location";

let api = https://rickandmortyapi.com/api/character/?page=${pageNumber}&name=${search}&status=${status}&gender=${gender}&species=${species};

useEffect(() => {
(async function () {
let data = await fetch(api).then((res) => res.json());
updateFetchedData(data);
})();
}, [api]);
return (

Personagens

export default App;




O resultado final ao clicar no card deverá ser igual a figura abaixo: 

![fig13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzvijrb2eulump05cpak.png)


_____________________

Esse foi um post para mostrar o básico de **React**. 
Resolvi fazer esse post, pois acompanhei algumas postagens e tutoriais que "ensinavam" a implementar o consumo dessa mesma api inclusive, porém sempre me senti perdido quanto a didática da postagem, pois não ficava claro onde colocar arquivos ou trecho de códigos. Pra quem está iniciando é bem complicado quando não se consegue acompanhar ou reproduzir o artigo ou tutorial. Tentei ser o mais claro e objetivo.
Em breve escreverei outros artigos incluindo **Typescript**, **Context** e outros conceitos. Espero que gostem e principalmente consigam entender e implementar. 






##&nbsp;
_____________________

_____________________[Clique aqui para ver o resultado final](https://wiki-rick-morty-react.vercel.app/)_____________________

_____________________
##&nbsp;
A primeira parte do artigo está aqui: 

[Parte 1](https://dev.to/dooramos/react-js-construindo-uma-wiki-de-personagens-ricky-e-morty-parte-1-4g9b)

Forem: Eduardo Ramos

React JS - Construindo uma wiki de personagens Ricky e Morty - parte 1

» Card

» Search

React JS - Construindo uma wiki de personagens Ricky e Morty - parte 2

» Filter

Personagens

Episode name :{" "} {name === "" ? "Unknown" : name}

Air Date: {air_date === "" ? "Unknown" : air_date}

Episódios

Location : {" "} {name === "" ? "Unknown" : name}

Dimension: {dimension === "" ? "Unknown" : dimension}

Type: {type === "" ? "Unknown" : type}

Localização

Personagens

{name}

Personagens

Episode name :{" "}
{name === "" ? "Unknown" : name}

Location :

{" "}
{name === "" ? "Unknown" : name}