This is the last part of the tutorial! In this part, we are going to manage State, and we will fetch data from the poke api. Finally, we will use the Pokemon data to populate the DetailView. To start at this point clone the branch “part5” of this repo.

Passing Events

We need to create a click event for each of our PokeCells to fetch the Pokemon data from the poke api. To do this first we are going to create the function as part of the App class, and then we will pass it as props to each of our PokeCells.


In Part 4 of this tutorial, we are going to setup the DetailView component. To start at this point clone the branch “part4” of this repo.

Detail View

Go to your components folder and create a DetailView.js file. Then go to your styles folder and create a DetailView.css file.

cd src/components/touch DetailView.js styles/DetailView.css

Open your DetailView.js and follow these steps:

  1. Import the React package
  2. Import the DetailView styles
  3. Create a new function named DetailView
  4. Return an empty section with className detail-view
  5. Add elements to display the data and image
  6. Export the newly created function
import React from 'react';
import './styles/DetailView.css';

const DetailView =…


In Part 3 of this tutorial, we are going to build our first stateless components. We are going to setup the PokeList component and render all the PokeCells with their sprites. To start at this point clone the branch “part3” of this repo.

PokeList

Go to your components folder and create a PokeList.js file. Then go to your styles folder and create a PokeList.css file.

cd src/components/touch PokeList.js styles/PokeList.css

Stateless components have a shorter setup. These type of components are just regular javaScript functions that return jsx. Since we don’t need the class keyword, we can avoid importing the Component…


In Part 2 of this tutorial, we are going to wireframe our app and start setting our main layout. To start at this point clone the branch “basic” of this repo.

WireFrame

React is all about building components so it is a good idea to make wireframes to map all of the components we need to build.

Our main app layout will contain 2 components: the Pokemon view, and the Detail view.

The Pokemon View will contain a scrollable PokeList component that wraps 151 buttons (PokeCell) of the first generation Pokemon. …


I love building web apps with React. However, learning how to use the library and getting used to the React thinking can be difficult. I believe that personal projects are the best way to learn new things, and thus started to build a Pokedex with React. I had a lot of fun building it so I decided to make this beginners workshop for developers interested in learning how to use React.

We are going to be using the PokeApi to get all our Pokemon data and sprites.

The workshop is divided into 5 parts.

Index

Part 1: we will set up…

Juan Diego Jimenez

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store