Document

├── .gitignore ├── client ├── src │ ├── components │ │ ├── App.js │ │ ├── PokemonList.js │ │ ├── PokemonListItem.js │ │ └── Search.js │ └── index.js └── dist │ ├── app.css │ └── index.html ├── lib └── getPokemon.js ├── server └── index.js ├── data └── fakePokemonData.js ├── webpack.config.js ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.lock 3 | bundle.js -------------------------------------------------------------------------------- /client/src/components/App.js: -------------------------------------------------------------------------------- 1 | //TODO 2 | /* 3 |

4 | Search goes here 5 | List goes here 6 |

7 | */ -------------------------------------------------------------------------------- /lib/getPokemon.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const getPokemon = (query, callback) => { 4 | //TODO 5 | } 6 | 7 | export default getPokemon; -------------------------------------------------------------------------------- /client/dist/app.css: -------------------------------------------------------------------------------- 1 | #pokemonList { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } 5 | 6 | .pokemonItem { 7 | border: 1px solid black; 8 | padding: 10px; 9 | margin: 5px; 10 | } -------------------------------------------------------------------------------- /client/src/components/PokemonList.js: -------------------------------------------------------------------------------- 1 | //TODO 2 | /* 3 |

10 | */ -------------------------------------------------------------------------------- /client/src/components/PokemonListItem.js: -------------------------------------------------------------------------------- 1 | //TODO 2 | /* 3 |

4 |

Name: Pokemon Name

5 |

Id: Pokemon Id

6 |

7 |

8 | */ -------------------------------------------------------------------------------- /client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | 5 | import pokemon from '../../data/fakePokemonData'; 6 | import getPokemon from '../../lib/getPokemon'; 7 | 8 | //TODO -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | 4 | const app = express(); 5 | const port = 3000; 6 | 7 | app.use(express.static(path.join(__dirname, '../client/dist'))); 8 | 9 | app.listen(port, () => console.log(`server is listening on port ${port}`)); -------------------------------------------------------------------------------- /client/src/components/Search.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Search extends Component { 4 | 5 | //

6 | // 10 | //

11 | 12 | } 13 | 14 | export default Search; -------------------------------------------------------------------------------- /client/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |

this should go away

12 | 13 | 14 | -------------------------------------------------------------------------------- /data/fakePokemonData.js: -------------------------------------------------------------------------------- 1 | const pokemon = [ 2 | { 3 | id: 12, 4 | name: 'butterfree', 5 | sprites: { 6 | front_default: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/12.png" 7 | } 8 | }, 9 | { 10 | id: 12, 11 | name: 'butterfree', 12 | sprites: { 13 | front_default: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/12.png" 14 | } 15 | }, 16 | { 17 | id: 12, 18 | name: 'butterfree', 19 | sprites: { 20 | front_default: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/12.png" 21 | } 22 | } 23 | ] 24 | 25 | export default pokemon; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | mode: 'development', 6 | entry: path.resolve(__dirname, './client/src/index.js'), 7 | output: { 8 | path: path.resolve(__dirname, './client/dist'), 9 | filename: 'bundle.js', 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js[x]?/, 15 | exclude: /node_modules/, 16 | use: { 17 | loader: 'babel-loader', 18 | options: { 19 | presets: ['@babel/preset-react', '@babel/preset-env'], 20 | plugins: ["@babel/plugin-proposal-class-properties"] 21 | } 22 | } 23 | }, 24 | { 25 | test: /\.(scss|css)$/, 26 | loaders: ['style-loader', 'css-loader'], 27 | } 28 | ], 29 | }, 30 | node: { 31 | fs: 'empty' 32 | }, 33 | resolve: { 34 | extensions: ['.js', '.jsx'] 35 | } 36 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactReviewWithPokemon", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack -w", 9 | "start": "open http://localhost:3000 && node server/index.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/omegak911/reactReviewWithPokemon.git" 14 | }, 15 | "keywords": [], 16 | "author": "", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/omegak911/reactReviewWithPokemon/issues" 20 | }, 21 | "homepage": "https://github.com/omegak911/reactReviewWithPokemon#readme", 22 | "dependencies": { 23 | "axios": "^0.18.0", 24 | "body-parser": "^1.18.3", 25 | "express": "^4.16.4", 26 | "react": "^16.8.6", 27 | "react-dom": "^16.8.6" 28 | }, 29 | "devDependencies": { 30 | "@babel/cli": "^7.4.3", 31 | "@babel/core": "^7.4.3", 32 | "@babel/plugin-proposal-class-properties": "^7.4.0", 33 | "@babel/preset-env": "^7.4.3", 34 | "@babel/preset-react": "^7.0.0", 35 | "babel-loader": "^8.0.5", 36 | "webpack": "^4.30.0", 37 | "webpack-cli": "^3.3.1" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # reactReviewWithPokemon 2 | 3 | [![Node version](https://img.shields.io/badge/node-v8.12.0-blue.svg)](http://nodejs.org/download/) 4 | [![NPM version](https://img.shields.io/badge/npm-6.4.1-blue.svg)](https://www.npmjs.com/get-npm/) 5 | 6 | Get additional practice with React by creating a front end application that renders data from pokemon api. This will require some knowledge on React 7 | 8 | ## Getting Started 9 | 10 | ### Clone 11 | ``` 12 | $ git clone https://github.com/omegak911/reactReviewWithPokemon.git 13 | $ cd reactReviewWithPokemon 14 | ``` 15 | 16 | ### Setup 17 | ``` 18 | $ npm install 19 | $ npm start 20 | $ npm run build 21 | ``` 22 | 23 | If you plan to redo this repo multiple times, make a new branch 24 | ``` 25 | $ git checkout -b attempt1 26 | ``` 27 | 28 | When you are ready to try again, repeat as necessary 29 | ``` 30 | $ git checkout master 31 | $ git checkout -b attempt2 32 | ``` 33 | 34 | ### Steps 35 | At each step, before moving on, answer the following question: What justifies my expectation that I completed the requirement? If you cannot justify this, then it means you haven't tested it yet. 36 | 37 | #### STEP 1: 38 | Connect your react app to the browser 39 | 40 | #### STEP 2: 41 | Render all the components + validate that they are all connected properly 42 | 43 | #### STEP 3: 44 | Pass mock pokemon data down to App as props + render said data 45 | * this will require you to set props to state, do not do this in the constructor 46 | * set props to your state once your component mounts 47 | 48 | #### STEP 4: 49 | Design Search.js such that a user can input data and on submit, run a function that console.log's what the user has submitted so far 50 | 51 | #### STEP 5: 52 | Using axios + https://pokeapi.co/, complete the lib/getPokemon.js function 53 | * hint: google "npm axios" to find out the syntax for a GET request 54 | 55 | #### STEP 6: 56 | Pass getPokemon function to App + configure the app so that when user submits, it will run getPokemon function instead of the console.log 57 | 58 | #### STEP 7: 59 | As needed, update getPokemon.js so that pokemon data received from the API will render on the page in addition to any existing pokemon data 60 | * remove the mock data 61 | 62 | ### Advanced 63 | Note: if you're not comfortable with STEPS 1-7, redo STEPS 1-7 instead 64 | 65 | #### STEP 8: 66 | Create a new feature 67 | 68 | #### STEP 9: 69 | Add css, you may use this as reference https://www.pokemon.com/us/pokedex/ 70 | 71 | #### STEP 10: 72 | On mount, render the original 151 pokemon, in the correct order 73 | 74 | #### STEP 11: 75 | PokemonListItem should only re-render if an applicable change has occurred. They should NOT all re-render on every unrelated change 76 | 77 | #### STEP 12: 78 | Refactor application to use Redux or Context API instead of passing props down manually 79 | 80 | ### Solutions 81 | Once you are done with steps 1-7, solution code is available on branch solution1 82 | ``` 83 | $ git checkout solution1 84 | ``` 85 | 86 | I've included some additional solution code and techniques on branch solution2. Probably don't look at this until you have the basics down and have completed some/all of the advanced content 87 | ``` 88 | $ git checkout solution2 89 | ``` 90 | 91 | ### Acknowledgments 92 | * https://pokeapi.co/ for their amazing API 93 | * https://www.pokemon.com/us/ --------------------------------------------------------------------------------