Node.js<\/a><\/strong><\/p>\n2. Now, check the version of the node in Windows by following the command on the terminal:<\/p>\n
node --version or node -V<\/pre>\nAlso, check the npm version using the following command as it is a tool to download the react<\/p>\n
npm --version<\/pre>\n3. Now, create one folder on the desktop as react, open the terminal inside the react app, and go to the react folder using the following command as `cd react` and run the command:<\/p>\n
npm init react-app myapp<\/pre>\n4. pokemonapp is created, go inside the pokemonapp folder using the command `cd pokemonapp` and then npm start and boom react will run the browser.<\/p>\n
Your app react has been successfully installed, so let\u2019s move towards project building.<\/p>\n
Steps to Create a React Pokemon App Using PokeAPI<\/h3>\n
1. Create a dashboard folder inside src in which index.jsx should be created.<\/strong><\/p>\nImport the libraries<\/p>\n
import React, { useEffect, useState } from 'react';\r\nimport \"..\/App.css\"<\/pre>\nDefine an asynchronous function ‘fetchPokemons’ to fetch data from the PokeAPI<\/p>\n
const fetchPokemons = async () => {\r\n try {<\/pre>\nFetch data from the PokeAPI using ‘fetch’ and store the response in ‘response<\/p>\n
const response = await fetch('https:\/\/pokeapi.co\/api\/v2\/pokemon?limit=151');\r\n<\/pre>\nConvert the response to JSON format and store it in the ‘data’ variable<\/p>\n
const data = await response.json();<\/pre>\nUpdate the ‘pokemons’ state with the ‘results’ array from the received data<\/p>\n
setPokemons(data.results);\r\n } catch (error) {<\/pre>\nIf an error occurs during the fetch, log the error message to the console<\/p>\n
console.error('Failed to fetch Pokemons:', error);\r\n\r\n \r\n}\r\n };<\/pre>\nUse the ‘useEffect’ hook to execute the ‘fetchPokemons’ function once when the component mounts<\/p>\n
The empty dependency array ensures that ‘fetchPokemons’ is only called once<\/p>\n
useEffect(() => {\r\n fetchPokemons();\r\n }, []);<\/pre>\nReturn JSX to render the component<\/p>\n
return (\r\n <div>\r\n <center><h1>Pokemon App by TechVidvan<\/h1><\/center><\/pre>\nRender a container to display the fetched Pokemon data<\/p>\n
<div className=\"pokemon-container\"><\/pre>\nMap through the ‘pokemons’ array to display each Pokemon<\/p>\n
{pokemons.map((pokemon, index) => (\r\n <div key={index} className=\"pokemon-card\">\r\n <div className=\"pokemon-image\"><\/pre>\nDisplay the Pokemon image using its index<\/p>\n
<img src={`https:\/\/raw.githubusercontent.com\/PokeAPI\/sprites\/master\/sprites\/pokemon\/${index + 1}.png`}\r\n alt={pokemon.name}\r\n \/>\r\n <\/div><\/pre>\nDisplay the Pokemon name<\/p>\n
<div className=\"pokemon-name\">{pokemon.name}<\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n};<\/pre>\nExport the PokemonList component as the default export<\/p>\n
export default PokemonList;<\/pre>\n2. App.js(main file to render the page created in first point)<\/strong><\/p>\nimport PokemonList from \".\/dashboard\";\r\n\r\n\r\n\r\nfunction App() {\r\n return (\r\n <div className=\"App\">\r\n <PokemonList \/>\r\n <\/div>\r\n );\r\n}\r\n\r\nexport default App;<\/pre>\nHere is the complete that we have explained above with css for the visually appealing website.<\/p>\n
index.jsx<\/strong><\/p>\nimport React, { useEffect, useState } from 'react';\r\nimport \"..\/App.css\"\r\nconst PokemonList = () => {\r\n const [pokemons, setPokemons] = useState([]);\r\n\r\n const fetchPokemons = async () => {\r\n try {\r\n const response = await fetch('https:\/\/pokeapi.co\/api\/v2\/pokemon?limit=151');\r\n const data = await response.json();\r\n setPokemons(data.results);\r\n } catch (error) {\r\n console.error('Failed to fetch Pokemons:', error);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n fetchPokemons();\r\n }, []);\r\n\r\n return (\r\n <div>\r\n <center><h1>Pokemon App by TechVidvan<\/h1><\/center>\r\n <div className=\"pokemon-container\">\r\n {pokemons.map((pokemon, index) => (\r\n <div key={index} className=\"pokemon-card\">\r\n <div className=\"pokemon-image\">\r\n <img\r\n src={`https:\/\/raw.githubusercontent.com\/PokeAPI\/sprites\/master\/sprites\/pokemon\/${index + 1}.png`}\r\n alt={pokemon.name}\r\n \/>\r\n <\/div>\r\n <div className=\"pokemon-name\">{pokemon.name}<\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n};\r\n\r\nexport default PokemonList;<\/pre>\nApp.js<\/strong><\/p>\nimport PokemonList from \".\/dashboard\";\r\n\r\n\r\n\r\nfunction App() {\r\n return (\r\n <div className=\"App\">\r\n <PokemonList \/>\r\n <\/div>\r\n );\r\n}\r\n\r\nexport default App;<\/pre>\nApp.css<\/strong><\/p>\n.pokemon-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n}\r\n\r\n.pokemon-card {\r\n border: 1px solid #ccc;\r\n border-radius: 8px;\r\n padding: 10px;\r\n margin: 10px;\r\n text-align: center;\r\n width: 150px;\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.pokemon-image img {\r\n width: 100px;\r\n height: 100px;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.pokemon-name {\r\n font-weight: bold;\r\n}<\/pre>\nReact Pokemon App Output<\/h3>\n
![\"above](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/01\/above-created-website-2.webp\")
<\/a><\/p>\nConclusion<\/h3>\n
The PokeAPI’s endpoints return JSON-formatted data, making it easily accessible and easy to integrate into the React project. Developers can fetch details about specific Pok\u00e9mon, their abilities, stats, sprites, evolution chains, and other relevant information.<\/p>\n
By leveraging the PokeAPI, developers can create engaging experiences for Pok\u00e9mon enthusiasts, such as Pok\u00e9mon catalogs, battle simulators, etc.<\/p>\n","protected":false},"excerpt":{"rendered":"
Greetings from the best Pokemon companion app! With the help of this cutting-edge program, you can immerse yourself in the Pokemon universe and have a thorough and immersive experience thanks to the Poke API....<\/p>\n","protected":false},"author":6,"featured_media":447287,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[225],"tags":[5556,5555,217,504,5554,218,5667,505,219,220,221,222],"class_list":["post-90372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-tutorials","tag-create-pokemon-app-using-react","tag-create-react-pokemon-app-using-pokeapi","tag-learn-react","tag-pokemon-app-using-pokeapi","tag-pokemon-application","tag-react","tag-react-pokemon-app","tag-react-pokemon-app-using-pokeapi","tag-react-project","tag-react-project-for-beginners","tag-react-project-for-practice","tag-react-project-ideas"],"yoast_head":"\n
React Project - Pokemon App Using PokeAPI - TechVidvan<\/title>\n<meta name=\"description\" content=\"The PokeAPI's endpoints return JSON-formatted data, which makes it easy to access and integrate into the React project.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Project - Pokemon App Using PokeAPI - TechVidvan\" \/>\n<meta property=\"og:description\" content=\"The PokeAPI's endpoints return JSON-formatted data, which makes it easy to access and integrate into the React project.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/\" \/>\n<meta property=\"og:site_name\" content=\"TechVidvan\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TechVidvan\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-26T12:30:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-03T10:32:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/2024\/12\/pokemon-app.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"TechVidvan Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vidvantech\" \/>\n<meta name=\"twitter:site\" content=\"@vidvantech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"TechVidvan Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Project - Pokemon App Using PokeAPI - TechVidvan","description":"The PokeAPI's endpoints return JSON-formatted data, which makes it easy to access and integrate into the React project.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/","og_locale":"en_US","og_type":"article","og_title":"React Project - Pokemon App Using PokeAPI - TechVidvan","og_description":"The PokeAPI's endpoints return JSON-formatted data, which makes it easy to access and integrate into the React project.","og_url":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/","og_site_name":"TechVidvan","article_publisher":"https:\/\/www.facebook.com\/TechVidvan\/","article_published_time":"2024-08-26T12:30:25+00:00","article_modified_time":"2026-06-03T10:32:45+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/2024\/12\/pokemon-app.webp","type":"image\/webp"}],"author":"TechVidvan Team","twitter_card":"summary_large_image","twitter_creator":"@vidvantech","twitter_site":"@vidvantech","twitter_misc":{"Written by":"TechVidvan Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/#article","isPartOf":{"@id":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/"},"author":{"name":"TechVidvan Team","@id":"https:\/\/techvidvan.com\/tutorials\/#\/schema\/person\/dde481bb412350cde1ed6e389bc0deaf"},"headline":"React Project – Pokemon App Using PokeAPI","datePublished":"2024-08-26T12:30:25+00:00","dateModified":"2026-06-03T10:32:45+00:00","mainEntityOfPage":{"@id":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/"},"wordCount":657,"commentCount":0,"publisher":{"@id":"https:\/\/techvidvan.com\/tutorials\/#organization"},"image":{"@id":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/#primaryimage"},"thumbnailUrl":"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/2024\/12\/pokemon-app.webp","keywords":["create pokemon app using react","create react pokemon app using pokeapi","learn react","pokemon app using pokeapi","pokemon application","react","react pokemon app","react pokemon app using pokeapi","react project","react project for beginners","react project for practice","react project ideas"],"articleSection":["React Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/","url":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/","name":"React Project - Pokemon App Using PokeAPI - TechVidvan","isPartOf":{"@id":"https:\/\/techvidvan.com\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/#primaryimage"},"image":{"@id":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/#primaryimage"},"thumbnailUrl":"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/2024\/12\/pokemon-app.webp","datePublished":"2024-08-26T12:30:25+00:00","dateModified":"2026-06-03T10:32:45+00:00","description":"The PokeAPI's endpoints return JSON-formatted data, which makes it easy to access and integrate into the React project.","breadcrumb":{"@id":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/#primaryimage","url":"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/2024\/12\/pokemon-app.webp","contentUrl":"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/2024\/12\/pokemon-app.webp","width":1200,"height":628,"caption":"pokemon app"},{"@type":"BreadcrumbList","@id":"https:\/\/techvidvan.com\/tutorials\/react-pokemon-app-project\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/techvidvan.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"React Project – Pokemon App Using PokeAPI"}]},{"@type":"WebSite","@id":"https:\/\/techvidvan.com\/tutorials\/#website","url":"https:\/\/techvidvan.com\/tutorials\/","name":"TechVidvan Blogs","description":"","publisher":{"@id":"https:\/\/techvidvan.com\/tutorials\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/techvidvan.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/techvidvan.com\/tutorials\/#organization","name":"TechVidvan","url":"https:\/\/techvidvan.com\/tutorials\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techvidvan.com\/tutorials\/#\/schema\/logo\/image\/","url":"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/2024\/03\/techvidvan-logo-200x50-1.webp","contentUrl":"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/2024\/03\/techvidvan-logo-200x50-1.webp","width":200,"height":50,"caption":"TechVidvan"},"image":{"@id":"https:\/\/techvidvan.com\/tutorials\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TechVidvan\/","https:\/\/x.com\/vidvantech"]},{"@type":"Person","@id":"https:\/\/techvidvan.com\/tutorials\/#\/schema\/person\/dde481bb412350cde1ed6e389bc0deaf","name":"TechVidvan Team"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/posts\/90372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/comments?post=90372"}],"version-history":[{"count":9,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/posts\/90372\/revisions"}],"predecessor-version":[{"id":448170,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/posts\/90372\/revisions\/448170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/media\/447287"}],"wp:attachment":[{"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/media?parent=90372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/categories?post=90372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/tags?post=90372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}