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