Criando Pokedéx com React – Parte 1

Olá pessoal, hoje criaremos uma pokedex usando React e utilizando o PokeAPI para obter os dados dos pokémon. Para isso, precisamos entender sobre o fetch. Caso você não conheça o assunto, sugiro a leitura deste artigo. Mãos à obra.

Instalando React App

No seu prompt de comando (CMD), coloque o seguinte comando:

npm install –g create-react-app

Isso instalará o react-app globalmente. Agora, precisamos criar a pasta do projeto. Utilize o comando:

create-react-app pokedex

E, criada a pasta do projeto, entraremos nela:

cd pokedex

Você encontrará uma pasta chamada src dentro do seu arquivo pokedex. Exclua o arquivo logo.svg, ele não será utilizado.

Dentro da pasta src, criaremos uma pasta chamada test e outra pasta chamada components. Dentro da pasta components, crie uma pasta chamada styles.

Mova o arquivo App.js para a pasta components, o arquivo App.css para a pasta style. Mova o arquivo App.test.js para a pasta test.

Vamos aos códigos:

Abrindo o arquivo App.js e reescreva o conteúdo com o código a seguir:

import React, { Component } from 'react';
import './styles/App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        Ola Mundo
      </div>
    );
  }
}

export default App;

Agora, abra o seu arquivo App.css e delete o seu conteúdo. Ele será reescrito posteriormente.

No arquivo index.css, reescreva o conteúdo com o código a seguir:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Avenir Next', sans-serif;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

Este arquivo contém todos os nossos estilos top-level. Removemos todas as margens das tags h1, h2, h3, h4 e p e também, queremos que os elementos tenham o tamanho do border-box.

No arquivo index.js, precisamos importar os componentes do React, ReactDOM e os componentes do nosso App.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

Esse arquivo diz para o DOM renderizar o componente App no elemento com o ID “root”. O nosso componente APP conterá todos os componentes, que serão construídos. Para iniciar a aplicação, inicie com o comando:

npm start

E isso iniciará a nossa aplicação no navegador, então, toda vez que criarmos alterações no projeto. Se acontecer algum erro, o navegador exibirá informações sobre o erro.

Gostou? Fique atento aos próximos artigos!

Referências: https://blog.cloudboost.io/lets-build-a-pokedex-with-react-part-1-e1ba0b9387a7