https://github.com/rasyidf/tutorial-pokedex
https://github.com/rasyidf/tutorial-pokedex
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rasyidf/tutorial-pokedex
- Owner: rasyidf
- Created: 2023-01-28T06:44:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-28T06:45:10.000Z (over 2 years ago)
- Last Synced: 2025-01-03T18:47:19.319Z (4 months ago)
- Language: TypeScript
- Size: 15.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Project Pokedex
1. create project
```bash
yarn create-vite
```
tulis nama project, pilih react -> pilih react + typescript
2. Hapus konten dalam div#app di App.tsx dan app.css.
3. Buat layout
- Header
- Search
- ItemList
4. Sesuaikan Style
5. Tambahkan array di atas
```ts
const Items = [
{nama: "A"},
{nama: "B"},
{nama: "C"},
]
```
6. Jabarkan Array menjadi Elemen
```ts
Items?.map((item, index) => {
return <>
{index}.
{item?.nama}
>
})
```
7. Buat State
const [pokeList, setPokeList] = useState>([]);
8. tambahkan API yang kamu udah ambil
```ts
const getPokemons = async () => {
const data = await axios.get("https://pokeapi.co/api/v2/pokemon", {
params: {
limit: 10, offset: 0
}
}).then((data) => data?.data).catch(() => []);
setPokeList(data.results ?? []);
};
useEffect(() => {
getPokemons();
}, []);
```
9. integrasikan ke Aplikasi
```ts
pokeList?.map(....);
```