{"id":464161,"date":"2024-09-25T06:43:02","date_gmt":"2024-09-25T06:43:02","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=464161"},"modified":"2026-02-13T12:21:44","modified_gmt":"2026-02-13T12:21:44","slug":"magento2-product-page-using-reactjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/","title":{"rendered":"How to create Magento 2 Product Page using ReactJS"},"content":{"rendered":"\n<p>we will explore how to create a Magento 2 product page using ReactJS, diving into a step-by-step <a href=\"https:\/\/webkul.com\/headless-commerce-development-services\/\">Headless development<\/a> approach that seamlessly integrates React with Magento 2 backend.<\/p>\n\n\n\n<p>1. <a href=\"#intro\">Introduction To ReactJs And Magento 2<\/a><\/p>\n\n\n\n<p>2. <a href=\"#project-setup\">Setting Up Your Product Page with ReactJs<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#create-react-project\">Create Your ReactJs Project<\/a><\/li>\n\n\n\n<li><a href=\"#navigation\">Navigate to root directory<\/a><\/li>\n\n\n\n<li><a href=\"#packages\">Install Necessary Packages In Your ReactJs<\/a><\/li>\n\n\n\n<li><a href=\"#graphql-setup\">Set Up GraphQL Queries<\/a><\/li>\n\n\n\n<li><a href=\"#product-page\">Create Your Product Page In ReactJs<\/a><\/li>\n\n\n\n<li><a href=\"#page-component\">Create a product page component<\/a><\/li>\n\n\n\n<li><a href=\"#run-application\">Run Your Application<\/a><\/li>\n<\/ul>\n\n\n\n<p>3. <a href=\"#conclusion\">Conclusion<\/a><\/p>\n\n\n\n<p>By leverage of headless architecture, we\u2019ll seamlessly integrate Magento 2 backend with React, allowing for a more flexible and dynamic user experience and the full potential of headless commerce.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"intro\">Introduction To ReactJs And Magento 2<\/h2>\n\n\n\n<p>Creating a product page in React for your Magento 2 store can significantly influence whether a user decides to buy your product or move on.<\/p>\n\n\n\n<p>This guide will take you through the process of building an efficient and user-friendly product page, featuring code examples and detailed explanations.<\/p>\n\n\n\n<p>And, In this blog you are going to know about <a href=\"https:\/\/webkul.com\/magento-2-react-development-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 React Development<\/a>.<\/p>\n\n\n\n<p>You&#8217;ll gain valuable insights into <a href=\"https:\/\/webkul.com\/reactjs-development-services\/\">React.js development<\/a> along the way.<\/p>\n\n\n\n<p>You\u2019ll learn how to fetch data from Magento 2 GraphQL API, manage state, and design a responsive layout that enhances the overall shopping experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"800\" height=\"498\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento.webp\" alt=\"Magento Product Page with ReactJs\" class=\"wp-image-464172\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento.webp 800w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-300x187.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-250x156.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-768x478.webp 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Implementation<\/h2>\n\n\n\n<p>Now, let\u2019s implement the product page step by step.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"project-setup\">Setting Up Your Product Page with ReactJs<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"create-react-project\">1. <strong>Create Your ReactJs Project:<\/strong> <\/h4>\n\n\n\n<p>Open your terminal and run the following command to <a href=\"https:\/\/webkul.com\/blog\/create-react-app\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a new React.Js<\/a> Project<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npx create-react-app my-magento-store\ncd my-magento-store<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"navigation\">2. Navigate to root directory:<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">cd my-magento-store<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"packages\">3. Install Necessary Packages In Your <strong>ReactJs<\/strong>:<\/h4>\n\n\n\n<p>As, I created this with Tailwind, Eslint, React router dom, TypeScript so:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/ typescript and eslint\nnpm install -D typescript eslint\n\n\/\/ tailwind css\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n\n\/\/ react router\nnpm install react-router-dom<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"graphql-setup\"><strong>4. Set Up GraphQL Queries:<\/strong><\/h4>\n\n\n\n<p>As we are using Magento 2 <a href=\"https:\/\/graphql.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">GraphQl<\/a> API. So lets, create a folder for your GraphQL queries. This keeps your code organized.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">mkdir src\/graphql\ntouch src\/graphql\/queries.ts<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/In queries.ts, you can define your GraphQL query for fetching product details:\n\/\/ graphql\/queries.ts\n\nexport const GET_PRODUCT_BY_SKU = (sku: string) =&gt; `\n{\n    products(filter: {sku: {eq: &quot;${sku}&quot;}}) {\n        items {\n            id\n            name\n            rating_summary\n            review_count\n            sku\n            stock_status\n            price {\n                regularPrice {\n                    amount {\n                        value\n                        currency\n                    }\n                }\n            }\n            description {\n                html\n            }\n            media_gallery {\n                url\n            }\n        }\n    }\n}\n`;<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"product-page\"><strong>5. Create Your Product Page In ReactJs:<\/strong><\/h4>\n\n\n\n<p>Inside the <code>src<\/code> directory, in a file called <code>App.tsx<\/code> add routing structure:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">import { BrowserRouter as Router, Route, Routes } from &#039;react-router-dom&#039;;\nimport ProductPage from &#039;..\/components\/ProductPage&#039;; \/\/ Your product page component\n\nfunction App() {\n  return (\n    &lt;Router&gt;\n      &lt;Routes&gt;\n        &lt;Route path=&quot;\/product\/:sku&quot; component={ProductPage} \/&gt;\n        {\/* Other routes *\/}\n      &lt;\/Routes&gt;\n    &lt;\/Router&gt;\n  );\n}\n\nexport default App;<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"page-component\">6. Create a product page component:<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">mkdir src\/components\ntouch src\/components\/ProductPage.tsx<\/pre>\n\n\n\n<p>And, add the following code in product page component:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">import React, { useEffect, useState } from &quot;react&quot;;\nimport { GET_PRODUCT_BY_SKU } from &quot;..\/graphql\/queries&quot;;\nimport { StarIcon } from &quot;.\/StarIcon&quot;;\nimport { HeartIcon } from &quot;.\/Heart&quot;;\nimport { ChartBarIcon } from &quot;.\/CompareIcon&quot;;\nimport { useParams } from &quot;react-router-dom&quot;;\ninterface ProductType {\n  price: any;\n  media_gallery: {\n    url: string;\n  }&#091;];\n  name: string;\n  stock_status: string;\n  sku: string;\n  id: string;\n}\nconst ProductPage: React.FC = () =&gt; {\n  const { sku=&quot;&quot; } = useParams&lt;{ sku: string }&gt;();\n  const &#091;product, setProduct] = useState&lt;ProductType | null&gt;(null);\n  const &#091;loading, setLoading] = useState(true);\n  const APP_URL = MAGENTO_ENDPOINT\/graphql;\n  useEffect(() =&gt; {\n    const fetchProduct = async () =&gt; {\n      try {\n        const res = await fetch(&quot;APP_URL&quot;, {\n          method: &quot;POST&quot;,\n          headers: {\n            &quot;Content-Type&quot;: &quot;application\/json&quot;,\n          },\n          body: JSON.stringify({\n            query: GET_PRODUCT_BY_SKU(sku),\n          }),\n        });\n\n        const data = await res.json();\n        const fetchedProduct = data.data.products.items&#091;0] || null;\n        setProduct(fetchedProduct);\n      } catch (error) {\n        console.error(error);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchProduct();\n  }, &#091;sku]);\n\n  if (loading) {\n    return &lt;div&gt;Loading...&lt;\/div&gt;;\n  }\n\n  if (!product) {\n    return &lt;div&gt;No product found.&lt;\/div&gt;;\n  }\n\n  const priceData = product.price.regularPrice.amount;\n  const currency = &quot;USD&quot;;\n  const value = priceData?.value;\n  const price = value?.toLocaleString(&quot;en-US&quot;, {\n    style: &quot;currency&quot;,\n    currency,\n  });\n  const items = new Array(5).fill(0);\n\n  return (\n       &lt;div className=&quot;container relative grid items-start p-3 mx-auto font-sans sm:p-6 lg:grid-cols-12&quot;&gt;\n      {product.media_gallery &amp;&amp; product.media_gallery.length &gt; 0 &amp;&amp; (\n        &lt;img\n          src={product.media_gallery&#091;0].url}\n          className=&quot;relative object-contain w-screen h-full lg:col-span-7 lg:max-w-4xl aspect-square&quot;\n          alt={product.name}\n        \/&gt;\n      )}\n      &lt;div className=&quot;flex flex-col gap-6 mt-5 lg:col-span-5&quot;&gt;\n        &lt;h1 className=&quot;text-4xl lg:text-6xl font-extralight&quot;&gt;{product.name}&lt;\/h1&gt;\n        &lt;div className=&quot;flex items-center gap-10&quot;&gt;\n          &lt;div className=&quot;flex items-center&quot;&gt;\n            {items.map((rating) =&gt; (\n              &lt;StarIcon\n                key={rating}\n                className={`${3 &gt; rating ? &quot;text-yellow-500 fill-yellow-500&quot; : &quot;text-gray-200&quot;} h-5 w-5 flex-shrink-0`}\n                aria-hidden=&quot;true&quot;\n              \/&gt;\n            ))}\n          &lt;\/div&gt;\n          &lt;p className=&quot;text-sm font-medium cursor-pointer md:text-base text-sky-600 hover:text-sky-700&quot;&gt;{item.review_count} Reviews&lt;\/p&gt;\n          &lt;p className=&quot;text-sm font-medium cursor-pointer md:text-base text-sky-600 hover:text-sky-700&quot;&gt;Add Your Review&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div className=&quot;flex items-start justify-between&quot;&gt;\n          &lt;h2 className=&quot;text-3xl font-medium lg:text-5xl lg:font-semibold&quot;&gt;{price}&lt;\/h2&gt;\n          &lt;div&gt;\n            &lt;p className=&quot;font-semibold&quot;&gt;{product?.stock_status?.replace(&quot;_&quot;, &quot; &quot;)}&lt;\/p&gt;\n            &lt;p&gt;Sku# : {product?.sku}&lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;hr className=&quot;w-full h-px border border-gray-200&quot; \/&gt;\n        &lt;div className=&quot;flex flex-col gap-px&quot;&gt;\n          &lt;p className=&quot;font-normal&quot;&gt;Qty:&lt;\/p&gt;\n          &lt;input\n            className=&quot;p-2 border border-gray-400 rounded-lg max-w-16&quot;\n            defaultValue={1}\n            type=&quot;number&quot;\n            min=&quot;1&quot;\n            max=&quot;100&quot;\n          \/&gt;\n        &lt;\/div&gt;\n        &lt;button className=&quot;w-full px-8 py-4 text-xl font-semibold text-white duration-200 lg:max-w-60 bg-sky-600 hover:bg-sky-700&quot;&gt;\n          Add to Cart\n        &lt;\/button&gt;\n        &lt;div className=&quot;flex items-center gap-12&quot;&gt;\n          &lt;button className=&quot;flex items-center justify-center w-full gap-3 text-sm font-semibold text-gray-500 uppercase cursor-pointer md:text-base max-w-fit&quot;&gt;\n            &lt;HeartIcon className=&quot;w-5 h-5 -mt-px text-gray-500&quot; \/&gt;\n            Add to wishlist\n          &lt;\/button&gt;\n          &lt;button className=&quot;flex items-center justify-center w-full gap-3 text-sm font-semibold text-gray-500 uppercase cursor-pointer md:text-base max-w-fit&quot;&gt;\n            &lt;ChartBarIcon className=&quot;w-5 h-5 -mt-px fill-gray-500&quot; \/&gt;\n            Add to compare\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default ProductPage;<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large wp-duotone-unset-1\"><img decoding=\"async\" width=\"1200\" height=\"729\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/desktop-1200x729.webp\" alt=\"react.js product page desktop view\" class=\"wp-image-464419\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/desktop-1200x729.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/desktop-300x182.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/desktop-250x152.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/desktop-768x467.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/desktop-1536x933.webp 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/desktop.webp 1694w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<div class=\"wp-block-columns wk-bg-radial-gradient is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading has-white-color has-text-color has-link-color wp-elements-291b17f6d5d36d859a236dcad35b252e\">Mobile View<\/h2>\n\n\n\n<p class=\"has-white-color has-text-color has-link-color wp-elements-1e67a0a80a12258b96e31c3d00a498b2\">Product details in mobile view<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column wk-video-mockup-frame is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"455\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/mobileview-7-455x1024.webp\" alt=\"react.js product page mobile view\" class=\"wp-image-464987\" style=\"object-fit:cover\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/mobileview-7-455x1024.webp 455w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/mobileview-7-133x300.webp 133w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/mobileview-7-111x249.webp 111w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/mobileview-7-768x1727.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/mobileview-7-683x1536.webp 683w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/mobileview-7-911x2048.webp 911w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/mobileview-7.webp 1082w\" sizes=\"(max-width: 455px) 100vw, 455px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"run-application\">7<strong>. Run Your Application:<\/strong><\/h4>\n\n\n\n<p>Finally, run your ReactJs app to see your product page in action:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm start<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h3>\n\n\n\n<p>By following these steps, you\u2019ve successfully created a product page using <a href=\"https:\/\/react.dev\/\">React.Js<\/a> that integrates seamlessly with your <a href=\"https:\/\/webkul.com\/blog\/category\/magento-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2<\/a> backend. <\/p>\n\n\n\n<p>This foundation not only displays essential product information but also sets the stage for further enhancements.<\/p>\n\n\n\n<p>You can elevate the user experience by adding features such as a customer cart, user reviews, related products, and advanced styling options. <\/p>\n\n\n\n<p>These additions will not only enrich the functionality but also create a more engaging shopping experience for your customers.<\/p>\n\n\n\n<p>Feel free to customize and expand upon this foundation as needed, tailoring it to meet your specific business goals and user needs. The possibilities are endless!<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\"><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>we will explore how to create a Magento 2 product page using ReactJS, diving into a step-by-step Headless development approach that seamlessly integrates React with Magento 2 backend. 1. Introduction To ReactJs And Magento 2 2. Setting Up Your Product Page with ReactJs 3. Conclusion By leverage of headless architecture, we\u2019ll seamlessly integrate Magento 2 <a href=\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":496,"featured_media":464391,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121,6357],"tags":[14681,2460,2070,14988,13578,15632],"class_list":["post-464161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2","category-react-js","tag-graphql-api","tag-magento-2","tag-magento2","tag-react-js-2","tag-tailwindcss","tag-typescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>ReactJs | How to create Magento 2 Product Page using ReactJS - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Learn how to create a dynamic product page for your Magento store using ReactJs. This guide covers fetching product data with GraphQL Api.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ReactJs | How to create Magento 2 Product Page using ReactJS - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a dynamic product page for your Magento store using ReactJs. This guide covers fetching product data with GraphQL Api.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-25T06:43:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-13T12:21:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"498\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Arun Tiwari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Arun Tiwari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/\"},\"author\":{\"name\":\"Arun Tiwari\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/b3d968b3f55f433fda5b0d660dbea4aa\"},\"headline\":\"How to create Magento 2 Product Page using ReactJS\",\"datePublished\":\"2024-09-25T06:43:02+00:00\",\"dateModified\":\"2026-02-13T12:21:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/\"},\"wordCount\":448,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-1.webp\",\"keywords\":[\"GraphQl Api\",\"Magento 2\",\"Magento2\",\"React.js\",\"TailwindCss\",\"TypeScript\"],\"articleSection\":[\"Magento 2\",\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/\",\"url\":\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/\",\"name\":\"ReactJs | How to create Magento 2 Product Page using ReactJS - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-1.webp\",\"datePublished\":\"2024-09-25T06:43:02+00:00\",\"dateModified\":\"2026-02-13T12:21:44+00:00\",\"description\":\"Learn how to create a dynamic product page for your Magento store using ReactJs. This guide covers fetching product data with GraphQL Api.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-1.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-1.webp\",\"width\":800,\"height\":498,\"caption\":\"magento 2 react.js product page\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create Magento 2 Product Page using ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/b3d968b3f55f433fda5b0d660dbea4aa\",\"name\":\"Arun Tiwari\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/07faf0906e0520912140e99abd63bf5620be60c11bb1220fe25dacda8a9f4896?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/07faf0906e0520912140e99abd63bf5620be60c11bb1220fe25dacda8a9f4896?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Arun Tiwari\"},\"description\":\"Arun Tiwari, a skilled Software Engineer, specializes in making Magento Headless compatible extensions. With deep expertise in headless architecture, Arun crafts seamless, scalable solutions.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/aruntiwari-mg565\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ReactJs | How to create Magento 2 Product Page using ReactJS - Webkul Blog","description":"Learn how to create a dynamic product page for your Magento store using ReactJs. This guide covers fetching product data with GraphQL Api.","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:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/","og_locale":"en_US","og_type":"article","og_title":"ReactJs | How to create Magento 2 Product Page using ReactJS - Webkul Blog","og_description":"Learn how to create a dynamic product page for your Magento store using ReactJs. This guide covers fetching product data with GraphQL Api.","og_url":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-09-25T06:43:02+00:00","article_modified_time":"2026-02-13T12:21:44+00:00","og_image":[{"width":800,"height":498,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-1.webp","type":"image\/webp"}],"author":"Arun Tiwari","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Arun Tiwari","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/"},"author":{"name":"Arun Tiwari","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/b3d968b3f55f433fda5b0d660dbea4aa"},"headline":"How to create Magento 2 Product Page using ReactJS","datePublished":"2024-09-25T06:43:02+00:00","dateModified":"2026-02-13T12:21:44+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/"},"wordCount":448,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-1.webp","keywords":["GraphQl Api","Magento 2","Magento2","React.js","TailwindCss","TypeScript"],"articleSection":["Magento 2","react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/","url":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/","name":"ReactJs | How to create Magento 2 Product Page using ReactJS - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-1.webp","datePublished":"2024-09-25T06:43:02+00:00","dateModified":"2026-02-13T12:21:44+00:00","description":"Learn how to create a dynamic product page for your Magento store using ReactJs. This guide covers fetching product data with GraphQL Api.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-1.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/product-page-magento-1.webp","width":800,"height":498,"caption":"magento 2 react.js product page"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/magento2-product-page-using-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create Magento 2 Product Page using ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/b3d968b3f55f433fda5b0d660dbea4aa","name":"Arun Tiwari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/07faf0906e0520912140e99abd63bf5620be60c11bb1220fe25dacda8a9f4896?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/07faf0906e0520912140e99abd63bf5620be60c11bb1220fe25dacda8a9f4896?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Arun Tiwari"},"description":"Arun Tiwari, a skilled Software Engineer, specializes in making Magento Headless compatible extensions. With deep expertise in headless architecture, Arun crafts seamless, scalable solutions.","url":"https:\/\/webkul.com\/blog\/author\/aruntiwari-mg565\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/464161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/496"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=464161"}],"version-history":[{"count":39,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/464161\/revisions"}],"predecessor-version":[{"id":526479,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/464161\/revisions\/526479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/464391"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=464161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=464161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=464161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}