{"id":86,"date":"2024-06-06T15:02:51","date_gmt":"2024-06-06T13:02:51","guid":{"rendered":"https:\/\/onceuponadev.xyz\/?p=86"},"modified":"2024-06-11T19:09:38","modified_gmt":"2024-06-11T17:09:38","slug":"demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu","status":"publish","type":"post","link":"https:\/\/onceuponadev.xyz\/en\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/","title":{"rendered":"Untangling the Mystery of React Project Structure: npm init, Your First Jutsu"},"content":{"rendered":"<p>Welcome, young React padawans and aspiring Jedi Masters, to an unprecedented journey through the organized yet sometimes mysterious labyrinth of a React project\u2019s structure! Grab your coffee (or tea, let's be inclusive) because we\u2019re diving headfirst into what makes up the backbone of our favorite React applications.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">The Trio of Magical Folders<\/h3>\n\n\n\n<p>It all starts with a bit of black magic\u2026 or rather a flick of npm init react-app (I\u2019m team npm, but no shade to the Yarn crew, they\u2019re cool too). Abracadabra, and boom, three folders appear:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>node_modules<\/strong> The treasure chest, holding all the gems (modules) needed for your app. Don\u2019t get lost in there!<\/li>\n\n\n\n<li><strong>public<\/strong> : The storefront of your shop. This folder contains everything your visitors will see and touch directly, like images, the favicon, and that good old index.html file where all your React magic gets injected.<\/li>\n\n\n\n<li><strong>src<\/strong> : The secret workshop where everything is created. This is where components come to life, styles intertwine, and the real development happens.<\/li>\n<\/ul>\n\n\n\n<p>On ne conseillera jamais assez de jeter un coup d&rsquo;oeil \u00e0 la doc: <a href=\"https:\/\/react.dev\/learn\/start-a-new-react-project\">https:\/\/react.dev\/learn\/start-a-new-react-project<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Den of Code: The src Folder<\/h3>\n\n\n\n<p>This is where you'll spend your days (and probably nights)\u2026 (I do both). The files index.js and App.js are the ringmasters, orchestrating the appearance of all other components on stage. Think of App.js to dress up your components, and index.js for a bit of global style.<\/p>\n\n\n\n<p>As for performance and testing, don\u2019t sweat it, React has got you covered with files like App.test.js for testing, and reportWebVitals.js to monitor your app\u2019s health.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Guardians of the Temple: Root Files<\/h3>\n\n\n\n<p>Here, sacred manuscripts like .gitignore, package.json, and README.md tell the tale of your project to anyone daring to peek. These files are crucial so that everyone, including your future self, understands what\u2019s going on.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Customization: The Art of Organization<\/h3>\n\n\n\n<p>Customizing your project is like decorating your apartment. React suggests two schools of thought: feature-based or type-based. For instance, creating a cozy corner for each feature or a dedicated space for each type of element.<\/p>\n\n\n\n<p>We could talk about this for hours. Where I put things and how and why\u2026 I dig the type-based structure, grouping files by type, putting all components in a components folder\u2014it\u2019s easier to navigate, avoids duplication but\u2026 it might separate pieces of a particular feature from each other\u2026 Basically, it\u2019s like tidying your room, better put things where you\u2019ll find them. So... Gryffindor or Slytherin?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Components, Components Everywhere!<\/h3>\n\n\n\n<p>Every component, from Nav.js to Footer.js, tells a little story. For example, our Nav is the welcoming host with its links, while Promo shouts out the best deals of the day. <code>Nav<\/code> est l&rsquo;h\u00f4te accueillant avec ses liens, tandis que <code>Promo<\/code> vous crie les meilleures offres du jour. <\/p>\n\n\n\n<p>And components can multiply quickly, like a Konoha ninja using multi-shadow clone technique.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">All Orchestrated Under JSX<\/h3>\n\n\n\n<p>And now, a little spotlight on JSX and that famous className! JSX is this weird dialect that looks a lot like HTML, used to write your React application\u2019s user interface more easily. It\u2019s a syntactic extension for JavaScript, but don\u2019t be fooled: even though it looks like HTML, it\u2019s definitely JavaScript running behind the curtains!<\/p>\n\n\n\n<p>Why className instead of class? Simply because class is a reserved keyword in JavaScript. JSX adopted className to avoid syntactic conflicts, allowing your code to stay clean and organized. ClassName or class, the CSS still sees a . Period. IYKYK.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Mystery of the Virtual DOM Unveiled<\/h3>\n\n\n\n<p>The Virtual DOM is a crucial concept in React. Think of it as a blueprint of your application, a lightweight and speedy copy of the real DOM. When a change occurs, React first updates this virtual DOM. Then, it compares this new virtual DOM with the old one to determine the most efficient way to apply these changes to the real DOM. This minimizes direct DOM manipulations, which can be costly in performance terms, keeping your app fast and responsive.<\/p>\n\n\n\n<p>The Virtual DOM is kind of like Hermione\u2019s Time-Turner. It adjusts the past (the previous DOM) to optimize the present, all without disturbing your application\u2019s space-time continuum.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">A Structure Not Imposed, But Proven<\/h3>\n\n\n\n<p>There you have it, you survived the guided tour of a React project\u2019s structure! Keep in mind that none of this is set in stone. React is flexible, just like this structure. Npm init react-app helps to start, lays the foundation, but don\u2019t hesitate to tweak it to your flavor.<\/p>\n\n\n\n<p>Remember, in the world of React, even if sometimes folders and files seem to have their own will, it\u2019s up to you to master this organized chaos to create applications that will dazzle the world (or at least your boss).<\/p>\n\n\n\n<p>So, ready to become the master of your own React destiny? The adventure is just beginning!<\/p>","protected":false},"excerpt":{"rendered":"<p>Welcome, young React padawans and aspiring Jedi Masters, to an unprecedented journey through the organized yet sometimes mysterious labyrinth of a React project\u2019s structure! Grab your coffee (or tea, let's be inclusive) because we\u2019re diving headfirst into what makes up the backbone of our favorite React applications.<\/p>","protected":false},"author":1,"featured_media":87,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developpement-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>D\u00e9m\u00ealer le myst\u00e8re de la structure de projet React : npm init, premier Jutsu. - onceuponadev.xyz<\/title>\n<meta name=\"description\" content=\"Comment bien d\u00e9marrer un projet React.js, sa structure, ses dossiers, explorez le rabbit hole npm init react app\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/onceuponadev.xyz\/en\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"D\u00e9m\u00ealer le myst\u00e8re de la structure de projet React : npm init, premier Jutsu. - onceuponadev.xyz\" \/>\n<meta property=\"og:description\" content=\"Comment bien d\u00e9marrer un projet React.js, sa structure, ses dossiers, explorez le rabbit hole npm init react app\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onceuponadev.xyz\/en\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/\" \/>\n<meta property=\"og:site_name\" content=\"onceuponadev.xyz\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-06T13:02:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-11T17:09:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/art-npm-init.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Once Upon a Dev\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Once Upon a Dev\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/\"},\"author\":{\"name\":\"Once Upon a Dev\",\"@id\":\"https:\/\/onceuponadev.xyz\/#\/schema\/person\/d948590ba6a12467dab09ff9e1782261\"},\"headline\":\"D\u00e9m\u00ealer le myst\u00e8re de la structure de projet React : npm init, premier Jutsu.\",\"datePublished\":\"2024-06-06T13:02:51+00:00\",\"dateModified\":\"2024-06-11T17:09:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/\"},\"wordCount\":966,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/onceuponadev.xyz\/#organization\"},\"image\":{\"@id\":\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/art-npm-init.webp\",\"articleSection\":[\"developpement web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/\",\"url\":\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/\",\"name\":\"D\u00e9m\u00ealer le myst\u00e8re de la structure de projet React : npm init, premier Jutsu. - onceuponadev.xyz\",\"isPartOf\":{\"@id\":\"https:\/\/onceuponadev.xyz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/art-npm-init.webp\",\"datePublished\":\"2024-06-06T13:02:51+00:00\",\"dateModified\":\"2024-06-11T17:09:38+00:00\",\"description\":\"Comment bien d\u00e9marrer un projet React.js, sa structure, ses dossiers, explorez le rabbit hole npm init react app\",\"breadcrumb\":{\"@id\":\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#primaryimage\",\"url\":\"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/art-npm-init.webp\",\"contentUrl\":\"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/art-npm-init.webp\",\"width\":1500,\"height\":1000,\"caption\":\"Structure d'un projet React.js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/onceuponadev.xyz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9m\u00ealer le myst\u00e8re de la structure de projet React : npm init, premier Jutsu.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/onceuponadev.xyz\/#website\",\"url\":\"https:\/\/onceuponadev.xyz\/\",\"name\":\"onceuponadev.xyz\",\"description\":\"D\u00e9veloppement web\",\"publisher\":{\"@id\":\"https:\/\/onceuponadev.xyz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/onceuponadev.xyz\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/onceuponadev.xyz\/#organization\",\"name\":\"Once Upon a Dev\",\"url\":\"https:\/\/onceuponadev.xyz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/onceuponadev.xyz\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/cropped-Screenshot-from-2024-06-11-01-52-04.png\",\"contentUrl\":\"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/cropped-Screenshot-from-2024-06-11-01-52-04.png\",\"width\":402,\"height\":56,\"caption\":\"Once Upon a Dev\"},\"image\":{\"@id\":\"https:\/\/onceuponadev.xyz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/onceuponadev\/\",\"https:\/\/www.threads.net\/@onceuponadev\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/onceuponadev.xyz\/#\/schema\/person\/d948590ba6a12467dab09ff9e1782261\",\"name\":\"Once Upon a Dev\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/onceuponadev.xyz\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cca9e876505c631a6c30f9c4c8568336d3072ec5d821ed9fa614dfb94daed8cf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cca9e876505c631a6c30f9c4c8568336d3072ec5d821ed9fa614dfb94daed8cf?s=96&d=mm&r=g\",\"caption\":\"Once Upon a Dev\"},\"sameAs\":[\"http:\/\/onceuponadev.xyz\"],\"url\":\"https:\/\/onceuponadev.xyz\/en\/author\/onceuponadev-xyz\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"D\u00e9m\u00ealer le myst\u00e8re de la structure de projet React : npm init, premier Jutsu. - onceuponadev.xyz","description":"Comment bien d\u00e9marrer un projet React.js, sa structure, ses dossiers, explorez le rabbit hole npm init react app","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:\/\/onceuponadev.xyz\/en\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/","og_locale":"en_US","og_type":"article","og_title":"D\u00e9m\u00ealer le myst\u00e8re de la structure de projet React : npm init, premier Jutsu. - onceuponadev.xyz","og_description":"Comment bien d\u00e9marrer un projet React.js, sa structure, ses dossiers, explorez le rabbit hole npm init react app","og_url":"https:\/\/onceuponadev.xyz\/en\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/","og_site_name":"onceuponadev.xyz","article_published_time":"2024-06-06T13:02:51+00:00","article_modified_time":"2024-06-11T17:09:38+00:00","og_image":[{"width":1500,"height":1000,"url":"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/art-npm-init.webp","type":"image\/webp"}],"author":"Once Upon a Dev","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Once Upon a Dev","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#article","isPartOf":{"@id":"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/"},"author":{"name":"Once Upon a Dev","@id":"https:\/\/onceuponadev.xyz\/#\/schema\/person\/d948590ba6a12467dab09ff9e1782261"},"headline":"D\u00e9m\u00ealer le myst\u00e8re de la structure de projet React : npm init, premier Jutsu.","datePublished":"2024-06-06T13:02:51+00:00","dateModified":"2024-06-11T17:09:38+00:00","mainEntityOfPage":{"@id":"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/"},"wordCount":966,"commentCount":0,"publisher":{"@id":"https:\/\/onceuponadev.xyz\/#organization"},"image":{"@id":"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#primaryimage"},"thumbnailUrl":"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/art-npm-init.webp","articleSection":["developpement web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/","url":"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/","name":"D\u00e9m\u00ealer le myst\u00e8re de la structure de projet React : npm init, premier Jutsu. - onceuponadev.xyz","isPartOf":{"@id":"https:\/\/onceuponadev.xyz\/#website"},"primaryImageOfPage":{"@id":"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#primaryimage"},"image":{"@id":"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#primaryimage"},"thumbnailUrl":"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/art-npm-init.webp","datePublished":"2024-06-06T13:02:51+00:00","dateModified":"2024-06-11T17:09:38+00:00","description":"Comment bien d\u00e9marrer un projet React.js, sa structure, ses dossiers, explorez le rabbit hole npm init react app","breadcrumb":{"@id":"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#primaryimage","url":"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/art-npm-init.webp","contentUrl":"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/art-npm-init.webp","width":1500,"height":1000,"caption":"Structure d'un projet React.js"},{"@type":"BreadcrumbList","@id":"https:\/\/onceuponadev.xyz\/demeler-le-mystere-de-la-structure-de-projet-react-npm-init-premier-justsu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onceuponadev.xyz\/"},{"@type":"ListItem","position":2,"name":"D\u00e9m\u00ealer le myst\u00e8re de la structure de projet React : npm init, premier Jutsu."}]},{"@type":"WebSite","@id":"https:\/\/onceuponadev.xyz\/#website","url":"https:\/\/onceuponadev.xyz\/","name":"onceuponadev.xyz","description":"Web Development","publisher":{"@id":"https:\/\/onceuponadev.xyz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/onceuponadev.xyz\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/onceuponadev.xyz\/#organization","name":"Once Upon a Dev","url":"https:\/\/onceuponadev.xyz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/onceuponadev.xyz\/#\/schema\/logo\/image\/","url":"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/cropped-Screenshot-from-2024-06-11-01-52-04.png","contentUrl":"https:\/\/onceuponadev.xyz\/wp-content\/uploads\/2024\/06\/cropped-Screenshot-from-2024-06-11-01-52-04.png","width":402,"height":56,"caption":"Once Upon a Dev"},"image":{"@id":"https:\/\/onceuponadev.xyz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/onceuponadev\/","https:\/\/www.threads.net\/@onceuponadev"]},{"@type":"Person","@id":"https:\/\/onceuponadev.xyz\/#\/schema\/person\/d948590ba6a12467dab09ff9e1782261","name":"Once Upon a Dev","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/onceuponadev.xyz\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cca9e876505c631a6c30f9c4c8568336d3072ec5d821ed9fa614dfb94daed8cf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cca9e876505c631a6c30f9c4c8568336d3072ec5d821ed9fa614dfb94daed8cf?s=96&d=mm&r=g","caption":"Once Upon a Dev"},"sameAs":["http:\/\/onceuponadev.xyz"],"url":"https:\/\/onceuponadev.xyz\/en\/author\/onceuponadev-xyz\/"}]}},"_links":{"self":[{"href":"https:\/\/onceuponadev.xyz\/en\/wp-json\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onceuponadev.xyz\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/onceuponadev.xyz\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/onceuponadev.xyz\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onceuponadev.xyz\/en\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":4,"href":"https:\/\/onceuponadev.xyz\/en\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":150,"href":"https:\/\/onceuponadev.xyz\/en\/wp-json\/wp\/v2\/posts\/86\/revisions\/150"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/onceuponadev.xyz\/en\/wp-json\/wp\/v2\/media\/87"}],"wp:attachment":[{"href":"https:\/\/onceuponadev.xyz\/en\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/onceuponadev.xyz\/en\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/onceuponadev.xyz\/en\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}