{"id":31121,"date":"2023-09-12T07:00:00","date_gmt":"2023-09-12T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=31121"},"modified":"2023-09-11T20:58:01","modified_gmt":"2023-09-12T03:58:01","slug":"using-react-cloudinary-playground","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground","title":{"rendered":"Using React and Cloudinary in the \u2018Playground\u2019"},"content":{"rendered":"\n

Recently, I sharpened my React<\/a> skills while creating a new course for our Cloudinary Academy<\/a>. My experiences building this course solidified my love for React, and I believe learning to work with it alongside Cloudinary can offer immense advantages for developers engaged with media-rich applications or projects.<\/p>\n\n\n\n

What Is React and Why Is It Important?<\/h2>\n\n\n\n

React<\/h3>\n\n\n\n

React is a widely used JavaScript library for building user interfaces. It gained popularity in the web development community shortly after its release in 2013.<\/p>\n\n\n\n

React is used by major companies across the globe including Netflix<\/a> and Uber<\/a>. One of the main reasons for this popularity is the fact that the React.js library was created by Facebook (then Facebook, now Meta), is open source, and has a large user base of experts that continually contribute to its development and improvement. <\/p>\n\n\n\n

React is built on a component-based architecture. <\/p>\n\n\n\n

What does that mean? <\/em><\/p>\n\n\n\n

Simply put, React allows you to create modular components or \u201cchunks\u201d of reusable code.<\/p>\n\n\n\n

Why is this good?<\/em><\/p>\n\n\n\n

Being able to build and focus on smaller individual components helps maintain more complex applications, especially when it comes to scalability.<\/p>\n\n\n\n

Cloudinary and React<\/h2>\n\n\n\n

React’s component-based architecture and Cloudinary’s powerful media management capabilities complement each other seamlessly. Together, React and Cloudinary help developers build visually appealing, responsive, high-performance web applications, so those developers can focus on creativity and innovation rather than infrastructure.<\/p>\n\n\n\n

At Cloudinary, all of our frontend SDKs are based on the JavaScript SDK<\/a>, so learning to work with our React SDK will also<\/strong> equip you with skills applicable to other JavaScript frontend frameworks like Vue and Angular, as well as our community-developed open source libraries<\/a> \u2014 thanks to the ubiquity of the @cloudinary\/url-gen package.<\/p>\n\n\n\n

Whether you\u2019re working on a personal project or developing solutions for clients, mastering React with Cloudinary will elevate your development skills.<\/p>\n\n\n\n

Introducing the Cloudinary React SDK Playground<\/h2>\n\n\n\n

To assist in your education, the Customer Education team created an application called <\/strong>The React SDK Playground<\/a> specifically for our course, <\/strong>Introduction to Cloudinary for React Developers<\/a>. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

We used Sandpack<\/a> to embed <\/em> Sandbox.io<\/a> directly into the React SDK Playground<\/a>, allowing you to programmatically create transformations and instantly see results. This means easy experimentation with code.<\/p>\n\n\n\n

Pretty cool, right?<\/p>\n\n\n\n

Everything is open source, and you can experiment even more in this course\u2019s GitHub repository<\/a>.<\/p>\n\n\n\n

Let\u2019s jump in!<\/a> <\/strong>All you need is a free Cloudinary<\/a> account. <\/p>\n\n\n\n

Upload Presets<\/h2>\n\n\n\n

When you enter the playground, you\u2019ll notice a space to input your Cloudinary Cloud Name<\/strong> and your Unsigned Preset Name<\/strong>.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

To make uploads from the frontend, you\u2019ll need this unsigned<\/em> Upload Preset<\/a>. <\/p>\n\n\n\n

Unsigned presets can be used with unsigned upload calls, such as uploading directly from the browser<\/a>, in the upload widget<\/a>, or for Auto Upload<\/a> settings.<\/p>\n\n\n\n

Upload Presets are covered in the course, but if you\u2019re interested, here\u2019s a tutorial<\/a> that can help you understand how to programmatically<\/em> create upload presets:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Alternatively, you can also easily create these manually within your Product Environment Settings within your account.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Layout of Code Samples in the Playground<\/h2>\n\n\n\n

In regards to the Sandbox Code layout, the majority of the code follows a consistent format. Once you become familiar with the pattern, you can focus on the specific details of what makes each transformation work the way it does, understand which modules to import, and what might be the best transformation for your use cases.<\/p>\n\n\n\n

Here\u2019s the format:<\/p>\n\n\n\n

Firstly, we’ll import the necessary modules. <\/p>\n\n\n

\n
\"\"\/<\/figure><\/div>\n\n\n

Secondly, we’ll instantiate asset objects, which can be either images or videos, and we’ll apply transformations to them. <\/p>\n\n\n\n

<\/p>\n\n\n\n

And lastly, we’ll render the transformed assets. <\/p>\n\n\n

\n
\"\"\/<\/figure><\/div>\n\n\n

It’s also worth noting that in addition to AdvancedImage, we also provide AdvancedVideo for handling video transformation.<\/p>\n\n\n\n

Now that we know the format, it\u2019s time to play!<\/p>\n\n\n\n

Experiments<\/h2>\n\n\n\n

There are also experiments within each Cloudinary React SDK Playground example! Each experiment involves prompts to modify a parameter in the code.<\/p>\n\n\n

\n
\"\"\/<\/figure><\/div>\n\n\n

This allows you to observe the effect on the rendered asset. These are hands-on experiments that will assist you in determining whether or not the parameter is something you want to use when you’re writing your own code.<\/p>\n\n\n\n

By actively engaging in these experiments, you’ll gain practical knowledge and develop a deeper understanding of how different parameters influence the desired outcomes with your media assets.<\/p>\n\n\n\n

In my opinion, the best way to learn is by doing!<\/p>\n\n\n\n

Introduction to Cloudinary for React Developers<\/a> comprehensively addresses various aspects, including the generation of image and video URLs, the incorporation of diverse transformations for optimization and aesthetic enhancements, and the utilization of Advanced Image and Advanced Video components. These topics provide a deeper insight, which you’ll have the opportunity to delve into should you choose to enroll in the course!<\/p>\n\n\n\n

Conclusion<\/strong><\/h2>\n\n\n\n

React’s core concepts are relatively easy to learn, especially for developers who are already familiar with JavaScript and HTML. This lowers the entry barrier for newcomers and allows you to quickly start building user interfaces. <\/p>\n\n\n\n

I’ve personally loved diving deeper into the React realm, and recommend you do as well!<\/p>\n\n\n\n

P.S. Want to talk more about using React with Cloudinary? Head over to the Cloudinary Community forums<\/a> or Discord<\/a> and get all your questions answered!<\/p>\n","protected":false},"excerpt":{"rendered":"

Recently, I sharpened my React skills while creating a new course for our Cloudinary Academy. My experiences building this course solidified my love for React, and I believe learning to work with it alongside Cloudinary can offer immense advantages for developers engaged with media-rich applications or projects. What Is React and Why Is It Important? […]<\/p>\n","protected":false},"author":87,"featured_media":31122,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[124],"class_list":["post-31121","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-frameworks"],"acf":[],"yoast_head":"\nLearn React and Cloudinary with the Playground<\/title>\n<meta name=\"description\" content=\"The Cloudinary React SDK Playground is a free learning tool that enables developers to learn how to use React and Cloudinary to build media-rich applications. Experiment with code samples, learn about upload presets, and see the results instantly.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using React and Cloudinary in the \u2018Playground\u2019\" \/>\n<meta property=\"og:description\" content=\"The Cloudinary React SDK Playground is a free learning tool that enables developers to learn how to use React and Cloudinary to build media-rich applications. Experiment with code samples, learn about upload presets, and see the results instantly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-12T14:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1694195680\/Blog-react-cloudinary-playground\/Blog-react-cloudinary-playground.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Using React and Cloudinary in the \u2018Playground\u2019\",\"datePublished\":\"2023-09-12T14:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground\"},\"wordCount\":891,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1694195680\/Blog-react-cloudinary-playground\/Blog-react-cloudinary-playground.jpg?_i=AA\",\"keywords\":[\"Frameworks\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground\",\"url\":\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground\",\"name\":\"Learn React and Cloudinary with the Playground\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1694195680\/Blog-react-cloudinary-playground\/Blog-react-cloudinary-playground.jpg?_i=AA\",\"datePublished\":\"2023-09-12T14:00:00+00:00\",\"description\":\"The Cloudinary React SDK Playground is a free learning tool that enables developers to learn how to use React and Cloudinary to build media-rich applications. Experiment with code samples, learn about upload presets, and see the results instantly.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1694195680\/Blog-react-cloudinary-playground\/Blog-react-cloudinary-playground.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1694195680\/Blog-react-cloudinary-playground\/Blog-react-cloudinary-playground.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using React and Cloudinary in the \u2018Playground\u2019\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Learn React and Cloudinary with the Playground","description":"The Cloudinary React SDK Playground is a free learning tool that enables developers to learn how to use React and Cloudinary to build media-rich applications. Experiment with code samples, learn about upload presets, and see the results instantly.","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:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground","og_locale":"en_US","og_type":"article","og_title":"Using React and Cloudinary in the \u2018Playground\u2019","og_description":"The Cloudinary React SDK Playground is a free learning tool that enables developers to learn how to use React and Cloudinary to build media-rich applications. Experiment with code samples, learn about upload presets, and see the results instantly.","og_url":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground","og_site_name":"Cloudinary Blog","article_published_time":"2023-09-12T14:00:00+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1694195680\/Blog-react-cloudinary-playground\/Blog-react-cloudinary-playground.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Using React and Cloudinary in the \u2018Playground\u2019","datePublished":"2023-09-12T14:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground"},"wordCount":891,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1694195680\/Blog-react-cloudinary-playground\/Blog-react-cloudinary-playground.jpg?_i=AA","keywords":["Frameworks"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground","url":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground","name":"Learn React and Cloudinary with the Playground","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1694195680\/Blog-react-cloudinary-playground\/Blog-react-cloudinary-playground.jpg?_i=AA","datePublished":"2023-09-12T14:00:00+00:00","description":"The Cloudinary React SDK Playground is a free learning tool that enables developers to learn how to use React and Cloudinary to build media-rich applications. Experiment with code samples, learn about upload presets, and see the results instantly.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1694195680\/Blog-react-cloudinary-playground\/Blog-react-cloudinary-playground.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1694195680\/Blog-react-cloudinary-playground\/Blog-react-cloudinary-playground.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/using-react-cloudinary-playground#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using React and Cloudinary in the \u2018Playground\u2019"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1694195680\/Blog-react-cloudinary-playground\/Blog-react-cloudinary-playground.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=31121"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31121\/revisions"}],"predecessor-version":[{"id":31128,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31121\/revisions\/31128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/31122"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=31121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=31121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=31121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}