Hello there! Welcome to the world of pokémon! My name is Bryan! People call me the pokémon Prof! This world is inhabited by creatures called pokémon! For some people, pokémon are pets. Others use them for fights. Myself...I study pokémon as a profession. I will be your guide on how to create your very own Pokedex so you start your own pokémon journey!
- git v2 or higher (https://git-scm.com/downloads)
- Node.js v10 or higher (https://nodejs.org/en/download/)
- npm v6 or higher (comes with Node.js)
If you think you have the above requirements you can verify if you have them by running:
git --version
node --version
npm --version
If no error pops up then you are good to go!
After getting the proper tools installed, you can setup your application with the following commands:
git clone https://github.com/wongband/react-pokedex-workshop.git
cd react-pokedex-workshop
npm i
This will likely take a few minutes to run. It will clone the repo, install all of the JavaScript dependencies needed to build our app.
We will be building a Pokedex in this workshop. To get started and verify that everything has been installed correctly, run:
npm start
The app should pop up in your default browser running at http://localhost:3000/. The app should be completely blank because we haven't built anything yet! But you can check out the app deployed online to see what the final state will look like.
Each step in the workshop builds on top of the previous one. If at any point you get stuck, you can find the answers in the source code of the current step. Any step can be used as a starting point to continue on to the remaining steps. Each step will be in a different branch.
- Setup/Intro -> Step 0
- JSX syntax and Ant design -> Step 1
- Styled Components -> Step 2
- Components -> Step 3
- API -> Step 4
- Integrating API data with components -> Step 5
- Conditionally rendering components -> Step 6
- Please interrupt me and ask questions! Others likely will have the same question.
- Using JSX syntax -> Step 1
- Using third party styling libraries -> Step 2
- Separating components to make readable, reusable and composable components -> Step 3
- Managing component state with
useState-> Step 4 - Making API calls with
useEffect-> Step 4 - Integrating API data with Components -> Step 5
- Conditionally rendering components -> Step 6
- Using Styled-Components -> Throughout every step
All attendees, speakers, sponsors and volunteers at this workshop are required to agree with the code of conduct. Organizers will enforce this code throughout the event. We expect cooperation from all participants to help ensure a safe environment for everybody.
Go to Step 0 - Begin