React Basic Project Using Component
 |
| react beginner level projectAdd caption |
Code is given below👱
Pokecard.js
-------------
import React from 'react';
const POKE_API = 'https://assets.pokemon.com/assets/cms2/img/pokedex/detail/';
let padToThree = (number) => (number <= 999 ? `00${number}`.slice(-3) : number);
class Pokecard extends React.Component{
render(){
let imgSrc = `${POKE_API}${padToThree(this.props.id)}.png`;
return (
<div className="Pokecard">
<h2 className="CardTitle">{this.props.name}</h2>
<div className = "Pokecard-image">
<img src = {imgSrc} alt={this.props.name} />
</div>
<div>Type : {this.props.type}</div>
<div>Exp : {this.props.exp}</div>
</div>
)
}
};
export default Pokecard;
Pokedex.js
-------------
import React, { Component } from 'react';
import Pokecard from './Pokecard';
import './Pokedex.css'
class Pokedex extends Component{
static defaultProps = {
pokemon : [
{id: 4, name: 'Charmander',type: 'fire', base_exp:62},
{id: 7, name: 'Metapood',type: 'bug', base_exp:82},
{id: 25, name: 'Pikachu',type: 'electric', base_exp:100},
{id: 12, name: 'Butterfree',type: 'flying', base_exp:92},
{id: 11, name: 'Squirtle',type: 'water', base_exp:52},
{id: 39, name: 'Jigglypuff',type: 'normal', base_exp:115},
{id: 94, name: 'Gender',type: 'poison', base_exp:75},
{id: 133, name: 'Eevee',type: 'normal', base_exp:175},
]
}
render(){
let title;
if(this.props.isWinner){
title = <h2 className = "Pokedex-winner">Winning Hand</h2>
}else{
title = <h2 className = "Pokedex-loser">Losing Hand</h2>
}
return(
<div className = "Pokedex">
<p>{title}</p>
<h4>Total Experience : {this.props.exp}</h4>
<div className="Pokedex-cards">
{this.props.pokemon.map((p)=> (
<Pokecard id = {p.id} name = {p.name} type = {p.type} exp = {p.base_exp}/>
))}
</div>
</div>
)
}
}
export default Pokedex;
Pokegame.js
--------------
import React, { Component } from 'react';
import Pokedex from './Pokedex';
class Pokegame extends Component{
static defaultProps = {
pokemon : [
{id: 4, name: 'Charmander',type: 'fire', base_exp:62},
{id: 7, name: 'Metapood',type: 'bug', base_exp:82},
{id: 25, name: 'Pikachu',type: 'electric', base_exp:100},
{id: 12, name: 'Butterfree',type: 'flying', base_exp:92},
{id: 11, name: 'Squirtle',type: 'water', base_exp:52},
{id: 39, name: 'Jigglypuff',type: 'normal', base_exp:115},
{id: 94, name: 'Gender',type: 'poison', base_exp:75},
{id: 133, name: 'Eevee',type: 'normal', base_exp:175},
]
}
render(){
let hand1 = [];
let hand2 = [ ...this.props.pokemon ];
while(hand1.length < hand2.length){
let randIdx = Math.floor(Math.random() * hand2.length);
let randPokemon = hand2.splice(randIdx, 1)[0];
hand1.push(randPokemon);
}
let exp1 = hand1.reduce((exp, pokemon) => exp + pokemon.base_exp, 0)
let exp2 = hand2.reduce((exp, pokemon) => exp + pokemon.base_exp, 0)
return(
<div>
<Pokedex pokemon = {hand1} exp={exp1} isWinner = {exp1 > exp2}/>
<Pokedex pokemon = {hand2} exp={exp2} isWinner = {exp2 > exp1}/>
</div>
);
}
}
export default Pokegame;
App.js
-------
import React from 'react';
import Pokegame from './Pokegame';
import './pokecard.css'
import './App.css'
function App() {
return (
<div className="App">
<h1 className = "Main-title">Pokedex!</h1>
<Pokegame/>
</div>
);
}
export default App;
0 Comments