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.
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.
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:
import React from 'react';
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.
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
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.
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.
Part 1: we will set up…