CINXE.COM
Sanity
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="initial-scale=1.0, width=device-width" data-next-head=""/><title data-next-head="">Build your first blog using React | Sanity.io guide</title><link rel="canonical" href="https://www.sanity.io/guides/build-your-first-blog-using-react" data-next-head=""/><meta name="robots" content="max-image-preview:large" data-next-head=""/><meta name="description" content="Build a blog in React from scratch! We'll use Sanity for the content management and Tailwind CSS for styling." data-next-head=""/><meta property="og:description" content="Build a blog in React from scratch! We'll use Sanity for the content management and Tailwind CSS for styling." data-next-head=""/><meta property="og:type" content="website" data-next-head=""/><meta property="og:image" content="https://cdn.sanity.io/images/81pocpw8/production/2dba700ab39b0e359b07d22b6c76113480cd5c9e-1200x630.png?w=1200&h=630&fit=max&auto=format" data-next-head=""/><meta property="og:url" content="https://www.sanity.io/guides/build-your-first-blog-using-react" data-next-head=""/><meta property="og:site_name" content="Sanity.io" data-next-head=""/><meta property="og:title" content="Build your first blog using React | Sanity.io guide" data-next-head=""/><link rel="search" type="application/opensearchdescription+xml" title="Sanity.io" href="/opensearch.xml" data-next-head=""/><meta name="environment" content="production" class="jsx-2714c7d3fb32772"/><link rel="preconnect" href="https://cdn.sanity.io" class="jsx-2714c7d3fb32772"/><link rel="preconnect" href="https://3do82whm.apicdn.sanity.io" class="jsx-2714c7d3fb32772"/><meta name="google-site-verification" content="RjrkDVDuEpQIbe4iNq9LjZKuvTwlJCADdY1jZNjuItY" class="jsx-2714c7d3fb32772"/><meta name="google-site-verification" content="6axnRgH1VVzoyqB3J4uGuOQ98xzHBmAIEaHKWdVCBXg" class="jsx-2714c7d3fb32772"/><link rel="apple-touch-icon" sizes="57x57" href="/static/images/favicons/apple-icon-57x57.png" class="jsx-2714c7d3fb32772"/><link rel="apple-touch-icon" sizes="60x60" href="/static/images/favicons/apple-icon-60x60.png" class="jsx-2714c7d3fb32772"/><link rel="apple-touch-icon" sizes="72x72" href="/static/images/favicons/apple-icon-72x72.png" class="jsx-2714c7d3fb32772"/><link rel="apple-touch-icon" sizes="76x76" href="/static/images/favicons/apple-icon-76x76.png" class="jsx-2714c7d3fb32772"/><link rel="apple-touch-icon" sizes="114x114" href="/static/images/favicons/apple-icon-114x114.png" class="jsx-2714c7d3fb32772"/><link rel="apple-touch-icon" sizes="120x120" href="/static/images/favicons/apple-icon-120x120.png" class="jsx-2714c7d3fb32772"/><link rel="apple-touch-icon" sizes="144x144" href="/static/images/favicons/apple-icon-144x144.png" class="jsx-2714c7d3fb32772"/><link rel="apple-touch-icon" sizes="152x152" href="/static/images/favicons/apple-icon-152x152.png" class="jsx-2714c7d3fb32772"/><link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicons/apple-icon-180x180.png" class="jsx-2714c7d3fb32772"/><link rel="mask-icon" href="/static/images/favicons/safari-pinned-tab.svg" color="black" class="jsx-2714c7d3fb32772"/><link rel="icon" type="image/png" sizes="192x192" href="/static/images/favicons/android-icon-192x192.png" class="jsx-2714c7d3fb32772"/><link rel="icon" type="image/png" sizes="96x96" href="/static/images/favicons/favicon-96x96.png" class="jsx-2714c7d3fb32772"/><link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicons/favicon-32x32.png" class="jsx-2714c7d3fb32772"/><link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicons/favicon-16x16.png" class="jsx-2714c7d3fb32772"/><meta name="msapplication-TileColor" content="#ffffff" class="jsx-2714c7d3fb32772"/><meta name="msapplication-TileImage" content="/static/images/favicons/mstile-144x144.png" class="jsx-2714c7d3fb32772"/><meta name="twitter:card" content="summary_large_image" class="jsx-2714c7d3fb32772"/><meta name="twitter:site" content="@sanity_io" class="jsx-2714c7d3fb32772"/><meta name="theme-color" content="#ffffff" class="jsx-2714c7d3fb32772"/><link rel="preload" href="/_next/static/media/01c57da814b41df8-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/5ef93f5e07bf2f1e-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/c2aec037506091d0-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/91ac4c87c1eddfa9.css" as="style"/><link rel="preload" href="/_next/static/css/30e25a13305ea743.css" as="style"/><link rel="preload" href="/_next/static/css/d34bd64d52bdd6b8.css" as="style"/><link rel="preload" href="/_next/static/css/6a46f2db51c17549.css" as="style"/><link rel="preload" href="/_next/static/css/caf91dade7acd216.css" as="style"/><link rel="preload" href="/_next/static/css/80d36504c0739d47.css" as="style"/><link rel="preload" href="/_next/static/css/ce380756910f7b0c.css" as="style"/><script type="application/ld+json" data-next-head="">{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://www.sanity.io/guides/build-your-first-blog-using-react","mainEntityOfPage":"https://www.sanity.io/guides/build-your-first-blog-using-react","dateCreated":"2020-08-26T21:31:40.000Z","datePublished":"2020-08-26T21:31:40.000Z","dateModified":"2022-12-05T16:54:30.000Z","headline":"Build your first blog using React","description":"Build a blog in React from scratch! We'll use Sanity for the content management and Tailwind CSS for styling.","publisher":{"@type":"Organization","@id":"https://www.sanity.io#organization","name":"Sanity","alternateName":["Sanity.io","Sanity CMS","Sanity io"],"description":"Headless CMS","url":"https://www.sanity.io","logo":"https://www.sanity.io/static/images/logo_rounded_square.png","foundingDate":"1995","foundingLocation":{"@type":"Place","address":{"@type":"PostalAddress","addressLocality":"Oslo","addressCountry":"Norway"}},"location":[{"@type":"Place","address":{"@type":"PostalAddress","streetAddress":"Trondheimsveien","postalCode":"0560","addressLocality":"Oslo","addressCountry":"Norway"}},{"@type":"Place","address":{"@type":"PostalAddress","streetAddress":"695 Minna St","postalCode":"CA 94103","addressLocality":"San Francisco","addressCountry":"United States"}}],"sameAs":["https://www.facebook.com/sanityapi","https://github.com/sanity-io","https://twitter.com/sanity_io","https://www.linkedin.com/company/sanity-io","https://www.youtube.com/channel/UCGz69JwGRptteFAaX8hSKCQ","https://www.wikidata.org/wiki/Q56242360"],"contactPoint":[{"@type":"ContactPoint","url":"https://slack.sanity.io","email":"support@sanity.io","contactType":"customer service"},{"@type":"ContactPoint","url":"https://www.sanity.io/contact/sales","contactType":"Sales","email":"sales@sanity.io"}]},"image":"https://cdn.sanity.io/images/81pocpw8/production/41c8595944d919ef3289d24eb5884bf9b5385ab0-1200x900.jpg?rect=0,136,1200,628&w=1200&h=628&fit=max&auto=format","author":[{"@type":"Person","@id":"https://www.sanity.io/exchange/community/kapehe","name":"Kapehe","address":"Las Vegas, NV","url":"https://www.sanity.io/exchange/community/kapehe"}]}</script><script type="application/ld+json" data-next-head="">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Exchange","item":"https://www.sanity.io/exchange"},{"@type":"ListItem","position":2,"name":"Guides","item":"https://www.sanity.io/guides"},{"@type":"ListItem","position":3,"name":"Build your first blog using React","item":"https://www.sanity.io/guides/build-your-first-blog-using-react"}]}</script><style data-next-head="">html { scroll-behavior: initial; }</style><link rel="stylesheet" href="/static/styles/cookie-banner.css" class="jsx-2714c7d3fb32772"/><script id="gtag" data-nscript="beforeInteractive">window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("consent", "default", { ad_storage: "denied", analytics_storage: "denied", ad_user_data: "denied", ad_personalization: "denied", wait_for_update: 500, }); gtag("set", "ads_data_redaction", true); </script><script id="osano" data-nscript="beforeInteractive"> ;(function(w,o,d){w[o]=w[o]||function(){w[o][d].push(arguments)};w[o][d]=w[o][d]||[]})(window,'Osano','data'); window.Osano('onInitialized', () => document.getElementsByClassName('osano-cm-window')[0].style.display = 'none'); </script><link rel="stylesheet" href="/_next/static/css/91ac4c87c1eddfa9.css" data-n-g=""/><link rel="stylesheet" href="/_next/static/css/30e25a13305ea743.css"/><link rel="stylesheet" href="/_next/static/css/d34bd64d52bdd6b8.css" data-n-p=""/><link rel="stylesheet" href="/_next/static/css/6a46f2db51c17549.css" data-n-p=""/><link rel="stylesheet" href="/_next/static/css/caf91dade7acd216.css"/><link rel="stylesheet" href="/_next/static/css/80d36504c0739d47.css"/><link rel="stylesheet" href="/_next/static/css/ce380756910f7b0c.css"/><noscript data-n-css=""></noscript><script defer="" noModule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="https://cmp.osano.com/16CLWDTCcnYWI2HHP/e53d2bde-32d5-45a1-ab1a-16b98951bfe3/osano.js" defer="" data-nscript="beforeInteractive"></script><script defer="" src="/_next/static/chunks/10943-8feccefedf8f1d4e.js"></script><script defer="" src="/_next/static/chunks/3794-ed89c6340bdf07d6.js"></script><script defer="" src="/_next/static/chunks/46200.1913b0a605096117.js"></script><script defer="" src="/_next/static/chunks/75142-d1bf9d58ee8a1a03.js"></script><script defer="" src="/_next/static/chunks/61480.20254e493396b34e.js"></script><script defer="" src="/_next/static/chunks/14999.ebbe3c187319bb6a.js"></script><script defer="" src="/_next/static/chunks/33722-cfd25854bf08eeb2.js"></script><script defer="" src="/_next/static/chunks/13032-64236023d0dc5a6d.js"></script><script defer="" src="/_next/static/chunks/1823.d127005d51464ac9.js"></script><script defer="" src="/_next/static/chunks/34764.f8730b947f9e1f95.js"></script><script defer="" src="/_next/static/chunks/60020.a9af0a7b81290d53.js"></script><script src="/_next/static/chunks/webpack-33e85ace1ab3f632.js" defer=""></script><script src="/_next/static/chunks/framework-2c61adb8fe593fa3.js" defer=""></script><script src="/_next/static/chunks/main-4902afb7aa7ee8ae.js" defer=""></script><script src="/_next/static/chunks/pages/_app-fc8e60bdd1d16a02.js" defer=""></script><script src="/_next/static/chunks/8d108150-51cc69c11789d029.js" defer=""></script><script src="/_next/static/chunks/11881-c0cf2305c43f9602.js" defer=""></script><script src="/_next/static/chunks/36533-1e462b69f3a44757.js" defer=""></script><script src="/_next/static/chunks/91901-b4752e57a0d86dcc.js" defer=""></script><script src="/_next/static/chunks/17892-88e138644852ea58.js" defer=""></script><script src="/_next/static/chunks/62992-549e0507931ab4a8.js" defer=""></script><script src="/_next/static/chunks/82661-66f3a6f4240d5a7e.js" defer=""></script><script src="/_next/static/chunks/48876-fe35f4204353e605.js" defer=""></script><script src="/_next/static/chunks/62882-40eac0b6b752f8a3.js" defer=""></script><script src="/_next/static/chunks/3511-746bed10b4243988.js" defer=""></script><script src="/_next/static/chunks/36288-2f1958aa29c7886e.js" defer=""></script><script src="/_next/static/chunks/40927-e072c31e77949e79.js" defer=""></script><script src="/_next/static/chunks/74529-13187eeb80c0665e.js" defer=""></script><script src="/_next/static/chunks/14875-6d1dd87d0fd00584.js" defer=""></script><script src="/_next/static/chunks/99213-9bf0394577ea3429.js" defer=""></script><script src="/_next/static/chunks/38637-36b248e61ab24101.js" defer=""></script><script src="/_next/static/chunks/pages/guides/%5Bslug%5D-60c2f9c8a5b96584.js" defer=""></script><script src="/_next/static/tHAV_nbC5mYoh3m6OFvdw/_buildManifest.js" defer=""></script><script src="/_next/static/tHAV_nbC5mYoh3m6OFvdw/_ssgManifest.js" defer=""></script></head><body><div id="__next"><script>!function(){try{var d=document.documentElement,n='data-theme',s='setAttribute';var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';d[s](n,'dark')}else{d.style.colorScheme = 'light';d[s](n,'light')}}else if(e){d[s](n,e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()</script><div id="sanity-io-container" class="__variable_b1c180 __variable_704ecf __variable_115f82 sanity-io-container" data-announcement-banner="true"><div class="SkipToContent_skipToContent__gxXR4"><a class="SkipToContent_skipToContentLink__S33ZI shared_primaryButton__JzTUh shared_button__GdPAZ shared_baseButton__3OPoI shared_hairline2__qAj6m shared_resetButton__jHRBh shared_box__eqBFk shared_borderRadius__O_jrc shared_focusOutlineOutside__RZab5" href="#mainContentBlock">Skip to content</a></div><a class="AnnouncementBanner_root__FazP5" href="/events/builder-talk-lady-gaga?utm_source=banner">🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now<!-- --> <svg data-sanity-icon="arrow-right" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="#F36458"><path d="M19.5 12.5H5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path><path d="M14 7L19.5 12.5L14 18" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></a><header class="Navbar_root__7EAPN" role="navigation" aria-label="Navigation bar" data-open="false"><div class="Navbar_navContainer__351h_"><a class="LogoMenu_logoLink__AmrSm" type="button" id="radix-:R1b6sm:" aria-haspopup="menu" aria-expanded="false" data-state="closed" href="/"><svg viewBox="0 0 105 22" xmlns="http://www.w3.org/2000/svg" height="1em" fill="none"><title>Sanity</title><path opacity="0.7" d="M78.1793 7.99261V21.0028H73.9031V10.2138L78.1793 7.99261Z" fill="currentColor"></path><path opacity="0.7" d="M20.9511 21.33L30.944 16.1051L29.7121 12.9141L23.1332 15.9821L20.9511 21.33Z" fill="currentColor"></path><path opacity="0.5" d="M73.9031 10.2027L84.7443 4.65477L82.9126 1.5571L73.9031 5.95997V10.2027Z" fill="currentColor"></path><path opacity="0.7" d="M43.3705 6.96233V21.0028H39.2927V1.00714L43.3705 6.96233Z" fill="currentColor"></path><path opacity="0.5" d="M27.1299 6.18617L20.9511 21.33L17.7731 18.5943L25.1353 1.00714L27.1299 6.18617Z" fill="currentColor"></path><path d="M25.1353 1.00714H29.3477L37.1386 21.0028H32.8269L25.1353 1.00714Z" fill="currentColor"></path><path d="M44.0012 1.00714L52.9824 14.6682V21.0028L39.2927 1.00714H44.0012Z" fill="currentColor"></path><path d="M64.9183 1.00714H60.6739V21.0063H64.9183V1.00714Z" fill="currentColor"></path><path d="M73.9031 4.65474H67.37V1.00714H82.5867L84.7443 4.65474H78.1793H73.9031Z" fill="currentColor"></path><path opacity="0.5" d="M97.2754 13.4153V21.0028H93.0629V13.4153" fill="currentColor"></path><path d="M93.0629 13.4152L100.191 1.00714H104.666L97.2754 13.4152H93.0629Z" fill="currentColor"></path><path opacity="0.7" d="M93.063 13.4152L85.7363 1.00714H90.3456L95.3092 9.51008L93.063 13.4152Z" fill="currentColor"></path><path d="M1.96126 3.31479C1.96126 6.09921 3.71145 7.75595 7.21536 8.62956L10.9283 9.47533C14.2444 10.2236 16.2639 12.0822 16.2639 15.1103C16.2897 16.4295 15.8531 17.7173 15.0274 18.7579C15.0274 15.7368 13.4367 14.1044 9.59972 13.1229L5.95409 12.3085C3.03475 11.6541 0.781478 10.1262 0.781478 6.83709C0.766123 5.56693 1.18116 4.32781 1.96126 3.31479" fill="currentColor"></path><path opacity="0.7" d="M52.9824 13.6415V1.00714H57.0602V21.0028H52.9824V13.6415Z" fill="currentColor"></path><path opacity="0.7" d="M12.7458 14.3689C14.3294 15.3643 15.0238 16.7565 15.0238 18.7544C13.713 20.4041 11.4101 21.33 8.70333 21.33C4.14718 21.33 0.958577 19.1268 0.25 15.2982H4.62547C5.18878 17.0559 6.68034 17.8703 8.67144 17.8703C11.1019 17.8703 12.7174 16.5964 12.7493 14.3619" fill="currentColor"></path><path opacity="0.7" d="M4.23567 7.44267C3.5125 7.02045 2.9192 6.41375 2.51873 5.68697C2.11827 4.96019 1.92558 4.14045 1.96113 3.31476C3.22594 1.67891 5.42608 0.679993 8.10804 0.679993C12.7492 0.679993 15.4347 3.08852 16.0972 6.47856H11.8883C11.4242 5.14203 10.2621 4.10136 8.14347 4.10136C5.87957 4.10136 4.33487 5.39611 4.24629 7.44267" fill="currentColor"></path></svg></a><nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="Navbar_desktopNav__H6xsC"><div style="position:relative"><ul data-orientation="horizontal" class="Navbar_menuList__X4ez5" dir="ltr"><li><ul class="Navbar_menu__en5J6 shared_resetList__sPSb0 shared_reset__i9XcS"><li><button id="radix-:R2b6sm:-trigger-radix-:Raqb6sm:" data-state="closed" aria-expanded="false" aria-controls="radix-:R2b6sm:-content-radix-:Raqb6sm:" class="Navbar_menuTrigger__jhlm4 shared_text3__MQrA6 shared_resetButton__jHRBh" data-radix-collection-item="">Product<svg fill="none" height="14" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="14" style="color:currentColor" class="Navbar_chevronDown__BsZjb" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg></button><div id="radix-:R2b6sm:-content-radix-:Raqb6sm:" aria-labelledby="radix-:R2b6sm:-trigger-radix-:Raqb6sm:" data-orientation="horizontal" data-state="closed" class="Navbar_menuContent__fUmUY" style="pointer-events:none" dir="ltr"><div class="Navbar_menuContainer__Qii8x"><div class="MenuSection_root__ZNjkl"><h2 class="MenuSection_sectionTitle__g9pr0 shared_fg4__8eU1H shared_label__Ytarj shared_label_base__ALIe4">Platform</h2><div class="MenuSection_sectionList__fmYEN shared_resetList__sPSb0 shared_reset__i9XcS"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/studio"><div><div class="MenuItem_title__JSr_6">Sanity Studio<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Flexible editing environment</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/developer-experience"><div><div class="MenuItem_title__JSr_6">APIs<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Connect to anything</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/content-lake"><div><div class="MenuItem_title__JSr_6">Content Lake<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Fully decoupled back end</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/create?ref=navbar"><div><div class="MenuItem_title__JSr_6">Sanity Create<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Better writing experience</p></div></a></div><div class="MenuSection_bottomCta__9gPot"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/demos/studio?ref=navbar"><div><div class="MenuItem_title__JSr_6">Try product demo<!-- --> <svg data-sanity-icon="arrow-right" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block" color="#F36458"><path d="M19.5 12.5H5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path><path d="M14 7L19.5 12.5L14 18" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></div></div></a></div></div><div class="MenuSection_root__ZNjkl"><h2 class="MenuSection_sectionTitle__g9pr0 shared_fg4__8eU1H shared_label__Ytarj shared_label_base__ALIe4">Features</h2><div class="MenuSection_sectionList__fmYEN shared_resetList__sPSb0 shared_reset__i9XcS"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/solution/collaboration"><div><div class="MenuItem_title__JSr_6">Real-time collaboration<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Fearlessly work with content</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/docs/how-queries-work"><div><div class="MenuItem_title__JSr_6">Precise content querying<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Treat content as data with GROQ</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/solution/localization"><div><div class="MenuItem_title__JSr_6">Localization<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Coherent messaging across territories</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/ai-assist"><div><div class="MenuItem_title__JSr_6">AI Assist<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Built-in AI assistant</p></div></a></div></div></div></div></li><li><button id="radix-:R2b6sm:-trigger-radix-:Riqb6sm:" data-state="closed" aria-expanded="false" aria-controls="radix-:R2b6sm:-content-radix-:Riqb6sm:" class="Navbar_menuTrigger__jhlm4 shared_text3__MQrA6 shared_resetButton__jHRBh" data-radix-collection-item="">Solutions<svg fill="none" height="14" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="14" style="color:currentColor" class="Navbar_chevronDown__BsZjb" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg></button><div id="radix-:R2b6sm:-content-radix-:Riqb6sm:" aria-labelledby="radix-:R2b6sm:-trigger-radix-:Riqb6sm:" data-orientation="horizontal" data-state="closed" class="Navbar_menuContent__fUmUY" style="pointer-events:none" dir="ltr"><div class="Navbar_menuContainer__Qii8x"><div class="MenuSection_root__ZNjkl"><h2 class="MenuSection_sectionTitle__g9pr0 shared_fg4__8eU1H shared_label__Ytarj shared_label_base__ALIe4">Use cases</h2><div class="MenuSection_sectionList__fmYEN shared_resetList__sPSb0 shared_reset__i9XcS"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/solution/e-commerce"><div><div class="MenuItem_title__JSr_6">E-commerce<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Richer shopping experiences</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/solution/marketing"><div><div class="MenuItem_title__JSr_6">Marketing sites<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Control your story</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/solution/products-services"><div><div class="MenuItem_title__JSr_6">Products & services<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Innovate and automate</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/solution/mobile-apps"><div><div class="MenuItem_title__JSr_6">Mobile apps<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Content backend for every OS</p></div></a></div><div class="MenuSection_bottomCta__9gPot"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/solutions"><div><div class="MenuItem_title__JSr_6">View all<!-- --> <svg data-sanity-icon="arrow-right" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block" color="#F36458"><path d="M19.5 12.5H5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path><path d="M14 7L19.5 12.5L14 18" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></div></div></a></div></div><div class="MenuSection_root__ZNjkl"><h2 class="MenuSection_sectionTitle__g9pr0 shared_fg4__8eU1H shared_label__Ytarj shared_label_base__ALIe4">Integrations</h2><div class="MenuSection_sectionGrid__YD2Ox shared_resetList__sPSb0 shared_reset__i9XcS"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/shopify"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:0.8776041666666666"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:113.94658753709199%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/9bf6b9c4709e49f6f4bf095dc0e41224fd175027-337x384.svg?h=23&fit=max&auto=format" alt="Shopify icon" loading="lazy" width="20" height="23" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Shopify<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/technology-partners/mux"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:3.090909090909091"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:32.35294117647059%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/3f5108155bb69d40d75aa87de948917045d41abd-102x33.svg?h=6&fit=max&auto=format" alt="Mux icon" loading="lazy" width="20" height="6" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Mux<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/technology-partners/vercel"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconDark__PqSiv Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.155"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:86.58008658008657%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/a34029c180ece128552e9d9679027a8afa48ae11-1155x1000.svg?h=17&fit=max&auto=format" alt="Vercel icon" loading="lazy" width="20" height="17" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.155"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:86.58008658008657%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/45a81b836dbb912b62b29b01b45954ef2948ae91-1155x1000.svg?h=17&fit=max&auto=format" alt="Vercel icon" loading="lazy" width="20" height="17" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Vercel<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/technology-partners/netlify"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconDark__PqSiv Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.1327433628318584"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:88.28125%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/24152f4f3fed326b8a2c5788393f53e8cecd4707-128x113.svg?h=18&fit=max&auto=format" alt="Netlify icon" loading="lazy" width="20" height="18" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.1327433628318584"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:88.28125%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/0c35632d74ac27f807b72d4e22f3276ef223091a-128x113.svg?h=18&fit=max&auto=format" alt="Netlify icon" loading="lazy" width="20" height="18" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Netlify<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/technology-partners/algolia"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/ae86b4b4fd1df833c37cfd4d651cb407366ceca7-512x512.svg?h=20&fit=max&auto=format" alt="Algolia icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Algolia<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/technology-partners/cloudinary"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.5309734513274336"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:65.31791907514452%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/6a645de167fec7716f99fd9de5fff6e87918b99f-173x113.svg?h=13&fit=max&auto=format" alt="Cloudinary icon" loading="lazy" width="20" height="13" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Cloudinary<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/technology-partners/bigcommerce"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconDark__PqSiv Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/52b0db077b96d52ee119fe4da7155537bf99d24f-167x167.svg?h=20&fit=max&auto=format" alt="BigCommerce icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/47d42c4fa3624d6ea85fc69f1bfb11c3ed521e63-167x167.svg?h=20&fit=max&auto=format" alt="BigCommerce icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">BigCommerce<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/technology-partners/commercelayer"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconDark__PqSiv Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.0038461538461538"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:99.61685823754789%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/25577d454c204896a36753b076126cd72039de1a-261x260.svg?h=20&fit=max&auto=format" alt="Commerce Layer icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.0038461538461538"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:99.61685823754789%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/4b535960a5e22bbdf3bc8b601d95fbd215d4780e-261x260.svg?h=20&fit=max&auto=format" alt="Commerce Layer icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Commerce Layer<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/technology-partners/smartling"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/f4dd7e2dcdf8fe6d492fffd0d4ecb40598193b9e-256x256.svg?h=20&fit=max&auto=format" alt="Smartling icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Smartling<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/technology-partners/transifex"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconDark__PqSiv Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/4cb60b175710d371792131799138bbe6491f9c1b-512x512.svg?h=20&fit=max&auto=format" alt="Transifex icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/421d11ba972c786ace687e25ea06da6ea721b316-512x512.svg?h=20&fit=max&auto=format" alt="Transifex icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Transifex<!-- --> </div></div></a></div><div class="MenuSection_bottomCta__9gPot"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/technology-partners"><div><div class="MenuItem_title__JSr_6">View all<!-- --> <svg data-sanity-icon="arrow-right" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block" color="#F36458"><path d="M19.5 12.5H5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path><path d="M14 7L19.5 12.5L14 18" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></div></div></a></div></div></div></div></li><li><button id="radix-:R2b6sm:-trigger-radix-:Rqqb6sm:" data-state="closed" aria-expanded="false" aria-controls="radix-:R2b6sm:-content-radix-:Rqqb6sm:" class="Navbar_menuTrigger__jhlm4 shared_text3__MQrA6 shared_resetButton__jHRBh" data-radix-collection-item="">Developers<svg fill="none" height="14" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="14" style="color:currentColor" class="Navbar_chevronDown__BsZjb" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg></button><div id="radix-:R2b6sm:-content-radix-:Rqqb6sm:" aria-labelledby="radix-:R2b6sm:-trigger-radix-:Rqqb6sm:" data-orientation="horizontal" data-state="closed" class="Navbar_menuContent__fUmUY" style="pointer-events:none" dir="ltr"><div class="Navbar_menuContainer__Qii8x"><div class="MenuSection_root__ZNjkl"><h2 class="MenuSection_sectionTitle__g9pr0 shared_fg4__8eU1H shared_label__Ytarj shared_label_base__ALIe4">Learn</h2><div class="MenuSection_sectionList__fmYEN shared_resetList__sPSb0 shared_reset__i9XcS"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/docs"><div><div class="MenuItem_title__JSr_6">Documentation<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/learn?ref=navbar"><div><div class="MenuItem_title__JSr_6">Courses<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/guides"><div><div class="MenuItem_title__JSr_6">Guides<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/docs/reference"><div><div class="MenuItem_title__JSr_6">API reference<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/ui"><div><div class="MenuItem_title__JSr_6">Sanity UI<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/docs/query-cheat-sheet"><div><div class="MenuItem_title__JSr_6">GROQ cheat sheet<!-- --> </div></div></a></div><div class="MenuSection_bottomCta__9gPot"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/get-started?ref=navbar-dev"><div><div class="MenuItem_title__JSr_6">Get started<!-- --> <svg data-sanity-icon="arrow-right" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block" color="#F36458"><path d="M19.5 12.5H5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path><path d="M14 7L19.5 12.5L14 18" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></div></div></a></div></div><div class="MenuSection_root__ZNjkl"><h2 class="MenuSection_sectionTitle__g9pr0 shared_fg4__8eU1H shared_label__Ytarj shared_label_base__ALIe4">Build and share</h2><div class="MenuSection_sectionList__fmYEN shared_resetList__sPSb0 shared_reset__i9XcS"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/templates"><div><div class="MenuItem_title__JSr_6">Templates<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/plugins"><div><div class="MenuItem_title__JSr_6">Tools and plugins<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/schemas"><div><div class="MenuItem_title__JSr_6">Schemas and snippets<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/projects"><div><div class="MenuItem_title__JSr_6">Project showcase<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" target="_blank" href="https://community.sanity.tools/"><div><div class="MenuItem_title__JSr_6">Share your work<!-- --> </div></div></a></div><div class="MenuSection_bottomCta__9gPot"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange"><div><div class="MenuItem_title__JSr_6">Browse Exchange<!-- --> <svg data-sanity-icon="arrow-right" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block" color="#F36458"><path d="M19.5 12.5H5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path><path d="M14 7L19.5 12.5L14 18" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></div></div></a></div></div><div class="MenuSection_root__ZNjkl"><h2 class="MenuSection_sectionTitle__g9pr0 shared_fg4__8eU1H shared_label__Ytarj shared_label_base__ALIe4">Frameworks</h2><div class="MenuSection_sectionGrid__YD2Ox shared_resetList__sPSb0 shared_reset__i9XcS"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange/framework=react"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/927baf1ce68df63ec3a59eb1c0fbb4e7442722ef-48x48.svg?h=20&fit=max&auto=format" alt="React icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">React<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange/framework=vue"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/c6b479007ccaa0aa08c3032fc1cb368b2fffff23-48x48.svg?h=20&fit=max&auto=format" alt="Vue icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Vue<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange/framework=nextjs"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconDark__PqSiv Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/a8dcfef47cf5288b5baf2658c65c323e5b96bef4-180x180.svg?h=20&fit=max&auto=format" alt="Next.js icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/582a59c0eb08fff797225db48bf36f72b8d888a7-180x180.svg?h=20&fit=max&auto=format" alt="Next.js icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Next.js<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange/framework=nuxt"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/0e6ed17a14c915204a19a2d072ae017fccc06bba-900x900.svg?h=20&fit=max&auto=format" alt="Nuxt.js icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Nuxt.js<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange/framework=svelte"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:0.9791666666666666"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:102.12765957446808%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/4faaedf0321b47108141744556d770a93933bc83-47x48.svg?h=20&fit=max&auto=format" alt="Svelte icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Svelte<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange/framework=remix"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/59de1b788d6666a4e64958d92a28010addede8f1-800x800.svg?h=20&fit=max&auto=format" alt="Remix icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Remix<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange/framework=gatsby"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/6bdcdafeba3c1746a017fbf851267cae560fddaa-48x48.svg?h=20&fit=max&auto=format" alt="Gatsby icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Gatsby<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange/framework=astro"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconDark__PqSiv Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.00078125"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:99.92193598750977%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/ecbde5b899fc5fba4e3e89e87be3cd1b3aa48db6-1281x1280.svg?h=20&fit=max&auto=format" alt="Astro icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/fe00bda132fc027c021e7b91eb0748041676c781-1280x1280.svg?h=20&fit=max&auto=format" alt="Astro icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Astro<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange/framework=angular"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/55422b54446d6aab92ce4fd2d06cf691c837250c-48x48.svg?h=20&fit=max&auto=format" alt="Angular icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Angular<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange/framework=11ty"><div class="MenuItem_iconWrapper__sPTEW"><div class="MenuItem_iconDark__PqSiv Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/1bb4f3d4476d59a1e801ebb059a030b9bd741c1a-48x48.svg?h=20&fit=max&auto=format" alt="Eleventy icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div><div class="MenuItem_iconLight__dRlMc Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/3do82whm/next/f35812cf780e6fba6e50447d476142b3d49c5c71-48x48.svg?h=20&fit=max&auto=format" alt="Eleventy icon" loading="lazy" width="20" height="20" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div><div class="MenuItem_title__JSr_6">Eleventy<!-- --> </div></div></a></div><div class="MenuSection_bottomCta__9gPot"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/exchange/frameworks"><div><div class="MenuItem_title__JSr_6">View all<!-- --> <svg data-sanity-icon="arrow-right" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block" color="#F36458"><path d="M19.5 12.5H5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path><path d="M14 7L19.5 12.5L14 18" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></div></div></a></div></div></div></div></li><li><button id="radix-:R2b6sm:-trigger-radix-:R12qb6sm:" data-state="closed" aria-expanded="false" aria-controls="radix-:R2b6sm:-content-radix-:R12qb6sm:" class="Navbar_menuTrigger__jhlm4 shared_text3__MQrA6 shared_resetButton__jHRBh" data-radix-collection-item="">Resources<svg fill="none" height="14" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="14" style="color:currentColor" class="Navbar_chevronDown__BsZjb" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg></button><div id="radix-:R2b6sm:-content-radix-:R12qb6sm:" aria-labelledby="radix-:R2b6sm:-trigger-radix-:R12qb6sm:" data-orientation="horizontal" data-state="closed" class="Navbar_menuContent__fUmUY" style="pointer-events:none" dir="ltr"><div class="Navbar_menuContainer__Qii8x"><div class="MenuSection_root__ZNjkl"><h2 class="MenuSection_sectionTitle__g9pr0 shared_fg4__8eU1H shared_label__Ytarj shared_label_base__ALIe4">Discover</h2><div class="MenuSection_sectionList__fmYEN shared_resetList__sPSb0 shared_reset__i9XcS"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/blog"><div><div class="MenuItem_title__JSr_6">Blog<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/events?ref=navbar"><div><div class="MenuItem_title__JSr_6">Events<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/resources"><div><div class="MenuItem_title__JSr_6">Resource library<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/glossary"><div><div class="MenuItem_title__JSr_6">Glossary<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/agency-partners"><div><div class="MenuItem_title__JSr_6">Agency partners<!-- --> </div></div></a></div><div class="MenuSection_bottomCta__9gPot"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/contact/sales?ref=navbar-resources"><div><div class="MenuItem_title__JSr_6">Talk to sales<!-- --> <svg data-sanity-icon="arrow-right" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block" color="#F36458"><path d="M19.5 12.5H5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path><path d="M14 7L19.5 12.5L14 18" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></div></div></a></div></div><div class="MenuSection_root__ZNjkl"><h2 class="MenuSection_sectionTitle__g9pr0 shared_fg4__8eU1H shared_label__Ytarj shared_label_base__ALIe4">Customer stories</h2><div class="MenuSection_sectionList__fmYEN shared_resetList__sPSb0 shared_reset__i9XcS"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/customers/puma"><div><div class="MenuItem_title__JSr_6">Puma<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Source of truth for global markets</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/customers/tata"><div><div class="MenuItem_title__JSr_6">Tata Digital<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Scaling multi-brand e-commerce with composability</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/customers/morning-brew"><div><div class="MenuItem_title__JSr_6">Morning Brew<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Omnichannel media distribution</p></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/customers/aether"><div><div class="MenuItem_title__JSr_6">Aether<!-- --> </div><p class="MenuItem_subtitle__QLH_l shared_fg4__8eU1H shared_text4__vymfi">Unique digital shopping experience</p></div></a></div><div class="MenuSection_bottomCta__9gPot"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/customers?ref=navbar"><div><div class="MenuItem_title__JSr_6">View all<!-- --> <svg data-sanity-icon="arrow-right" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block" color="#F36458"><path d="M19.5 12.5H5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path><path d="M14 7L19.5 12.5L14 18" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></div></div></a></div></div><div class="MenuSection_root__ZNjkl"><h2 class="MenuSection_sectionTitle__g9pr0 shared_fg4__8eU1H shared_label__Ytarj shared_label_base__ALIe4">Popular guides</h2><div class="MenuSection_sectionList__fmYEN shared_resetList__sPSb0 shared_reset__i9XcS"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/headless-cms"><div><div class="MenuItem_title__JSr_6">Headless CMS<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/structured-content"><div><div class="MenuItem_title__JSr_6">Structured content<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/content-modeling"><div><div class="MenuItem_title__JSr_6">Content modeling<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/headless-seo"><div><div class="MenuItem_title__JSr_6">Headless SEO<!-- --> </div></div></a><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/static-websites"><div><div class="MenuItem_title__JSr_6">Static websites<!-- --> </div></div></a></div><div class="MenuSection_bottomCta__9gPot"><a class="MenuItem_root__2Dm0V shared_fg2__gvnW7 shared_text4__vymfi" data-radix-collection-item="" href="/resources"><div><div class="MenuItem_title__JSr_6">View all<!-- --> <svg data-sanity-icon="arrow-right" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block" color="#F36458"><path d="M19.5 12.5H5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path><path d="M14 7L19.5 12.5L14 18" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></div></div></a></div></div></div></div></li><li><a class="Navbar_menuLink__hzMAP shared_text3__MQrA6 shared_resetButton__jHRBh" data-radix-collection-item="" href="/customers?ref=navbar">Customers</a></li><li><a class="Navbar_menuLink__hzMAP shared_text3__MQrA6 shared_resetButton__jHRBh" data-radix-collection-item="" href="/enterprise?ref=navbar">Enterprise</a></li><li><a class="Navbar_menuLink__hzMAP shared_text3__MQrA6 shared_resetButton__jHRBh" data-radix-collection-item="" href="/pricing?ref=navbar">Pricing</a></li></ul></li><li class="Navbar_menu__en5J6 shared_resetList__sPSb0 shared_reset__i9XcS" role="navigation" aria-label="CTAs"><ul class="Navbar_ctas___rw_I shared_resetList__sPSb0 shared_reset__i9XcS" hidden=""><li><button class="Navbar_searchBtn__5xZFU Navbar_menuLink__hzMAP shared_text3__MQrA6 shared_resetButton__jHRBh" aria-label="Open search" aria-controls="global-search" aria-haspopup="dialog" aria-expanded="false"><svg data-sanity-icon="search" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.0355 15.0355L20 20M16.5 11.5C16.5 14.2614 14.2614 16.5 11.5 16.5C8.73858 16.5 6.5 14.2614 6.5 11.5C6.5 8.73858 8.73858 6.5 11.5 6.5C14.2614 6.5 16.5 8.73858 16.5 11.5Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg><span class="Navbar_searchLabel__4pRH7">Search</span></button></li><li><a class="Navbar_cta__9Lauv Button_button__hMNEn Button_bleed__Q_iZx Button_small__IRRll Button_themeAuto__qCQDQ" data-theme="auto" href="/manage">Log in</a></li><li><a class="Navbar_cta__9Lauv Button_button__hMNEn Button_ghost__mZ9vJ Button_small__IRRll Button_themeAuto__qCQDQ Button_red__UBsRK" data-theme="auto" href="/contact/sales?ref=navbar">Contact sales</a></li><li><a class="Navbar_cta__9Lauv Button_button__hMNEn Button_primary__oSpWt Button_small__IRRll Button_themeAuto__qCQDQ" data-theme="auto" href="/get-started?ref=navbar">Get started</a></li></ul></li></ul></div><div class="Navbar_desktopViewportPosition__5MK29"></div></nav><nav class="Navbar_mobileNavButtons__4AoEy" role="navigation" aria-label="CTAs" hidden=""><a class="Navbar_cta__9Lauv Navbar_visibleOnTablet__eir_i Button_button__hMNEn Button_ghost__mZ9vJ Button_small__IRRll Button_themeAuto__qCQDQ Button_red__UBsRK" data-theme="auto" href="/contact/sales?ref=navbar">Contact sales</a><a class="Navbar_cta__9Lauv Button_button__hMNEn Button_primary__oSpWt Button_small__IRRll Button_themeAuto__qCQDQ" data-theme="auto" href="/get-started?ref=navbar">Get started</a><button class="Navbar_mobileMenuBtn__jhh3u Navbar_menuLink__hzMAP shared_text3__MQrA6 shared_resetButton__jHRBh" aria-label="Open navigation menu" aria-expanded="false" aria-haspopup="menu" aria-controls="navbar-mobile-menu" type="button"><svg data-sanity-icon="menu" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 7.5H19M6 17.5H19M6 12.5H19" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></button></nav></div></header><div class="command_root__exsFO"></div><div id="mainContentBlock"><main style="position:relative"><div class="ContributionPageHeader_topBar__xZVfW shared_sectionContainer2___zZ0P shared_container2__iZo6U shared_container1__yecs8 shared_sectionContainerPadding2__wvg1y"><ol class="Breadcrumbs_root__KUrdO breadcrumbs " aria-label="Breadcrumbs" role="navigation"><li class="Breadcrumbs_link__qaLwr shared_fg1__EHH82 shared_label2__RmXai shared_label_base__ALIe4 "><a href="/exchange">Exchange</a></li><li class="Breadcrumbs_link__qaLwr shared_fg1__EHH82 shared_label2__RmXai shared_label_base__ALIe4 "><a href="/guides">Guides</a></li><li class="Breadcrumbs_link__qaLwr shared_fg1__EHH82 shared_label2__RmXai shared_label_base__ALIe4 Breadcrumbs_active__tvUtD shared_fg3__NXgMk"><a aria-current="page" href="/guides/build-your-first-blog-using-react">Build your first blog using React</a></li></ol></div><section class="ContributionPageHeader_root__AtBMO shared_sectionContainer2___zZ0P shared_container2__iZo6U shared_container1__yecs8 shared_sectionContainerPadding2__wvg1y"><div class="ContributionPageHeader_headerInfo__u6Wz0"><div class="ContributionPageHeader_guideDate__3QYdn shared_label1__rsQaE shared_label_base__ALIe4 shared_fg2__gvnW7">Last updated<!-- --> <!-- -->August 26, 2020</div><h1 class="ContributionPageHeader_pageTitle__R5EDY shared_header3__shUgs shared_header__67AqL">Build your first blog using React</h1><div class="contribution-badges ContributionBadges_root__8EC4G ContributionBadges_layoutLarge__J2y_h shared_text2__BcBAQ"><div class="ContributionBadges_official__VP9dd shared_fg2__gvnW7"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25"><path fill="currentColor" d="M12.4 9.3c1.12 0 1.57.63 1.75 1.07h1.57c-.36-1.47-1.56-2.3-3.33-2.3-1.08 0-2 .39-2.55 1.07.02.62.27 1.1.74 1.47.18-.8.86-1.3 1.82-1.3zm.26 6.36c-.93 0-1.6-.4-1.87-1.16H9.17c.35 1.53 1.65 2.44 3.5 2.44 1.1 0 2.05-.39 2.6-1.07a2 2 0 00-.72-1.6c-.16.87-.85 1.4-1.9 1.4z"></path><path fill="currentColor" d="M12 11.56l1.62.38c1 .24 2.2.84 2.2 2.38 0 .42-.08.81-.26 1.15v.02c-.1-.78-.5-1.35-1.25-1.75a5.35 5.35 0 00-1.2-.45l-1.58-.36c-1.44-.33-2.14-1.09-2.14-2.3 0-.4.09-.77.25-1.1l.01-.02c.12.7.53 1.25 1.23 1.63.32.17.7.31 1.13.42z"></path><path fill="currentColor" fill-rule="evenodd" d="M12.5 3.9a8.6 8.6 0 100 17.2 8.6 8.6 0 000-17.2zm-7.4 8.6a7.4 7.4 0 1114.8 0 7.4 7.4 0 01-14.8 0z" clip-rule="evenodd"></path></svg>Official<span class="visually-hidden">(made by Sanity team)</span></div></div><p class="ContributionPageHeader_authors__JAgUb shared_fg4__8eU1H shared_text3__MQrA6">By<!-- --> <a class="ContributionPageHeader_link__SPpX1 shared_link__QWAu0" href="/exchange/community/kapehe">Kapehe</a></p><div class="SimpleBlockContent_root___ioP8 ContributionPageHeader_pageDescription__1WCXM shared_fg2__gvnW7 shared_text2__BcBAQ"><p>Starting from scratch, build your first blog using ReactJS. We'll learn about the basic setup for a React SPA, query for our data, and have all of our blog content be managed by Sanity. To finish off, we'll style our blog with Tailwind CSS.</p></div><div class="LegacyWarning_root__Pra0g shared_orange__EdFxT shared_bg2__DFMii shared_box__eqBFk shared_borderRadius__O_jrc"><div class="LegacyWarning_header__sR_ev"><div class="LegacyWarning_icon__ZqoOu"><svg data-sanity-icon="warning-outline" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 9V13M12.5 16V14.5M14.2239 5.43058L20.727 16.486C21.5113 17.8192 20.55 19.5 19.0032 19.5H5.99683C4.45 19.5 3.48869 17.8192 4.27297 16.486L10.7761 5.43058C11.5494 4.11596 13.4506 4.11596 14.2239 5.43058Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></div><h3 class="LegacyWarning_title__nlV1B shared_header6__lhz92 shared_header__67AqL">Warning</h3></div><div class="LegacyWarning_body__iVcqo shared_text3__MQrA6 shared_fg2__gvnW7"><p class="LegacyWarning_body__iVcqo shared_text3__MQrA6 shared_fg2__gvnW7">This guide contains code examples for an older version of Sanity Studio (v2), which is deprecated.</p><a class="LegacyWarning_link__h2PnX shared_link__QWAu0" href="/docs/migrating-from-v2">Learn how to migrate to the new Studio v3 →</a></div></div></div><div class="GuidePage_headerImage__ye6zB Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.3333333333333333;--source-width:1200px"><div class="Image_lqip__4DIba" data-show-placeholder="false" data-is-loaded="0" aria-hidden="true" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EACEQAAICAgEEAwAAAAAAAAAAAAIDAQQAETEFEhMUFTJh/8QAFgEBAQEAAAAAAAAAAAAAAAAABAYH/8QAHxEAAQMDBQAAAAAAAAAAAAAAAQACAwQRsQYHMUGR/9oADAMBAAIRAxEAPwDP+NfapOsr7fGrnc4volJlwJUqREy3Oy/MkdactZqWwhA+YiecZ7LaKFkg5A4HmMfqKUiIMPZwg7dUofVvnbyxh9Jti6w75Sq2xZfYZ1OGQ22k2wZnMyRTuZwyVDVqRkN1/9k=);padding-bottom:75%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/81pocpw8/production/41c8595944d919ef3289d24eb5884bf9b5385ab0-1200x900.jpg?w=800&h=600&fit=clip&auto=format" alt="Build your first blog using React" loading="lazy" srcSet="https://cdn.sanity.io/images/81pocpw8/production/41c8595944d919ef3289d24eb5884bf9b5385ab0-1200x900.jpg?w=320&h=240&fit=clip&auto=format 320w,https://cdn.sanity.io/images/81pocpw8/production/41c8595944d919ef3289d24eb5884bf9b5385ab0-1200x900.jpg?w=480&h=360&fit=clip&auto=format 480w,https://cdn.sanity.io/images/81pocpw8/production/41c8595944d919ef3289d24eb5884bf9b5385ab0-1200x900.jpg?w=640&h=480&fit=clip&auto=format 640w,https://cdn.sanity.io/images/81pocpw8/production/41c8595944d919ef3289d24eb5884bf9b5385ab0-1200x900.jpg?w=720&h=540&fit=clip&auto=format 720w,https://cdn.sanity.io/images/81pocpw8/production/41c8595944d919ef3289d24eb5884bf9b5385ab0-1200x900.jpg?w=800&h=600&fit=clip&auto=format 800w,https://cdn.sanity.io/images/81pocpw8/production/41c8595944d919ef3289d24eb5884bf9b5385ab0-1200x900.jpg?w=960&h=720&fit=clip&auto=format 960w,https://cdn.sanity.io/images/81pocpw8/production/41c8595944d919ef3289d24eb5884bf9b5385ab0-1200x900.jpg?w=1200&h=900&fit=clip&auto=format 1200w" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></section><div class="ContributionPageContent_root__eS7Q3 shared_sectionContainer2___zZ0P shared_container2__iZo6U shared_container1__yecs8 shared_sectionContainerPadding2__wvg1y " data-has-sidebar="true"><div class="ContributionPageContent_content__ObBLV"><div class="BlockContent_root__A5xqv shared_fg3__NXgMk"><p>TL;DR: Starting from scratch, we will build a blog using React and Sanity. We will create our React and Sanity projects, walk through the Sanity Studio, connect the React app to Sanity, and use React Routing to navigate through our app.</p><p></p><p>This guide will start from scratch, but if you would like to test out Sanity a little quicker, there are starters that you can find at <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/create">sanity.io/create</a>.</p><p>By starting from nothing, let's go over what we are going to cover in detail:</p><ul><li>Set up a basic React SPA using <code class="BlockContent_inlineCode__vDn_C">create-react-app</code></li><li>Set up our own content management system using Sanity</li><li>Learn about navigating our app using React Router</li><li>Learn how to query for remote data</li><li>Get started with styling using Tailwind CSS</li></ul><p>let’s see how you can fetch (structured) content from Sanity and use it in your own React application. This method will work for an existing React app or one that is at the <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="https://reactjs.org/docs/create-a-new-react-app.html">create-react-app</a> stage.</p><p>To find the completed project, head on over to <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="https://github.com/sanity-io/create-react-app-blog">this GitHub repo</a>!</p><div data-block-key="3431846ee1e1"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="3431846ee1e1"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#3431846ee1e1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Powered by Sanity</h2></div><p>Sanity is how we can manage our structured content. Whether our application is a blog, a portfolio, or the next spaceship data cloud, we need all of our content to be handled in an organized and simple way. With Sanity, we can manage our content’s title, image, body text, etc. Anything content, Sanity can help manage.</p><p>Sanity can manage the content for many different use cases. For example, an e-commerce site has products, prices for each product, and a description of the product. Sanity can hold all that information in one main location. In the case of Sanity, we would use the Sanity Studio.</p><div data-block-key="be79718e7152"><h3 class="BlockContent_header_h3__d_9uj BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="be79718e7152"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#be79718e7152"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Sanity Studio</h3></div><p>Not only do we get the power of Sanity but we also get <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/studio">Sanity Studio</a>. Sanity Studio is an interface where we can view our content. The studio allows for image editing, the editing of fields, and can be used by developers and non-developers! All of this can be viewed in a nicely laid out UI/UX. In this tutorial, we will use Sanity Studio.</p><p>To learn more about the Sanity Studio, we can find <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/docs/sanity-studio">the docs here</a>.</p><div data-block-key="6e35f2e6cb9c"><h3 class="BlockContent_header_h3__d_9uj BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="6e35f2e6cb9c"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#6e35f2e6cb9c"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>GROQ</h3></div><p>Sanity offers two different ways to query for your content:</p><ol><li><a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/docs/graphql">GraphQL</a></li><li><a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/docs/overview-groq">GROQ</a></li></ol><p>We are going to also be using <!-- -->GROQ<!-- --> today. GROQ stands for Graph-Relational Object Queries. This is designed to query collections of schema-less JSON documents. GROQ can do many things, for example, join several documents, expressive filtering, and create the response into something the application can use.</p><p>To learn more about GROQ visit <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/docs/groq">the docs here</a>.</p><p>Let’s get building!</p><div data-block-key="565172d2a89e"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="565172d2a89e"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#565172d2a89e"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Our project's structure</h2></div><p>Before we begin let's talk about how our project is going to be organized. Once we create our React app using <code class="BlockContent_inlineCode__vDn_C">create-react-app</code>, we will have our base React app. Once inside that application, we will create our Sanity Studio. Our folder structure will look like the following:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="true" data-long-last-line-mobile="true"><pre class="undefined ">sanity-react (main project) |--- mysanityblog (Sanity project) |--- src (React application) </pre></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>Our goal today is to:</p><ul><li>Create a new React blog</li><li>Have Sanity manage our content</li><li>Using React Routing, be able to navigate our app</li></ul><div data-block-key="7672e19173eb"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="7672e19173eb"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#7672e19173eb"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Setting up a new React SPA</h2></div><p>Let's first set up a new React SPA (single-page application) in our local developer environment.</p><p>Note: If you already have an application, feel free to skip this setup part!</p><p>Run the following command in your shell, which you can find in Terminal.app if you are on Mac or CMD if you're on Windows:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt CodeSnippet_rootSingleLine__5xLQJ" data-long-last-line="false" data-long-last-line-mobile="true"><div><pre class="refractor language-bash"><code class="language-bash">npx create-react-app sanity-react</code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg CodeSnippet_copyPasteButtonSingleLine___N5UJ" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><div class="Message_root__p0LS9 shared_bg2__DFMii shared_fg1__EHH82 shared_box__eqBFk shared_borderRadius__O_jrc" data-state="success"><div class="Message_header__4_sT4"><div class="Message_icon__mP21J"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2 11.7V16h-4v-2.3C8.48 12.63 7 11.53 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.49-1.51 3.65-3 4.7z"></path></svg></div><h3 class="Message_title__3zvcq shared_header6__lhz92 shared_header__67AqL">Protip</h3></div><div class="Message_body__57ckl shared_text3__MQrA6 shared_fg2__gvnW7"><p>Note: <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="https://www.npmjs.com/package/npx"><code class="BlockContent_inlineCode__vDn_C">npx</code></a> will download and run the command that follows it. So instead of installing <code class="BlockContent_inlineCode__vDn_C">create-react-app</code> with <code class="BlockContent_inlineCode__vDn_C">npm</code>, we can use it once with <code class="BlockContent_inlineCode__vDn_C">npx</code>. To make sure all of this works, be sure to <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="https://nodejs.org/en/download/">download Node.js</a> for your computer.</p></div></div><p>Once that is built out, run this command to go into the new project directory that the command made:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt CodeSnippet_rootSingleLine__5xLQJ" data-long-last-line="false" data-long-last-line-mobile="false"><div><pre class="refractor language-bash"><code class="language-bash"><span class="token builtin class-name">cd</span> sanity-react</code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg CodeSnippet_copyPasteButtonSingleLine___N5UJ" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>Open our newly created project in your code editor of choice. Once open, we should see our new React app! To double-check that everything is running smoothly, run the following command to view the React app in the browser:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt CodeSnippet_rootSingleLine__5xLQJ" data-long-last-line="false" data-long-last-line-mobile="false"><div><pre class="refractor language-bash"><code class="language-bash"><span class="token function">npm</span> start</code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg CodeSnippet_copyPasteButtonSingleLine___N5UJ" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>We should be able to see our application running at <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="http://localhost:3000/">localhost:3000</a>!<br/></p><div data-block-key="c46733c34d93"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="c46733c34d93"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#c46733c34d93"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Setting up Sanity</h2></div><p>Now that we have our application ready for us, let's get Sanity up and running! We may need to install the <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="https://www.npmjs.com/package/@sanity/cli">Sanity CLI</a> globally on our local developer environment. To do that, run the command:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt CodeSnippet_rootSingleLine__5xLQJ" data-long-last-line="false" data-long-last-line-mobile="false"><div><pre class="refractor language-bash"><code class="language-bash"><span class="token function">npm</span> i -g @sanity/cli</code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg CodeSnippet_copyPasteButtonSingleLine___N5UJ" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>The Sanity CLI can do many things! Some of those include initiating a new project, interacting with a current project, or upgrading the studio. We will be using the CLI today to initiate a new project.</p><p>Our next command will be activating Sanity to this particular project. We will be asked a bunch of questions, these are there to get our Sanity set up just right. To start, run the following command within our home folder (<code class="BlockContent_inlineCode__vDn_C">sanity-react</code>) to set up the Studio application:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt CodeSnippet_rootSingleLine__5xLQJ" data-long-last-line="false" data-long-last-line-mobile="false"><div><pre class="refractor language-bash"><code class="language-bash">sanity init</code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg CodeSnippet_copyPasteButtonSingleLine___N5UJ" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>Note: <!-- -->You may need to log into your Sanity account or create a new Sanity account in the browser first. There will be prompts.</p><p>We are going to see a list of questions for us to answer in the next steps. Let's walk through those!</p><ol><li>Create new project — Hit Enter.</li><li>Your project name: — We can name it whatever we would like. Let's “My Sanity Blog” for this project.</li><li>Use the default dataset configuration? — The default dataset configuration has a public dataset named “<code class="BlockContent_inlineCode__vDn_C">production</code>”, let's stick with that. So type in “Y” and hit Enter.</li><li>Project output path: — This will show us the path where our sanity project will live. The path should show the path that leads to this: <code class="BlockContent_inlineCodeLong__K6ydu">/sanity-react/mysanityblog</code>. Hit Enter.</li><li>Select project template: — Here we are going to choose “Blog (schema)”. Using the arrow keys, navigate to that so it’s showing blue. Hit Enter once there. Success!</li></ol><p>Once finished, we should see this:</p><figure class="LightboxImage_figure__1Lrdg "><div type="button" aria-expanded="false" aria-controls="global-lightbox" aria-haspopup="dialog" class="LightboxImage_imageContainer__m4Bo6 LightboxImage_imageWithDialog__7D0yC"><div class="LightboxImage_image__v2sPU Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.7557471264367817;--source-width:1222px;max-width:var(--source-width)"><div class="Image_lqip__4DIba" data-show-placeholder="true" data-is-loaded="0" aria-hidden="true" style="padding-bottom:56.95581014729951%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/81pocpw8/production/9be00858b3e9c8c74c2d31a96420625fd2662030-1222x696.png?rect=1,0,1221,696&w=800&h=456&fit=clip&auto=format" alt="Terminal view of questions after running `sanity init`" loading="lazy" srcSet="https://cdn.sanity.io/images/81pocpw8/production/9be00858b3e9c8c74c2d31a96420625fd2662030-1222x696.png?rect=0,1,1222,695&w=320&h=182&fit=clip&auto=format 320w,https://cdn.sanity.io/images/81pocpw8/production/9be00858b3e9c8c74c2d31a96420625fd2662030-1222x696.png?rect=0,1,1222,695&w=480&h=273&fit=clip&auto=format 480w,https://cdn.sanity.io/images/81pocpw8/production/9be00858b3e9c8c74c2d31a96420625fd2662030-1222x696.png?rect=1,0,1220,696&w=640&h=365&fit=clip&auto=format 640w,https://cdn.sanity.io/images/81pocpw8/production/9be00858b3e9c8c74c2d31a96420625fd2662030-1222x696.png?w=720&h=410&fit=clip&auto=format 720w,https://cdn.sanity.io/images/81pocpw8/production/9be00858b3e9c8c74c2d31a96420625fd2662030-1222x696.png?rect=1,0,1221,696&w=800&h=456&fit=clip&auto=format 800w,https://cdn.sanity.io/images/81pocpw8/production/9be00858b3e9c8c74c2d31a96420625fd2662030-1222x696.png?rect=1,0,1221,696&w=960&h=547&fit=clip&auto=format 960w,https://cdn.sanity.io/images/81pocpw8/production/9be00858b3e9c8c74c2d31a96420625fd2662030-1222x696.png?w=1222&h=696&fit=clip&auto=format 1222w" sizes="(max-width: 720px) 100vw, 720px" class="Image_img__5ZmPX"/></noscript></div></div></figure><p>To get the Sanity Studio running in our browser, we'll run the following commands to get into the new studio directory and start the development server:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="false" data-long-last-line-mobile="false"><div><pre class="refractor language-bash"><code class="language-bash"><span class="token builtin class-name">cd</span> mysanityblog sanity start</code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>Once it has compiled, we can go visit our new Sanity Studio at <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="http://localhost:3333/">localhost:3333</a>!</p><p>If we were to click on “Posts”, it would say, “No documents of this type found”. In the next section, we’ll walk through adding one in.</p><div data-block-key="96397fe01053"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="96397fe01053"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#96397fe01053"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Adding content to Sanity Studio</h2></div><p>If we were to click on the edit icon next to our Studio name, we will be able to create a new Post, Author, or Category.</p><p></p><figure class="LightboxImage_figure__1Lrdg "><div type="button" aria-expanded="false" aria-controls="global-lightbox" aria-haspopup="dialog" class="LightboxImage_imageContainer__m4Bo6 LightboxImage_imageWithDialog__7D0yC"><div class="LightboxImage_image__v2sPU Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.4738955823293172;--source-width:1468px;max-width:var(--source-width)"><div class="Image_lqip__4DIba" data-show-placeholder="true" data-is-loaded="0" aria-hidden="true" style="padding-bottom:67.8474114441417%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/81pocpw8/production/2208adb8817298b3a0ac2ac0eeacb8fcce451783-1468x996.png?rect=1,0,1467,996&w=800&h=543&fit=clip&auto=format" alt="Showing the edit icon next to the Studio's name" loading="lazy" srcSet="https://cdn.sanity.io/images/81pocpw8/production/2208adb8817298b3a0ac2ac0eeacb8fcce451783-1468x996.png?rect=0,1,1468,995&w=320&h=217&fit=clip&auto=format 320w,https://cdn.sanity.io/images/81pocpw8/production/2208adb8817298b3a0ac2ac0eeacb8fcce451783-1468x996.png?rect=1,0,1467,996&w=480&h=326&fit=clip&auto=format 480w,https://cdn.sanity.io/images/81pocpw8/production/2208adb8817298b3a0ac2ac0eeacb8fcce451783-1468x996.png?rect=0,1,1468,995&w=640&h=434&fit=clip&auto=format 640w,https://cdn.sanity.io/images/81pocpw8/production/2208adb8817298b3a0ac2ac0eeacb8fcce451783-1468x996.png?rect=1,0,1467,996&w=720&h=489&fit=clip&auto=format 720w,https://cdn.sanity.io/images/81pocpw8/production/2208adb8817298b3a0ac2ac0eeacb8fcce451783-1468x996.png?rect=1,0,1467,996&w=800&h=543&fit=clip&auto=format 800w,https://cdn.sanity.io/images/81pocpw8/production/2208adb8817298b3a0ac2ac0eeacb8fcce451783-1468x996.png?rect=0,1,1468,995&w=960&h=651&fit=clip&auto=format 960w,https://cdn.sanity.io/images/81pocpw8/production/2208adb8817298b3a0ac2ac0eeacb8fcce451783-1468x996.png?rect=0,1,1468,995&w=1280&h=868&fit=clip&auto=format 1280w,https://cdn.sanity.io/images/81pocpw8/production/2208adb8817298b3a0ac2ac0eeacb8fcce451783-1468x996.png?w=1440&h=977&fit=clip&auto=format 1440w,https://cdn.sanity.io/images/81pocpw8/production/2208adb8817298b3a0ac2ac0eeacb8fcce451783-1468x996.png?w=1468&h=996&fit=clip&auto=format 1468w" sizes="(max-width: 720px) 100vw, 720px" class="Image_img__5ZmPX"/></noscript></div></div></figure><p>Choose “Post” and an “Untitled” page will appear with a bunch of empty text boxes! <!-- -->Filling these in helps us create our first blog post stored in the Studio. You may notice the “syncing” indicator in the bottom right. That means that all your changes are synced to Sanity’s content store in real-time and will be instantly available once you publish.</p><p>Go ahead and fill in the fields with any content you would like. It should look something like this:</p><p></p><figure class="LightboxImage_figure__1Lrdg "><div type="button" aria-expanded="false" aria-controls="global-lightbox" aria-haspopup="dialog" class="LightboxImage_imageContainer__m4Bo6 LightboxImage_imageWithDialog__7D0yC"><div class="LightboxImage_image__v2sPU Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:2.0792616720955484;--source-width:3830px;max-width:var(--source-width)"><div class="Image_lqip__4DIba" data-show-placeholder="true" data-is-loaded="0" aria-hidden="true" style="padding-bottom:48.09399477806789%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?rect=1,0,3828,1842&w=800&h=385&fit=clip&auto=format" alt="Creating first blog post in Sanity Studio and filling in text fields" loading="lazy" srcSet="https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?rect=1,0,3828,1842&w=320&h=154&fit=clip&auto=format 320w,https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?rect=1,0,3828,1842&w=480&h=231&fit=clip&auto=format 480w,https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?rect=1,0,3828,1842&w=640&h=308&fit=clip&auto=format 640w,https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?rect=0,1,3830,1841&w=720&h=346&fit=clip&auto=format 720w,https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?rect=1,0,3828,1842&w=800&h=385&fit=clip&auto=format 800w,https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?rect=1,0,3828,1842&w=960&h=462&fit=clip&auto=format 960w,https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?rect=1,0,3828,1842&w=1280&h=616&fit=clip&auto=format 1280w,https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?rect=1,0,3828,1842&w=1440&h=693&fit=clip&auto=format 1440w,https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?rect=1,0,3828,1842&w=1600&h=770&fit=clip&auto=format 1600w,https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?rect=0,1,3830,1841&w=1920&h=923&fit=clip&auto=format 1920w,https://cdn.sanity.io/images/81pocpw8/production/7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842.png?w=3830&h=1842&fit=clip&auto=format 3830w" sizes="(max-width: 720px) 100vw, 720px" class="Image_img__5ZmPX"/></noscript></div></div></figure><p>When finished, be sure to hit the blue “Publish” button in the bottom right-hand corner.</p><div class="Message_root__p0LS9 shared_bg2__DFMii shared_fg1__EHH82 shared_box__eqBFk shared_borderRadius__O_jrc" data-state="success"><div class="Message_header__4_sT4"><div class="Message_icon__mP21J"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2 11.7V16h-4v-2.3C8.48 12.63 7 11.53 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.49-1.51 3.65-3 4.7z"></path></svg></div><h3 class="Message_title__3zvcq shared_header6__lhz92 shared_header__67AqL">Protip</h3></div><div class="Message_body__57ckl shared_text3__MQrA6 shared_fg2__gvnW7"><p>Note: To do the Author field, we will need to add an author to the “Author” section under “Content” the same way we are adding a blog post.</p></div></div><p><br/>Feel free to add as many blog posts as desired! The awesome thing is Sanity will be handling the management of this content, we’ll make a GROQ call for these posts, and display it in our React app.</p><p>Once we have finished adding in all the blog posts we could ever imagine, let’s head on over to our code and get these blog posts live in React!</p><div data-block-key="6020abf65417"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="6020abf65417"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#6020abf65417"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Connecting Sanity to our React app</h2></div><p>Now that we are back in our React app, let’s start creating our blog! We are going to see multiple folders, the two we’re going to navigate between are:</p><ol><li><code class="BlockContent_inlineCode__vDn_C">sanity-react/mysanityblog</code> -- where our Sanity project lives</li><li><code class="BlockContent_inlineCode__vDn_C">sanity-react/src</code> -- where our React app lives</li></ol><p>We need to connect our React app to our Sanity project. We are going to want to bring in the <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="https://www.npmjs.com/package/@sanity/client">Sanity Client</a>. To do that run this command in the project:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt CodeSnippet_rootSingleLine__5xLQJ" data-long-last-line="false" data-long-last-line-mobile="true"><div><pre class="refractor language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> @sanity/client</code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg CodeSnippet_copyPasteButtonSingleLine___N5UJ" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>Once done, we’ll first want to create a file in the React application that will import that package. Open <code class="BlockContent_inlineCode__vDn_C">src</code> and create a new file: <code class="BlockContent_inlineCode__vDn_C">src/client.js</code> and open it up. Inside that file let’s add the following code:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="true" data-long-last-line-mobile="true"><div><pre class="refractor language-javascript"><code class="language-javascript"><span class="token keyword">import</span> sanityClient <span class="token keyword">from</span> <span class="token string">"@sanity/client"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">sanityClient</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">projectId</span><span class="token operator">:</span> <span class="token string">"Your Project ID Here"</span><span class="token punctuation">,</span> <span class="token comment">// find this at manage.sanity.io or in your sanity.json</span> <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token string">"production"</span><span class="token punctuation">,</span> <span class="token comment">// this is from those question during 'sanity init'</span> <span class="token literal-property property">useCdn</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>We’ll see a couple of comments here, the one we'll focus on right now is the <code class="BlockContent_inlineCode__vDn_C">projectId</code>.</p><p>There are two ways to find the <code class="BlockContent_inlineCode__vDn_C">projectId</code>.</p><ol><li>In our <code class="BlockContent_inlineCode__vDn_C">sanity.json</code> file</li><li>On our personal <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="https://manage.sanity.io/">Sanity Manage page</a></li></ol><p>For the first way, navigate to <code class="BlockContent_inlineCode__vDn_C">mysanityblog/sanity.json</code>, under the <code class="BlockContent_inlineCode__vDn_C">api</code> section we should see the following code:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="true" data-long-last-line-mobile="true"><div><pre class="refractor language-json"><code class="language-json"><span class="token property">"api"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"projectId"</span><span class="token operator">:</span> <span class="token string">"Your Project ID Here"</span><span class="token punctuation">,</span> <span class="token property">"dataset"</span><span class="token operator">:</span> <span class="token string">"production"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> </code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>For the second method, we'll need to go to our <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="https://manage.sanity.io/">Sanity Manage page</a>. Find the tile that says “My Sanity Blog” (what we named it earlier) and click into it. We should then be taken to our dashboard for our project.</p><p>We'll see at the top, under the name of the project, “PROJECT ID”. Copy that and paste it into the <code class="BlockContent_inlineCode__vDn_C">src/client.js</code> file where it says <code class="BlockContent_inlineCodeLong__K6ydu">projectId: “Your Project ID Here”</code>.</p><p>In that same dashboard view, we are going to want to add “localhost:3000” to our API settings so it knows that link can be trusted! In the “My Sanity Blog” dashboard, click on “Settings”. Once there, click on “API” on the left and we’ll see “CORS Origins”. Click on “ADD NEW ORIGIN” and add “<!-- -->http://localhost:3000”<!-- -->.</p><div class="Message_root__p0LS9 shared_bg2__DFMii shared_fg1__EHH82 shared_box__eqBFk shared_borderRadius__O_jrc" data-state="success"><div class="Message_header__4_sT4"><div class="Message_icon__mP21J"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2 11.7V16h-4v-2.3C8.48 12.63 7 11.53 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.49-1.51 3.65-3 4.7z"></path></svg></div><h3 class="Message_title__3zvcq shared_header6__lhz92 shared_header__67AqL">Protip</h3></div><div class="Message_body__57ckl shared_text3__MQrA6 shared_fg2__gvnW7"><p>If you would like to add this with the CLI run the command <code class="BlockContent_inlineCodeLong__K6ydu">sanity cors add http://localhost:3000</code> within your studio project.</p></div></div><p><br/>Now our React app and Sanity Project are connected!</p><div data-block-key="923ce1d96837"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="923ce1d96837"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#923ce1d96837"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Building our React components</h2></div><p>In this tutorial, we are going to have two pages for templates:</p><ol><li>All blog posts in a tile format</li><li>One blog post and all the content for it</li></ol><p>Let’s create those files. In the <code class="BlockContent_inlineCode__vDn_C">src/</code> folder, create the following folder: <code class="BlockContent_inlineCode__vDn_C">src/components</code>. Within that newly created folder, let’s create two files:</p><ul><li><code class="BlockContent_inlineCodeLong__K6ydu">src/components/AllPosts.js</code></li><li><code class="BlockContent_inlineCode__vDn_C">src/components/OnePost.js</code></li></ul><p>We are going to be using <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="https://reactrouter.com/">React Router</a> to navigate around our app. What this will do is in our <code class="BlockContent_inlineCode__vDn_C">App.js</code> file, we will declare “routes” for our components. For example, if we wanted to route to an About page, we could use the URL route <code class="BlockContent_inlineCode__vDn_C">/about</code>. By declaring our URL route and matching it up with a component, we are able to navigate to the proper page.</p><p>To set this up, let’s navigate to the <code class="BlockContent_inlineCode__vDn_C">src/App.js</code> file.</p><div data-block-key="9114908f01c1"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="9114908f01c1"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#9114908f01c1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Setting up React Router</h2></div><p>To get React Router going, we are going to need to install our dependency. In the project, run the following command:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt CodeSnippet_rootSingleLine__5xLQJ" data-long-last-line="false" data-long-last-line-mobile="true"><div><pre class="refractor language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> --save react-router-dom</code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg CodeSnippet_copyPasteButtonSingleLine___N5UJ" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>Within the <code class="BlockContent_inlineCode__vDn_C">App.js</code> file, change the code to include the router components:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="false" data-long-last-line-mobile="false"><div><pre class="refractor language-javascript"><code class="language-javascript"><span class="token comment">// src/App.js</span> <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter<span class="token punctuation">,</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> AllPosts <span class="token keyword">from</span> <span class="token string">"./components/AllPosts.js"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> OnePost <span class="token keyword">from</span> <span class="token string">"./components/OnePost.js"</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>BrowserRouter<span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>Route component<span class="token operator">=</span><span class="token punctuation">{</span>AllPosts<span class="token punctuation">}</span> path<span class="token operator">=</span><span class="token string">"/"</span> exact <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>Route component<span class="token operator">=</span><span class="token punctuation">{</span>OnePost<span class="token punctuation">}</span> path<span class="token operator">=</span><span class="token string">"/:slug"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span></code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>Let’s break this down.</p><p>By adding in the <code class="BlockContent_inlineCode__vDn_C">path=“/”</code> we are stating that when we are at the base URL for our website, display the <code class="BlockContent_inlineCode__vDn_C">AllPosts</code> component. Adding in the <code class="BlockContent_inlineCode__vDn_C">exact</code> makes it so there’s no confusion for other routes that have additional info after the “/”; “/additional-info”. In our case, we have <code class="BlockContent_inlineCode__vDn_C">/:slug</code> which will show the <code class="BlockContent_inlineCode__vDn_C">OnePost</code> component, but more specifically, which blog post to display from the corresponding blog post.</p><p>Within our two components, add the following code:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="false" data-long-last-line-mobile="false"><div><pre class="refractor language-javascript"><code class="language-javascript"><span class="token comment">// src/components/AllPosts.js</span> <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">AllPosts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token operator"><</span>h2<span class="token operator">></span>AllPosts Page<span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p></p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="false" data-long-last-line-mobile="false"><div><pre class="refractor language-javascript"><code class="language-javascript"><span class="token comment">// src/components/OnePost.js</span> <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">OnePost</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token operator"><</span>h2<span class="token operator">></span>OnePost Page<span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>Once we have all that code, restart the server (ctrl + c, npm start) and navigate to “localhost:3000”. At “localhost:3000/” we should see the text “AllPosts Page” and if we navigate to “localhost:3000/:slug” (replacing :slug with a slug) we should see the text “OnePost Page”.</p><div class="Message_root__p0LS9 shared_bg2__DFMii shared_fg1__EHH82 shared_box__eqBFk shared_borderRadius__O_jrc" data-state="success"><div class="Message_header__4_sT4"><div class="Message_icon__mP21J"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2 11.7V16h-4v-2.3C8.48 12.63 7 11.53 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.49-1.51 3.65-3 4.7z"></path></svg></div><h3 class="Message_title__3zvcq shared_header6__lhz92 shared_header__67AqL">Protip</h3></div><div class="Message_body__57ckl shared_text3__MQrA6 shared_fg2__gvnW7"><p>If you want to test the slug part now, go grab a slug from your Sanity Studio. For example, <code class="BlockContent_inlineCode__vDn_C">localhost:3000/first-blog</code></p></div></div><p>Awesome! Our routing is set up!</p><div data-block-key="09943e6d2b68"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="09943e6d2b68"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#09943e6d2b68"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Building the page for all the blog posts</h2></div><p>Let's go ahead and display all of our posts’ titles and their main image on the “All Posts” page. Head on over to <code class="BlockContent_inlineCodeLong__K6ydu">src/components/AllPosts.js</code> and paste the following code in there (we’ll go through it step-by-step after):</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="true" data-long-last-line-mobile="true"><div><pre class="refractor language-javascript"><code class="language-javascript"><span class="token comment">// src/components/AllPosts.js</span> <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> sanityClient <span class="token keyword">from</span> <span class="token string">"../client.js"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">AllPosts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>allPostsData<span class="token punctuation">,</span> setAllPosts<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> sanityClient <span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">*[_type == "post"]{ title, slug, mainImage{ asset->{ _id, url } } }</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setAllPosts</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h2<span class="token operator">></span>Blog Posts<span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span>h3<span class="token operator">></span>Welcome to my blog posts page<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token punctuation">{</span>allPostsData <span class="token operator">&&</span> allPostsData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">post<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token operator"><</span>Link to<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">"/"</span> <span class="token operator">+</span> post<span class="token punctuation">.</span>slug<span class="token punctuation">.</span>current<span class="token punctuation">}</span> key<span class="token operator">=</span><span class="token punctuation">{</span>post<span class="token punctuation">.</span>slug<span class="token punctuation">.</span>current<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>span key<span class="token operator">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span>post<span class="token punctuation">.</span>mainImage<span class="token punctuation">.</span>asset<span class="token punctuation">.</span>url<span class="token punctuation">}</span> alt<span class="token operator">=</span><span class="token string">""</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span> <span class="token operator"><</span>h2<span class="token operator">></span><span class="token punctuation">{</span>post<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p><br/>Let’s walk through this section by section!</p><div data-block-key="e65d5b1d1df8"><h3 class="BlockContent_header_h3__d_9uj BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="e65d5b1d1df8"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#e65d5b1d1df8"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Top of the file</h3></div><ul><li>We are going to be using hooks that are built into React for state management, so we have imported <code class="BlockContent_inlineCode__vDn_C">useEffect</code> and <code class="BlockContent_inlineCode__vDn_C">useState</code>.</li><li>Imported <code class="BlockContent_inlineCode__vDn_C">Link</code> for linking to single blog posts.</li><li>Imported the <code class="BlockContent_inlineCode__vDn_C">sanityClient</code> so we can fetch our data</li></ul><div data-block-key="0e9911890a9c"><h3 class="BlockContent_header_h3__d_9uj BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="0e9911890a9c"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#0e9911890a9c"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>AllPosts()</h3></div><ul><li>Setting our state</li><li>Using <code class="BlockContent_inlineCode__vDn_C">useEffect</code> and <code class="BlockContent_inlineCode__vDn_C">sanityClient</code> to fetch our data</li></ul><div data-block-key="508e31f2071f"><h3 class="BlockContent_header_h3__d_9uj BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="508e31f2071f"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#508e31f2071f"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>The return</h3></div><ul><li>Setting a couple of headers</li><li><code class="BlockContent_inlineCode__vDn_C">mapping</code> over our blog posts and displaying the <code class="BlockContent_inlineCode__vDn_C">mainImage</code> and <code class="BlockContent_inlineCode__vDn_C">title</code> of each</li><li>Making those clickable and setting <code class="BlockContent_inlineCode__vDn_C">post.slug.current</code> so that it sends us to the correct blog post</li><li>If we hit save and navigate to “localhost:3000”, we should now see all of our data!</li></ul><p>Our images might be very large, we’ll style those soon and make it look nice!</p><p>There is a Sanity plugin for handling images that we will use in <code class="BlockContent_inlineCode__vDn_C">components/OnePost.js</code>, but in this component, we wanted to show how to GROQ for an image URL and display it without the plugin.</p><div data-block-key="df4870b69e38"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="df4870b69e38"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#df4870b69e38"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Building the page for an individual blog post</h2></div><p>Now that we have our main blog page set up, let’s make those Link's navigate to an actual blog post and display all the information!</p><p>Before we write any code, we are going to want to install a couple of dependencies. Run the following command within the project:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="false" data-long-last-line-mobile="true"><div><pre class="refractor language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> @sanity/block-content-to-react @sanity/image-url </code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p><br/>Let's talk about these two:</p><ul><li><code class="BlockContent_inlineCodeLong__K6ydu">@sanity/block-content-to-react</code> — This will render an array of block text from Sanity with React. To learn more about this, we can find <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/docs/block-content">the docs here</a>. There are libraries for React, Vue, HTML, and HyperText.</li><li><code class="BlockContent_inlineCode__vDn_C">@sanity/image-url</code> — This library will help us with the image URL. Remember, in <code class="BlockContent_inlineCode__vDn_C">AllPosts.js</code> we did not use this, but rather saw how to without. We are going to use this plugin for <code class="BlockContent_inlineCode__vDn_C">OnePost.js</code>. To learn more about this, please visit <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/docs/image-url">the docs here</a>.</li></ul><p><br/>Now that we have our dependencies installed, let’s go ahead and build out our component! Head on over to <code class="BlockContent_inlineCode__vDn_C">src/components/OnePost.js</code> and input the following code:</p><p></p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="true" data-long-last-line-mobile="true"><div><pre class="refractor language-javascript"><code class="language-javascript"><span class="token comment">// src/components/OnePost.js</span> <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> useParams <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> sanityClient <span class="token keyword">from</span> <span class="token string">"../client.js"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> BlockContent <span class="token keyword">from</span> <span class="token string">"@sanity/block-content-to-react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> imageUrlBuilder <span class="token keyword">from</span> <span class="token string">"@sanity/image-url"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> builder <span class="token operator">=</span> <span class="token function">imageUrlBuilder</span><span class="token punctuation">(</span>sanityClient<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">urlFor</span><span class="token punctuation">(</span><span class="token parameter">source</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> builder<span class="token punctuation">.</span><span class="token function">image</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">OnePost</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>postData<span class="token punctuation">,</span> setPostData<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> slug <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useParams</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> sanityClient <span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">*[slug.current == $slug]{ title, slug, mainImage{ asset->{ _id, url } }, body, "name": author->name, "authorImage": author->image }</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span> slug <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setPostData</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>slug<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>postData<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator"><</span>div<span class="token operator">></span>Loading<span class="token operator">...</span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h2<span class="token operator">></span><span class="token punctuation">{</span>postData<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">urlFor</span><span class="token punctuation">(</span>postData<span class="token punctuation">.</span>authorImage<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">url</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span> alt<span class="token operator">=</span><span class="token string">"Author is Kap"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>h4<span class="token operator">></span><span class="token punctuation">{</span>postData<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">urlFor</span><span class="token punctuation">(</span>postData<span class="token punctuation">.</span>mainImage<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">url</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span> alt<span class="token operator">=</span><span class="token string">""</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>BlockContent blocks<span class="token operator">=</span><span class="token punctuation">{</span>postData<span class="token punctuation">.</span>body<span class="token punctuation">}</span> projectId<span class="token operator">=</span><span class="token punctuation">{</span>sanityClient<span class="token punctuation">.</span>clientConfig<span class="token punctuation">.</span>projectId<span class="token punctuation">}</span> dataset<span class="token operator">=</span><span class="token punctuation">{</span>sanityClient<span class="token punctuation">.</span>clientConfig<span class="token punctuation">.</span>dataset<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p><br/>Let’s walk through this code!</p><div data-block-key="5c8f3cce7217"><h3 class="BlockContent_header_h3__d_9uj BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="5c8f3cce7217"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#5c8f3cce7217"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a><br/>Top of the file</h3></div><ul><li>We have imported the dependencies that we installed earlier</li><li>Imported our Sanity Client</li><li>Imported all the things we need from React</li><li>Wrote out a function for <code class="BlockContent_inlineCode__vDn_C">urlFor</code> so that we can use it below. Here is where we pulled in <code class="BlockContent_inlineCode__vDn_C">imageUrlBuilder</code> from <code class="BlockContent_inlineCode__vDn_C">@sanity/image-url</code> and used that within <code class="BlockContent_inlineCode__vDn_C">urlFor</code>. We'll use that lower in the file.</li></ul><div data-block-key="95c8cb082d79"><h3 class="BlockContent_header_h3__d_9uj BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="95c8cb082d79"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#95c8cb082d79"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>OnePost()</h3></div><ul><li>Set our state</li><li>We are using <code class="BlockContent_inlineCode__vDn_C">useParams()</code> for our slug. This is a React Hook that the <code class="BlockContent_inlineCode__vDn_C">react-router-dom</code> package gives to pull URL parameters.</li><li>In the <code class="BlockContent_inlineCode__vDn_C">useEffect()</code> we are again fetching our data from <code class="BlockContent_inlineCode__vDn_C">sanityClient</code></li><li>This GROQ query is a little different than our previous call. This one is pulling a particular post by its slug. Remember, this slug was set in our Sanity Studio. We are going to be pulling out the title, slug, mainImage, body, and then the name and image of the author!</li><li>We then set all the data and catch any errors!</li><li>If no post shows up, we'll show “Loading…” text.</li></ul><div data-block-key="9f02cfc11bf5"><h3 class="BlockContent_header_h3__d_9uj BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="9f02cfc11bf5"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#9f02cfc11bf5"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>The return</h3></div><ul><li>Display the title of the post</li><li>Show the author’s image and then name. We are using our <code class="BlockContent_inlineCode__vDn_C">urlFor</code> here. Notice we chained multiple things here. First, the image, we then set width, and then added <code class="BlockContent_inlineCode__vDn_C">url()</code> to create that URL. To learn all about presenting images, visit <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/docs/presenting-images">this page</a>.</li><li>We then display the main image of the blog post. Again, we are using <code class="BlockContent_inlineCode__vDn_C">urlFor()</code> here.</li><li>Lastly, we have used <code class="BlockContent_inlineCode__vDn_C">BlockContent</code> for the body of the blog. This will take all the text and images that are in our Sanity Studio and display it nicely!</li></ul><div data-block-key="170d4b8cd3bb"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="170d4b8cd3bb"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#170d4b8cd3bb"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Putting it all together</h2></div><p>Now that we have our components set up, we can head on over to “localhost:3000” and see a list of our blog posts. If we click on any of those, it will redirect us to that particular blog post and display our information! That URL should look something like this: <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="http://localhost:3000/sanity-react">http://localhost:3000/sanity-react</a></p><p>And we now have a functioning blog with blog posts! All of our content is living in our Sanity Studio and if we want to add more, remove one, or edit the content in an existing one, we can head there to do so! Remember, our Sanity Studio is living at “localhost:3333” and we must run <code class="BlockContent_inlineCode__vDn_C">sanity start</code> in our folder <code class="BlockContent_inlineCode__vDn_C">sanity-react/mysanityblog</code>.</p><div data-block-key="c6e53b527336"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="c6e53b527336"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#c6e53b527336"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Styling our application</h2></div><p>Let’s add some styling!</p><p>Feel free to skip this section if you would like to do your own styling!</p><p>We are going to be using <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="https://tailwindcss.com/">Tailwind CSS</a>! Tailwind is a CSS framework that can be highly-customizable! But also provides amazing building blocks right out of the box.</p><p>Let's go ahead and add that in. To do so, head to our <code class="BlockContent_inlineCode__vDn_C">src/index.css</code> file, clear out the existing code, and input the following code:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="true" data-long-last-line-mobile="true"><div><pre class="refractor language-css"><code class="language-css"><span class="token comment">/* src/index.css */</span> <span class="token atrule"><span class="token rule">@import</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"https://unpkg.com/@tailwindcss/typography@0.2.x/dist/typography.min.css"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span></span> <span class="token atrule"><span class="token rule">@import</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span></span> <span class="token atrule"><span class="token rule">@import</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span></span> <span class="token selector">.cursive</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Amatic SC"</span><span class="token punctuation">,</span> cursive<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.prose img</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>We are importing the necessary Tailwind packages. Also, a Google font that we’ll use.</p><p>The prose comes from that first import (<a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="https://tailwindcss.com/docs/typography-plugin">typography</a>). This will help our body in our “OnePost” render correctly. Tailwind needs this when pulling from Sanity Studio.</p><div class="Message_root__p0LS9 shared_bg2__DFMii shared_fg1__EHH82 shared_box__eqBFk shared_borderRadius__O_jrc" data-state="success"><div class="Message_header__4_sT4"><div class="Message_icon__mP21J"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2 11.7V16h-4v-2.3C8.48 12.63 7 11.53 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.49-1.51 3.65-3 4.7z"></path></svg></div><h3 class="Message_title__3zvcq shared_header6__lhz92 shared_header__67AqL">Protip</h3></div><div class="Message_body__57ckl shared_text3__MQrA6 shared_fg2__gvnW7"><p>There are other ways to import Tailwind so you don’t need to import the entire package every time. You can find that information here: <span>https://tailwindcss.com/docs/installation</span></p></div></div><div data-block-key="b0e701902d86"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="b0e701902d86"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#b0e701902d86"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Styling AllPosts() with Tailwind</h2></div><p>Here is the <code class="BlockContent_inlineCode__vDn_C">AllPosts()</code> component with Tailwind:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="true" data-long-last-line-mobile="true"><div><pre class="refractor language-javascript"><code class="language-javascript"><span class="token comment">// src/components/AllPosts.js</span> <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> sanityClient <span class="token keyword">from</span> <span class="token string">"../client.js"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">AllPosts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>allPostsData<span class="token punctuation">,</span> setAllPosts<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> sanityClient <span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">*[_type == "post"]{ title, slug, mainImage{ asset->{ _id, url } } }</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setAllPosts</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"bg-green-100 min-h-screen p-12"</span><span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"container mx-auto"</span><span class="token operator">></span> <span class="token operator"><</span>h2 className<span class="token operator">=</span><span class="token string">"text-5xl flex justify-center cursive"</span><span class="token operator">></span>Blog Posts<span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span>h3 className<span class="token operator">=</span><span class="token string">"text-lg text-gray-600 flex justify-center mb-12"</span><span class="token operator">></span> Welcome to my blog posts page<span class="token operator">!</span> <span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"grid md:grid-cols-2 lg:grid-cols-3 gap-8"</span><span class="token operator">></span> <span class="token punctuation">{</span>allPostsData <span class="token operator">&&</span> allPostsData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">post<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token operator"><</span>Link to<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">"/"</span> <span class="token operator">+</span> post<span class="token punctuation">.</span>slug<span class="token punctuation">.</span>current<span class="token punctuation">}</span> key<span class="token operator">=</span><span class="token punctuation">{</span>post<span class="token punctuation">.</span>slug<span class="token punctuation">.</span>current<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>span className<span class="token operator">=</span>"block h<span class="token operator">-</span><span class="token number">64</span> relative rounded shadow leading<span class="token operator">-</span>snug bg<span class="token operator">-</span>white border<span class="token operator">-</span>l<span class="token operator">-</span><span class="token number">8</span> border<span class="token operator">-</span>green<span class="token operator">-</span><span class="token number">400</span>" key<span class="token operator">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span>img className<span class="token operator">=</span><span class="token string">"w-full h-full rounded-r object-cover absolute"</span> src<span class="token operator">=</span><span class="token punctuation">{</span>post<span class="token punctuation">.</span>mainImage<span class="token punctuation">.</span>asset<span class="token punctuation">.</span>url<span class="token punctuation">}</span> alt<span class="token operator">=</span><span class="token string">""</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>span className<span class="token operator">=</span>"block relative h<span class="token operator">-</span>full flex justify<span class="token operator">-</span>end items<span class="token operator">-</span>end pr <span class="token operator">-</span><span class="token number">4</span> pb<span class="token operator">-</span><span class="token number">4</span>" <span class="token operator">></span> <span class="token operator"><</span>h2 className<span class="token operator">=</span>"text<span class="token operator">-</span>gray<span class="token operator">-</span><span class="token number">800</span> text<span class="token operator">-</span>lg font<span class="token operator">-</span>bold px<span class="token operator">-</span><span class="token number">3</span> py<span class="token operator">-</span><span class="token number">4</span> bg<span class="token operator">-</span>red<span class="token operator">-</span><span class="token number">700</span> text<span class="token operator">-</span>red<span class="token operator">-</span><span class="token number">100</span> bg<span class="token operator">-</span>opacity<span class="token operator">-</span><span class="token number">75</span> rounded" <span class="token operator">></span> <span class="token punctuation">{</span>post<span class="token punctuation">.</span>title<span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p><br/>Once that is all in, we should see something like this at “localhost:3000”:</p><figure class="LightboxImage_figure__1Lrdg "><div type="button" aria-expanded="false" aria-controls="global-lightbox" aria-haspopup="dialog" class="LightboxImage_imageContainer__m4Bo6 LightboxImage_imageWithDialog__7D0yC"><div class="LightboxImage_image__v2sPU Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:2.0814332247557004;--source-width:3834px;max-width:var(--source-width)"><div class="Image_lqip__4DIba" data-show-placeholder="true" data-is-loaded="0" aria-hidden="true" style="padding-bottom:48.04381846635368%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?rect=0,1,3834,1840&w=800&h=384&fit=clip&auto=format" alt="View of AllPosts() route with blog post tile" loading="lazy" srcSet="https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?rect=3,0,3828,1842&w=320&h=154&fit=clip&auto=format 320w,https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?rect=3,0,3828,1842&w=480&h=231&fit=clip&auto=format 480w,https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?rect=0,2,3834,1839&w=640&h=307&fit=clip&auto=format 640w,https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?rect=1,0,3833,1842&w=720&h=346&fit=clip&auto=format 720w,https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?rect=0,1,3834,1840&w=800&h=384&fit=clip&auto=format 800w,https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?rect=0,1,3834,1841&w=960&h=461&fit=clip&auto=format 960w,https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?w=1280&h=615&fit=clip&auto=format 1280w,https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?rect=1,0,3833,1842&w=1440&h=692&fit=clip&auto=format 1440w,https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?rect=1,0,3833,1842&w=1600&h=769&fit=clip&auto=format 1600w,https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?rect=0,1,3834,1841&w=1920&h=922&fit=clip&auto=format 1920w,https://cdn.sanity.io/images/81pocpw8/production/fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842.png?w=3834&h=1842&fit=clip&auto=format 3834w" sizes="(max-width: 720px) 100vw, 720px" class="Image_img__5ZmPX"/></noscript></div></div></figure><p><br/>Looks great!</p><div data-block-key="750be757b266"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="750be757b266"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#750be757b266"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>Styling OnePost() with Tailwind</h2></div><p>Here is the <code class="BlockContent_inlineCode__vDn_C">OnePost()</code> component with Tailwind:</p><div class="BlockContent_code__48zBS"><div class="CodeSnippet_container__MjLiJ code-snippet"><div class="CodeSnippet_root__Dremt" data-long-last-line="true" data-long-last-line-mobile="true"><div><pre class="refractor language-javascript"><code class="language-javascript"><span class="token comment">// src/component/OnePost.js</span> <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> useParams <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> sanityClient <span class="token keyword">from</span> <span class="token string">"../client.js"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> BlockContent <span class="token keyword">from</span> <span class="token string">"@sanity/block-content-to-react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> imageUrlBuilder <span class="token keyword">from</span> <span class="token string">"@sanity/image-url"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> builder <span class="token operator">=</span> <span class="token function">imageUrlBuilder</span><span class="token punctuation">(</span>sanityClient<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">urlFor</span><span class="token punctuation">(</span><span class="token parameter">source</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> builder<span class="token punctuation">.</span><span class="token function">image</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">OnePost</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>postData<span class="token punctuation">,</span> setPostData<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> slug <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useParams</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> sanityClient <span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">*[slug.current == "</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>slug<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"]{ title, slug, mainImage{ asset->{ _id, url } }, body, "name": author->name, "authorImage": author->image }</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setPostData</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>slug<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>postData<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator"><</span>div<span class="token operator">></span>Loading<span class="token operator">...</span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"bg-gray-200 min-h-screen p-12"</span><span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"container shadow-lg mx-auto bg-green-100 rounded-lg"</span><span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"relative"</span><span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"absolute h-full w-full flex items-center justify-center p-8"</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token comment">/* Title Section */</span><span class="token punctuation">}</span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"bg-white bg-opacity-75 rounded p-12"</span><span class="token operator">></span> <span class="token operator"><</span>h2 className<span class="token operator">=</span><span class="token string">"cursive text-3xl lg:text-6xl mb-4"</span><span class="token operator">></span> <span class="token punctuation">{</span>postData<span class="token punctuation">.</span>title<span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"flex justify-center text-gray-800"</span><span class="token operator">></span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">urlFor</span><span class="token punctuation">(</span>postData<span class="token punctuation">.</span>authorImage<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">url</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span> className<span class="token operator">=</span><span class="token string">"w-10 h-10 rounded-full"</span> alt<span class="token operator">=</span><span class="token string">"Author is Kap"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>h4 className<span class="token operator">=</span><span class="token string">"cursive flex items-center pl-2 text-2xl"</span><span class="token operator">></span> <span class="token punctuation">{</span>postData<span class="token punctuation">.</span>name<span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>img className<span class="token operator">=</span><span class="token string">"w-full object-cover rounded-t"</span> src<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">urlFor</span><span class="token punctuation">(</span>postData<span class="token punctuation">.</span>mainImage<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">url</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span> alt<span class="token operator">=</span><span class="token string">""</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">"400px"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"px-16 lg:px-48 py-12 lg:py-20 prose lg:prose-xl max-w-full"</span><span class="token operator">></span> <span class="token operator"><</span>BlockContent blocks<span class="token operator">=</span><span class="token punctuation">{</span>postData<span class="token punctuation">.</span>body<span class="token punctuation">}</span> projectId<span class="token operator">=</span><span class="token punctuation">{</span>sanityClient<span class="token punctuation">.</span>clientConfig<span class="token punctuation">.</span>projectId<span class="token punctuation">}</span> dataset<span class="token operator">=</span><span class="token punctuation">{</span>sanityClient<span class="token punctuation">.</span>clientConfig<span class="token punctuation">.</span>dataset<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre></div></div><button class="CodeSnippet_copyPasteButton__jU6lg" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 512 512" class="CodeSnippet_copyPasteIcon__PcX2_" height="1em" width="1em"><path stroke="none" d="M405.333 80h-87.35C310.879 52.396 285.821 32 256 32s-54.879 20.396-61.983 48h-87.35C83.198 80 64 99.198 64 122.667v314.665C64 460.801 83.198 480 106.667 480h298.666C428.802 480 448 460.801 448 437.332V122.667C448 99.198 428.802 80 405.333 80zM256 80c11.729 0 21.333 9.599 21.333 21.333s-9.604 21.334-21.333 21.334-21.333-9.6-21.333-21.334S244.271 80 256 80zm152 360H104V120h40v72h224v-72h40v320z"></path></svg></button></div></div><p>Notice we are using the <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="https://tailwindcss.com/docs/typography-plugin">prose</a> for our <code class="BlockContent_inlineCode__vDn_C">BlockContent</code>!<br/></p><p>Awesome! Go ahead and navigate to “localhost:3000” and click on the blog post card. We’ll then be navigated to the blog post! Here’s an example of how it should look!</p><p></p><figure class="LightboxImage_figure__1Lrdg "><div type="button" aria-expanded="false" aria-controls="global-lightbox" aria-haspopup="dialog" class="LightboxImage_imageContainer__m4Bo6 LightboxImage_imageWithDialog__7D0yC"><div class="LightboxImage_image__v2sPU Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:2.1268075639599555;--source-width:3824px;max-width:var(--source-width)"><div class="Image_lqip__4DIba" data-show-placeholder="true" data-is-loaded="0" aria-hidden="true" style="padding-bottom:47.01882845188285%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?rect=0,1,3824,1797&w=800&h=376&fit=clip&auto=format" alt="View of OnePost() component with blog post showing" loading="lazy" srcSet="https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?rect=0,3,3824,1793&w=320&h=150&fit=clip&auto=format 320w,https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?rect=3,0,3819,1798&w=480&h=226&fit=clip&auto=format 480w,https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?rect=1,0,3823,1798&w=640&h=301&fit=clip&auto=format 640w,https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?rect=3,0,3819,1798&w=720&h=339&fit=clip&auto=format 720w,https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?rect=0,1,3824,1797&w=800&h=376&fit=clip&auto=format 800w,https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?rect=0,1,3824,1796&w=960&h=451&fit=clip&auto=format 960w,https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?rect=1,0,3823,1798&w=1280&h=602&fit=clip&auto=format 1280w,https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?w=1440&h=677&fit=clip&auto=format 1440w,https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?rect=0,1,3824,1797&w=1600&h=752&fit=clip&auto=format 1600w,https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?rect=1,0,3823,1798&w=1920&h=903&fit=clip&auto=format 1920w,https://cdn.sanity.io/images/81pocpw8/production/635d0a64d65478656fb17945aa98a849e4928927-3824x1798.png?w=3824&h=1798&fit=clip&auto=format 3824w" sizes="(max-width: 720px) 100vw, 720px" class="Image_img__5ZmPX"/></noscript></div></div></figure><div data-block-key="3affadbf1222"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="3affadbf1222"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#3affadbf1222"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a>We built a blog!</h2></div><p>Using React from <code class="BlockContent_inlineCode__vDn_C">create-react-app</code>, using Sanity to manage our content, and using Tailwind CSS for styling, we have created a pretty cool blog!</p><p>The great thing about this is all we have to do is add blog posts to our Sanity Studio and it will automatically show up in our React application!</p><p>Remember, the final code for this project can be found <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer nofollow ugc" target="_self" href="https://github.com/sanity-io/create-react-app-blog">here</a>!</p><p>What do you think of your blog built with React and Sanity? Let us know in the <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="https://slack.sanity.io/">Community</a> or on Twitter! We would love to see it! The sky’s the limit with your new blog! Happy blogging!</p><p></p><div data-block-key="d396b34d7621"><h2 class="BlockContent_header_h2__f5Dv6 BlockContent_header__S_c2p BlockContent_anchoredHeading__cGKVW shared_fg1__EHH82 shared_header__67AqL" id="d396b34d7621"><a class="BlockContent_copyAnchor__7Cy0v shared_fg2__gvnW7" href="/guides/build-your-first-blog-using-react#d396b34d7621"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></a><a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/">Sanity</a> – build remarkable experiences at scale</h2></div><p>Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.</p><p>Sanity scales from weekend projects to enterprise needs and is used by companies like <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/case-studies/puma">Puma</a>, <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/blog/interview-scott-gentz-att">AT&T</a>, <a class="BlockContent_link__rjkAZ shared_link__QWAu0" rel="noreferrer" target="_self" href="/blog/how-rbi-uses-structured-content">Burger King</a>, Tata, and Figma.</p></div><div class="UpsellCtas_container__FMafW"><a class="UpsellCtas_primaryCta__i_1hA shared_primaryButton__JzTUh shared_button__GdPAZ shared_baseButton__3OPoI shared_hairline2__qAj6m shared_resetButton__jHRBh shared_box__eqBFk shared_borderRadius__O_jrc shared_focusOutlineOutside__RZab5" href="/get-started">Get started</a><a class="UpsellCtas_secondaryCta__kWVHQ shared_secondaryButton__BR6YV shared_button__GdPAZ shared_baseButton__3OPoI shared_hairline2__qAj6m shared_resetButton__jHRBh shared_box__eqBFk shared_borderRadius__O_jrc shared_focusOutlineOutside__RZab5" href="/product-demo">Watch demo</a></div></div><div class="ContributionPageContent_aside__EKSqK"><button type="button" aria-controls="page-nav-dialog-menu" aria-expanded="true" class="PageNav_mobileMenuBtn__I6I4S shared_ghostButton__rENws shared_button__GdPAZ shared_baseButton__3OPoI shared_hairline2__qAj6m shared_resetButton__jHRBh shared_box__eqBFk shared_borderRadius__O_jrc shared_focusOutlineOutside__RZab5 shared_hairline1__dHji5 shared_link__QWAu0">Close<!-- --> table of contents<svg data-sanity-icon="close" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 7L7 18M7 7L18 18" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></button><nav id="page-nav-dialog-menu" aria-label="Table of contents" class="PageNav_nav___1CWr shared_hairline2__qAj6m PageNav_docsNav__6d8Yr" data-open="true"><h2 class="PageNav_title__q2Teq shared_label__Ytarj shared_label_base__ALIe4 shared_fg3__NXgMk">Page content</h2><ul class="PageNav_list__FV_sX shared_resetList__sPSb0 shared_reset__i9XcS"><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#3431846ee1e1" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Powered by Sanity</a><ul class="PageNav_nestedList__XB2hV"><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#be79718e7152" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo PageNav_headingLevel2__C9J0g shared_text5__UErjB">Sanity Studio</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#6e35f2e6cb9c" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo PageNav_headingLevel2__C9J0g shared_text5__UErjB">GROQ</a></li></ul></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#565172d2a89e" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Our project's structure</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#7672e19173eb" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Setting up a new React SPA</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#c46733c34d93" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Setting up Sanity</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#96397fe01053" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Adding content to Sanity Studio</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#6020abf65417" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Connecting Sanity to our React app</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#923ce1d96837" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Building our React components</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#9114908f01c1" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Setting up React Router</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#09943e6d2b68" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Building the page for all the blog posts</a><ul class="PageNav_nestedList__XB2hV"><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#e65d5b1d1df8" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo PageNav_headingLevel2__C9J0g shared_text5__UErjB">Top of the file</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#0e9911890a9c" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo PageNav_headingLevel2__C9J0g shared_text5__UErjB">AllPosts()</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#508e31f2071f" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo PageNav_headingLevel2__C9J0g shared_text5__UErjB">The return</a></li></ul></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#df4870b69e38" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Building the page for an individual blog post</a><ul class="PageNav_nestedList__XB2hV"><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#5c8f3cce7217" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo PageNav_headingLevel2__C9J0g shared_text5__UErjB"> Top of the file</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#95c8cb082d79" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo PageNav_headingLevel2__C9J0g shared_text5__UErjB">OnePost()</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#9f02cfc11bf5" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo PageNav_headingLevel2__C9J0g shared_text5__UErjB">The return</a></li></ul></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#170d4b8cd3bb" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Putting it all together</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#c6e53b527336" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Styling our application</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#b0e701902d86" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Styling AllPosts() with Tailwind</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#750be757b266" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">Styling OnePost() with Tailwind</a></li><li class="PageNav_item__KnwA0 shared_text4__vymfi"><a href="#3affadbf1222" class="PageNav_link__or1s_ shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo">We built a blog!</a></li></ul></nav><div class="UpsellCtas_container__FMafW"><a class="UpsellCtas_primaryCta__i_1hA shared_primaryButton__JzTUh shared_button__GdPAZ shared_baseButton__3OPoI shared_hairline2__qAj6m shared_resetButton__jHRBh shared_box__eqBFk shared_borderRadius__O_jrc shared_focusOutlineOutside__RZab5" href="/get-started">Get started with Sanity</a></div></div></div><aside class="ContributionReactions_root__3E8g_ shared_sectionContainer2___zZ0P shared_container2__iZo6U shared_container1__yecs8 shared_sectionContainerPadding2__wvg1y"><h2 class="ContributionReactions_title__Hqo_Q shared_header6__lhz92 shared_header__67AqL">Share your love</h2><div class="ContributionReactions_sticky__yPFps"><div class="ContributionReactions_tooltipSmall__Vj4IJ"><button class="ContributionReactions_btn__z1Ngh shared_resetButton__jHRBh" aria-label="Like this guide"><svg data-sanity-icon="heart" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 16C15.8 17.3235 12.5 20.5 12.5 20.5C12.5 20.5 9.2 17.3235 8 16C5.2 12.9118 4.5 11.7059 4.5 9.5C4.5 7.29412 6.1 5.5 8.5 5.5C10.5 5.5 11.7 6.82353 12.5 8.14706C13.3 6.82353 14.5 5.5 16.5 5.5C18.9 5.5 20.5 7.29412 20.5 9.5C20.5 11.7059 19.8 12.9118 17 16Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg><div class="ContributionReactions_btnCount__hPTXN shared_text4__vymfi shared_text4__vymfi">124</div></button><div class="ContributionReactions_tooltip__pr_qZ shared_text4__vymfi shared_fg2__gvnW7 shared_borderRadius__O_jrc">Like this guide</div></div><div class="ContributionReactions_tooltipLarge__DX0Ox"><button class="ContributionReactions_btn__z1Ngh shared_resetButton__jHRBh" aria-label="Like this guide" data-state="closed"><svg data-sanity-icon="heart" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 16C15.8 17.3235 12.5 20.5 12.5 20.5C12.5 20.5 9.2 17.3235 8 16C5.2 12.9118 4.5 11.7059 4.5 9.5C4.5 7.29412 6.1 5.5 8.5 5.5C10.5 5.5 11.7 6.82353 12.5 8.14706C13.3 6.82353 14.5 5.5 16.5 5.5C18.9 5.5 20.5 7.29412 20.5 9.5C20.5 11.7059 19.8 12.9118 17 16Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg><div class="ContributionReactions_btnCount__hPTXN shared_text4__vymfi shared_text4__vymfi">124</div></button></div><div class="ContributionReactions_tooltipSmall__Vj4IJ"><button class="ContributionReactions_btn__z1Ngh shared_resetButton__jHRBh" aria-label="What do you think of this guide?"><svg data-sanity-icon="comment" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 16.5H9.5V20.5L13.5 16.5H17.5C18.6046 16.5 19.5 15.6046 19.5 14.5V8.5C19.5 7.39543 18.6046 6.5 17.5 6.5H7.5C6.39543 6.5 5.5 7.39543 5.5 8.5V14.5C5.5 15.6046 6.39543 16.5 7.5 16.5Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></button><div class="ContributionReactions_tooltip__pr_qZ shared_text4__vymfi shared_fg2__gvnW7 shared_borderRadius__O_jrc">What do you think of this guide?</div></div><div class="ContributionReactions_tooltipLarge__DX0Ox"><button class="ContributionReactions_btn__z1Ngh shared_resetButton__jHRBh" aria-label="What do you think of this guide?" data-state="closed"><svg data-sanity-icon="comment" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 16.5H9.5V20.5L13.5 16.5H17.5C18.6046 16.5 19.5 15.6046 19.5 14.5V8.5C19.5 7.39543 18.6046 6.5 17.5 6.5H7.5C6.39543 6.5 5.5 7.39543 5.5 8.5V14.5C5.5 15.6046 6.39543 16.5 7.5 16.5Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></button></div><dialog class="ContributionReactions_dialog__5pD2w"><div class="ContributionReactions_modal__s72aL shared_text4__vymfi shared_bg2__DFMii shared_borderRadius__O_jrc shared_hairline2__qAj6m shared_popoverShadow__EHSw5"><div class="FeedbackWidget_feedbackWidget__L01zr shared_fg3__NXgMk shared_hairline1__dHji5" data-exchange="true"><h3 class="FeedbackWidget_formHeading__KxGsU" id="form-label">What did you think of this <!-- -->guide<!-- -->?</h3><div class="FeedbackWidget_formOptions__kvnK7" role="group" aria-labelledby="rating-label"><button class="FeedbackWidget_feedbackButton__Ll8aT shared_button__GdPAZ shared_baseButton__3OPoI shared_hairline2__qAj6m shared_resetButton__jHRBh shared_box__eqBFk shared_borderRadius__O_jrc shared_focusOutlineOutside__RZab5" data-isloading="false" data-selected="false">It didn't work</button><button class="FeedbackWidget_feedbackButton__Ll8aT shared_button__GdPAZ shared_baseButton__3OPoI shared_hairline2__qAj6m shared_resetButton__jHRBh shared_box__eqBFk shared_borderRadius__O_jrc shared_focusOutlineOutside__RZab5" data-isloading="false" data-selected="false">Isn't for me</button><button class="FeedbackWidget_feedbackButton__Ll8aT shared_button__GdPAZ shared_baseButton__3OPoI shared_hairline2__qAj6m shared_resetButton__jHRBh shared_box__eqBFk shared_borderRadius__O_jrc shared_focusOutlineOutside__RZab5" data-isloading="false" data-selected="false">Useful</button><button class="FeedbackWidget_feedbackButton__Ll8aT shared_button__GdPAZ shared_baseButton__3OPoI shared_hairline2__qAj6m shared_resetButton__jHRBh shared_box__eqBFk shared_borderRadius__O_jrc shared_focusOutlineOutside__RZab5" data-isloading="false" data-selected="false">Amazing!</button></div><button class="FeedbackWidget_reportButton__exGrM shared_text4__vymfi shared_fg3__NXgMk shared_hover1__S5ioP">I want to suggest an improvement to this <!-- -->guide<!-- -->.</button></div><p class="FeedbackWidget_privacyNote__8P4rI shared_fg2__gvnW7 shared_text5__UErjB"><svg data-sanity-icon="info-outline" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 10.5V9M12.5 12V16M20.5 12.5C20.5 16.9183 16.9183 20.5 12.5 20.5C8.08172 20.5 4.5 16.9183 4.5 12.5C4.5 8.08172 8.08172 4.5 12.5 4.5C16.9183 4.5 20.5 8.08172 20.5 12.5Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg>Your feedback is visible only to the Sanity.io team and author(s) of this <!-- -->guide<!-- -->.</p></div></dialog></div></aside></main><section class="OmniviewSimpleBulletin_section__OQxQl shared_container2__iZo6U shared_container1__yecs8"><h2 class="OmniviewSimpleBulletin_sectionTitle__KEb8O shared_header5__D2Ipj shared_header__67AqL">Other guides by author</h2><div class="contributions-grid ContributionsGrid_root__CCFHb ContributionsGrid_twoColumn__Te_a8 "><article class="contribution-preview ContributionPreview_contributionCard__a5S6a shared_fg2__gvnW7 shared_box__eqBFk shared_borderRadius__O_jrc " data-focused="false" data-layout="oneColumn"><h4 class="ContributionPreview_contributionTitle__uOgN5 shared_fg1__EHH82 shared_header6__lhz92 shared_header__67AqL">Sanity Exchange: Community Appreciation Program</h4><div class="contribution-preview__img ContributionPreview_imageWrapper__1u0YG shared_fg1__EHH82 shared_bg2__DFMii"><div class="Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.6;--source-width:1200px"><div class="Image_lqip__4DIba" data-show-placeholder="true" data-is-loaded="0" aria-hidden="true" style="padding-bottom:62.5%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/81pocpw8/production/b742795b2df8ae76e242464e307e78afc805d25d-1200x900.png?rect=0,75,1200,750&w=800&h=500&fit=clip&auto=format" alt="Community Appreciation Program" loading="lazy" srcSet="https://cdn.sanity.io/images/81pocpw8/production/b742795b2df8ae76e242464e307e78afc805d25d-1200x900.png?rect=0,75,1200,750&w=320&h=200&fit=clip&auto=format 320w,https://cdn.sanity.io/images/81pocpw8/production/b742795b2df8ae76e242464e307e78afc805d25d-1200x900.png?rect=0,75,1200,750&w=480&h=300&fit=clip&auto=format 480w,https://cdn.sanity.io/images/81pocpw8/production/b742795b2df8ae76e242464e307e78afc805d25d-1200x900.png?rect=0,75,1200,750&w=640&h=400&fit=clip&auto=format 640w,https://cdn.sanity.io/images/81pocpw8/production/b742795b2df8ae76e242464e307e78afc805d25d-1200x900.png?rect=0,75,1200,750&w=720&h=450&fit=clip&auto=format 720w,https://cdn.sanity.io/images/81pocpw8/production/b742795b2df8ae76e242464e307e78afc805d25d-1200x900.png?rect=0,75,1200,750&w=800&h=500&fit=clip&auto=format 800w,https://cdn.sanity.io/images/81pocpw8/production/b742795b2df8ae76e242464e307e78afc805d25d-1200x900.png?rect=0,75,1200,750&w=960&h=600&fit=clip&auto=format 960w,https://cdn.sanity.io/images/81pocpw8/production/b742795b2df8ae76e242464e307e78afc805d25d-1200x900.png?rect=0,75,1200,750&w=1200&h=750&fit=clip&auto=format 1200w" sizes="(max-width: 400px) 100vw, 400px" class="Image_img__5ZmPX"/></noscript></div></div><div class="contribution-badges ContributionBadges_root__8EC4G ContributionBadges_layoutDefault___Z8ji shared_text4__vymfi"></div><p class="ContributionPreview_contributionDesc__veciW shared_text3__MQrA6 shared_fg2__gvnW7">Overview of Sanity's Community Appreciation Program</p><div class="ContributionPreview_authorsContainer__egpwm" data-authors="true"><div class="AuthorBadge_author__q4NXg ContributionPreview_authorBadge__WektT shared_text5__UErjB"><div class="AuthorBadge_authorPhoto__yBRe9"><div class="Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1;--source-width:1920px"><div class="Image_lqip__4DIba" data-show-placeholder="true" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=50&h=50&fit=clip&auto=format" alt="Kapehe's picture" loading="lazy" width="50" height="50" srcSet="https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=320&h=320&fit=clip&auto=format 320w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=480&h=480&fit=clip&auto=format 480w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=640&h=640&fit=clip&auto=format 640w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=720&h=720&fit=clip&auto=format 720w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=800&h=800&fit=clip&auto=format 800w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=960&h=960&fit=clip&auto=format 960w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=1280&h=1280&fit=clip&auto=format 1280w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=1440&h=1440&fit=clip&auto=format 1440w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=1600&h=1600&fit=clip&auto=format 1600w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=1920&h=1920&fit=clip&auto=format 1920w" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div>Kapehe</div></div></div><a class="ContributionPreview_contributionLink__fBKmy shared_overlayLink__kNVB1" href="/guides/sanity-exchange-community-appreciation-program"><span class="visually-hidden">Go to <!-- -->Sanity Exchange: Community Appreciation Program</span></a></article><article class="contribution-preview ContributionPreview_contributionCard__a5S6a shared_fg2__gvnW7 shared_box__eqBFk shared_borderRadius__O_jrc " data-focused="false" data-layout="oneColumn"><h4 class="ContributionPreview_contributionTitle__uOgN5 shared_fg1__EHH82 shared_header6__lhz92 shared_header__67AqL">3 things you need to know when getting started with Portable Text</h4><div class="contribution-preview__img ContributionPreview_imageWrapper__1u0YG shared_fg1__EHH82 shared_bg2__DFMii"><div class="Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1.6;--source-width:1200px"><div class="Image_lqip__4DIba" data-show-placeholder="true" data-is-loaded="0" aria-hidden="true" style="padding-bottom:62.5%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/81pocpw8/production/8074938c37555cade33f4a383c4f738d33de7b1b-1200x900.png?rect=0,75,1200,750&w=800&h=500&fit=clip&auto=format" alt="3 things you need to know when getting started with Portable Text" loading="lazy" srcSet="https://cdn.sanity.io/images/81pocpw8/production/8074938c37555cade33f4a383c4f738d33de7b1b-1200x900.png?rect=0,75,1200,750&w=320&h=200&fit=clip&auto=format 320w,https://cdn.sanity.io/images/81pocpw8/production/8074938c37555cade33f4a383c4f738d33de7b1b-1200x900.png?rect=0,75,1200,750&w=480&h=300&fit=clip&auto=format 480w,https://cdn.sanity.io/images/81pocpw8/production/8074938c37555cade33f4a383c4f738d33de7b1b-1200x900.png?rect=0,75,1200,750&w=640&h=400&fit=clip&auto=format 640w,https://cdn.sanity.io/images/81pocpw8/production/8074938c37555cade33f4a383c4f738d33de7b1b-1200x900.png?rect=0,75,1200,750&w=720&h=450&fit=clip&auto=format 720w,https://cdn.sanity.io/images/81pocpw8/production/8074938c37555cade33f4a383c4f738d33de7b1b-1200x900.png?rect=0,75,1200,750&w=800&h=500&fit=clip&auto=format 800w,https://cdn.sanity.io/images/81pocpw8/production/8074938c37555cade33f4a383c4f738d33de7b1b-1200x900.png?rect=0,75,1200,750&w=960&h=600&fit=clip&auto=format 960w,https://cdn.sanity.io/images/81pocpw8/production/8074938c37555cade33f4a383c4f738d33de7b1b-1200x900.png?rect=0,75,1200,750&w=1200&h=750&fit=clip&auto=format 1200w" sizes="(max-width: 400px) 100vw, 400px" class="Image_img__5ZmPX"/></noscript></div></div><div class="contribution-badges ContributionBadges_root__8EC4G ContributionBadges_layoutDefault___Z8ji shared_text4__vymfi"></div><p class="ContributionPreview_contributionDesc__veciW shared_text3__MQrA6 shared_fg2__gvnW7">When using Sanity, it's important to understand these 3 things when getting started with Portable Text.</p><div class="ContributionPreview_authorsContainer__egpwm" data-authors="true"><div class="AuthorBadge_author__q4NXg ContributionPreview_authorBadge__WektT shared_text5__UErjB"><div class="AuthorBadge_authorPhoto__yBRe9"><div class="Image_root__X2u6l" data-has-aspect="true" style="--aspect-ratio:1;--source-width:1920px"><div class="Image_lqip__4DIba" data-show-placeholder="true" data-is-loaded="0" aria-hidden="true" style="padding-bottom:100%;box-sizing:border-box;height:100%;background-size:cover;background-position:center"></div><noscript><img src="https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=50&h=50&fit=clip&auto=format" alt="Kapehe's picture" loading="lazy" width="50" height="50" srcSet="https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=320&h=320&fit=clip&auto=format 320w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=480&h=480&fit=clip&auto=format 480w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=640&h=640&fit=clip&auto=format 640w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=720&h=720&fit=clip&auto=format 720w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=800&h=800&fit=clip&auto=format 800w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=960&h=960&fit=clip&auto=format 960w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=1280&h=1280&fit=clip&auto=format 1280w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=1440&h=1440&fit=clip&auto=format 1440w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=1600&h=1600&fit=clip&auto=format 1600w,https://cdn.sanity.io/images/81pocpw8/production/f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920.jpg?w=1920&h=1920&fit=clip&auto=format 1920w" sizes="(max-width: 800px) 100vw, 800px" class="Image_img__5ZmPX"/></noscript></div></div><div>Kapehe</div></div></div><a class="ContributionPreview_contributionLink__fBKmy shared_overlayLink__kNVB1" href="/guides/3-things-you-need-to-know-when-getting-started-with-portable-text"><span class="visually-hidden">Go to <!-- -->3 things you need to know when getting started with Portable Text</span></a></article></div></section></div><dialog class="GlobalSearch_dialog__GVcL5 shared_fg1__EHH82 shared_bg1__OCL0e" id="global-search"></dialog><nav class="Footer_root__m_ukm" role="navigation" aria-label="Site footer"><div class="Footer_links__6wOW9"><div role="group" aria-label="Product"><h2 class="Footer_sectionTitle__HB_yi">Product</h2><a class="Footer_navLink__Fi28k" href="/studio">Sanity Studio</a><a class="Footer_navLink__Fi28k" href="/developer-experience">APIs</a><a class="Footer_navLink__Fi28k" href="/content-lake">Content Lake</a><a class="Footer_navLink__Fi28k" href="/ai-assist">AI Assist</a><a class="Footer_navLink__Fi28k" href="/security">Security & Compliance</a><a class="Footer_navLink__Fi28k" href="/compare-sanity">Compare Sanity</a><a class="Footer_navLink__Fi28k" href="/industry-cms">Use Cases</a></div><div role="group" aria-label="Resources"><h2 class="Footer_sectionTitle__HB_yi">Resources</h2><a class="Footer_navLink__Fi28k" href="/docs">Documentation</a><a class="Footer_navLink__Fi28k" href="/blog">Blog</a><a class="Footer_navLink__Fi28k" href="/resources">Resource library</a><a class="Footer_navLink__Fi28k" href="/customers">Customer stories</a><div><button type="button" class="Footer_navLinkWithDropdown__wwpvS" aria-expanded="false" aria-haspopup="menu">Guides<!-- --> <svg data-sanity-icon="chevron-down" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 10.5L12.5 14L9 10.5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></button><ul class="FallbackMenuItem_seoLinks__H13Ob"><li><a href="https://www.sanity.io/guides/build-your-first-blog-using-react">React Blog</a></li><li><a href="https://www.sanity.io/guides/the-blog-template">Gatsby Blog</a></li><li><a href="https://www.sanity.io/guides/the-landing-page-template">Next.js Landing Pages</a></li><li><a href="https://www.sanity.io/guides/make-a-pwa-with-react">Making a PWA</a></li><li><a href="https://www.sanity.io/guides/create-a-single-page-application-with-vuejs-and-sanity">Single Page Application</a></li><li><a href="https://www.sanity.io/guides/using-typescript-with-svelte">Svelte & Typescript App</a></li><li><a href="https://www.sanity.io/guides/tailwind-css-with-vue-js">Vue & Tailwind Blog</a></li><li><a href="https://www.sanity.io/guides/best-developer-portfolio-templates">Developer Portfolio Templates</a></li><li><a href="https://www.sanity.io/guides/form-validation-with-npm-yup">Form validation with Yup</a></li><li><a href="https://www.sanity.io/guides/nextjs-live-preview">Live Preview with Next.js and Sanity.io</a></li><li><a href="https://www.sanity.io/create-task-guides">Sanity Create task guides</a></li></ul></div><div><button type="button" class="Footer_navLinkWithDropdown__wwpvS" aria-expanded="false" aria-haspopup="menu">Templates<!-- --> <svg data-sanity-icon="chevron-down" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 10.5L12.5 14L9 10.5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></button><ul class="FallbackMenuItem_seoLinks__H13Ob"><li><a href="https://www.sanity.io/templates/blog-with-built-in-content-editing">Next.js blog</a></li><li><a href="https://www.sanity.io/templates/personal-website-with-built-in-content-editing">Next.js personal website</a></li><li><a href="https://www.sanity.io/templates/nextjs-sanity-clean">Clean Next.js + Sanity app</a></li><li><a href="https://www.sanity.io/templates/remix-sanity-clean">Clean Remix + Sanity app</a></li><li><a href="https://www.sanity.io/templates/sveltekit-sanity-clean">Clean SvelteKit + Sanity app</a></li><li><a href="https://www.sanity.io/templates">All Templates</a></li></ul></div><div><button type="button" class="Footer_navLinkWithDropdown__wwpvS" aria-expanded="false" aria-haspopup="menu">Partners<!-- --> <svg data-sanity-icon="chevron-down" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 10.5L12.5 14L9 10.5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></button><ul class="FallbackMenuItem_seoLinks__H13Ob"><li><a href="https://www.sanity.io/agency-partners">Agency partners</a></li><li><a href="https://www.sanity.io/technology-partners">Technology partners</a></li></ul></div><div><button type="button" class="Footer_navLinkWithDropdown__wwpvS" aria-expanded="false" aria-haspopup="menu">Explainers<!-- --> <svg data-sanity-icon="chevron-down" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 10.5L12.5 14L9 10.5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></button><ul class="FallbackMenuItem_seoLinks__H13Ob"><li><a href="https://www.sanity.io/headless-cms">Headless CMS 101</a></li><li><a href="https://www.sanity.io/static-websites">Static Sites 101</a></li><li><a href="https://www.sanity.io/headless-commerce">Headless Commerce 101</a></li><li><a href="https://www.sanity.io/cms-for-enterprise">CMS for enterprise</a></li><li><a href="https://www.sanity.io/headless-seo">Headless SEO</a></li><li><a href="/docs/localization">Localization</a></li><li><a href="https://www.sanity.io/content-as-a-service">Content as a Service</a></li><li><a href="https://www.sanity.io/what-is-a-digital-experience-platform">What is a DXP?</a></li><li><a href="https://www.sanity.io/typescript-guide">Typescript 101</a></li><li><a href="https://www.sanity.io/ecommerce-seo">Ecommerce SEO</a></li><li><a href="https://www.sanity.io/composable-dxp">What is a Composable DXP?</a></li><li><a href="https://www.sanity.io/what-is-an-api">What is an API?</a></li><li><a href="https://www.sanity.io/guides/graphql-vs-rest-api-comparison">GraphQL vs REST</a></li></ul></div><div><button type="button" class="Footer_navLinkWithDropdown__wwpvS" aria-expanded="false" aria-haspopup="menu">CMS<!-- --> <svg data-sanity-icon="chevron-down" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 10.5L12.5 14L9 10.5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg></button><ul class="FallbackMenuItem_seoLinks__H13Ob"><li><a href="/react-cms">React CMS</a></li><li><a href="/nextjs-cms">Next.JS CMS</a></li><li><a href="/cms-for-shopify">CMS for Shopify</a></li><li><a href="https://www.sanity.io/api-cms">API-first CMS</a></li><li><a href="/content-platform">Content platform</a></li><li><a href="/multilingual-cms">Multilingual CMS</a></li><li><a href="/static-site-cms">Static Site CMS</a></li><li><a href="/gatsby-cms">Gatsby CMS</a></li><li><a href="/nodejs-cms">Node CMS</a></li><li><a href="/ecommerce-cms">E-commerce CMS</a></li><li><a href="/vue-cms">Vue CMS</a></li><li><a href="/angular-cms">Angular CMS</a></li><li><a href="/graphql">GraphQL CMS</a></li><li><a href="/newspaper-cms">Newspaper CMS</a></li><li><a href="/magazine-cms">Magazine CMS</a></li><li><a href="/mobile-cms">CMS for apps</a></li><li><a href="/remix-cms">Remix CMS</a></li><li><a href="https://www.sanity.io/nuxtjs-cms">Nuxt CMS</a></li><li><a href="/sveltekit-cms">SvelteKit CMS</a></li><li><a href="https://www.sanity.io/agile-cms">Agile CMS</a></li><li><a href="https://www.sanity.io/11ty-cms">Eleventy CMS</a></li><li><a href="https://www.sanity.io/multi-site-cms">Multisite CMS</a></li></ul></div></div><div role="group" aria-label="Company"><h2 class="Footer_sectionTitle__HB_yi">Company</h2><a class="Footer_navLink__Fi28k" href="/contact/sales?ref=footer">Contact Sales</a><a class="Footer_navLink__Fi28k" href="/enterprise?ref=footer">Enterprise</a><a class="Footer_navLink__Fi28k" href="/careers">Careers</a><a class="Footer_navLink__Fi28k" href="/legal/tos">Terms of Service</a><a class="Footer_navLink__Fi28k" href="/legal/privacy">Privacy Policy</a><a class="Footer_navLink__Fi28k" href="/accessibility">Accessibility Statement</a><a class="Footer_navLink__Fi28k" target="_blank" href="https://cdn.sanity.io/files/3do82whm/next/6313de929b146cb92702c9fcdfcbcf296a9ae37e.pdf">Transparency Statement</a><a class="Footer_navLink__Fi28k" target="_blank" href="https://opensourcepledge.com/members/sanity/">Open Source Pledge</a></div></div><div class="Footer_socialSidebar__JL4GT"><div class="Footer_socialLinks__0DnKL"><h2 class="Footer_sectionTitle__HB_yi">Stay connected</h2><ul class="ChannelsLinks_socialLinkList__1i8Eh shared_resetList__sPSb0 shared_reset__i9XcS channels-links"><li><a class="ChannelsLinks_socialLink__8RLTb ChannelsLinks_link__ob22E shared_resetLink__WXQmo shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo shared_text4__vymfi" target="_blank" href="https://github.com/sanity-io"><span class="ChannelsLinks_socialLinkIcon__kueC3"><svg viewBox="0 0 256 250" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" height="32"><g><path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="currentColor"></path></g></svg></span> <!-- -->GitHub</a></li><li><a class="ChannelsLinks_socialLink__8RLTb ChannelsLinks_link__ob22E shared_resetLink__WXQmo shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo shared_text4__vymfi" target="_blank" href="https://slack.sanity.io"><span class="ChannelsLinks_socialLinkIcon__kueC3"><svg width="1em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M3.4 10.1a1.7 1.7 0 01-3.4 0c0-1 .8-1.7 1.7-1.7h1.7v1.7z"></path><path d="M4.2 10.1a1.7 1.7 0 013.4 0v4.2a1.7 1.7 0 01-3.4 0v-4.2z"></path><path d="M5.9 3.4a1.7 1.7 0 010-3.4c1 0 1.7.8 1.7 1.7v1.7H5.9z"></path><path d="M5.9 4.2a1.7 1.7 0 010 3.4H1.7a1.7 1.7 0 010-3.4h4.2z"></path><path d="M12.6 5.9a1.7 1.7 0 013.4 0c0 1-.8 1.7-1.7 1.7h-1.7V5.9z"></path><path d="M11.8 5.9a1.7 1.7 0 01-3.4 0V1.7a1.7 1.7 0 013.4 0v4.2z"></path><path d="M10.1 12.6a1.7 1.7 0 010 3.4c-1 0-1.7-.8-1.7-1.7v-1.7h1.7z"></path><path d="M10.1 11.8a1.7 1.7 0 010-3.4h4.2a1.7 1.7 0 010 3.4h-4.2z"></path></svg></span> <!-- -->Community</a></li><li><a class="ChannelsLinks_socialLink__8RLTb ChannelsLinks_link__ob22E shared_resetLink__WXQmo shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo shared_text4__vymfi" target="_blank" href="https://x.com/sanity_io"><span class="ChannelsLinks_socialLinkIcon__kueC3"><svg viewBox="0 0 1200 1227" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"></path></svg></span> <!-- -->X.com</a></li><li><a class="ChannelsLinks_socialLink__8RLTb ChannelsLinks_link__ob22E shared_resetLink__WXQmo shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo shared_text4__vymfi" target="_blank" href="https://bsky.app/profile/sanity.io"><span class="ChannelsLinks_socialLinkIcon__kueC3"><svg viewBox="0 0 360 320"><use href="/_next/static/media/bsky-logo.667b6b23.svg#icon"></use></svg></span> <!-- -->Bluesky</a></li><li><a class="ChannelsLinks_socialLink__8RLTb ChannelsLinks_link__ob22E shared_resetLink__WXQmo shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo shared_text4__vymfi" target="_blank" href="https://www.youtube.com/@sanity_io"><span class="ChannelsLinks_socialLinkIcon__kueC3"><svg width="1em" height="1em" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M164.7 37.7C172.3 39.8 178.3 45.8 180.3 53.4C184 67.2 184 96 184 96C184 96 184 124.8 180.4 138.6C178.3 146.3 172.4 152.3 164.8 154.3C151 158 96 158 96 158C96 158 41 158 27.3 154.3C19.7 152.2 13.7 146.2 11.7 138.6C8 124.8 8 96 8 96C8 96 8 67.2 11.6 53.4C13.7 45.7 19.6 39.7 27.2 37.7C41 34 96 34 96 34C96 34 151 34 164.7 37.7ZM124 96L78 69.8V122.2L124 96Z" fill="currentColor"></path></svg></span> <!-- -->YouTube</a></li><li><a class="ChannelsLinks_socialLink__8RLTb ChannelsLinks_link__ob22E shared_resetLink__WXQmo shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo shared_text4__vymfi" target="_blank" href="https://stackoverflow.com/questions/tagged/sanity"><span class="ChannelsLinks_socialLinkIcon__kueC3"><svg width="1em" viewBox="0 0 12 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.1 9.2h1.3v5H0v-5h1.3V13H10V9.2z"></path><path d="M2.6 8.8L9 10.1 9 9 3 7.6l-.3 1.2zm.9-3l5.7 2.7.6-1.1L4 4.7l-.5 1.1zM5 3l4.8 4 .9-1-5-4-.7 1zm3.1-3l-1 .8 3.8 5 1-.7L8.2 0zM2.5 11.7H9v-1.3H2.5v1.3z"></path></svg></span> <!-- -->Stack Overflow</a></li><li><a class="ChannelsLinks_socialLink__8RLTb ChannelsLinks_link__ob22E shared_resetLink__WXQmo shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo shared_text4__vymfi" href="/feed/rss"><span class="ChannelsLinks_socialLinkIcon__kueC3"><svg xmlns="http://www.w3.org/2000/svg" width="1em" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3.374 17c-.897 0-1.626-.727-1.626-1.624s.729-1.624 1.626-1.624 1.626.727 1.626 1.624-.729 1.624-1.626 1.624zm3.885 0c-.03-3.022-2.485-5.474-5.511-5.504v-2.406c4.361.03 7.889 3.555 7.92 7.91h-2.409zm4.081 0c-.016-5.297-4.303-9.571-9.592-9.594v-2.406c6.623.023 11.985 5.384 12 12h-2.408z"></path></svg></span> <!-- -->Blog RSS</a></li><li><a class="ChannelsLinks_socialLink__8RLTb ChannelsLinks_link__ob22E shared_resetLink__WXQmo shared_fg3__NXgMk shared_ghostLink__RI0VW shared_resetLink__WXQmo shared_text4__vymfi" href="/newsletter"><span class="ChannelsLinks_socialLinkIcon__kueC3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"></path><path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"></path></svg></span> <!-- -->Newsletter</a></li></ul></div></div><div class="Footer_bottom__wsfnU"><a class="Footer_logo__Rbx6w" href="/"><svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="28" height="28" rx="3" fill="#F03E2F"></rect><path d="M8.62 7.25c0 2.41 1.52 3.84 4.54 4.6l3.21.73c2.87.64 4.61 2.25 4.61 4.87a4.91 4.91 0 01-1.07 3.15c0-2.61-1.37-4.02-4.69-4.87l-3.15-.7c-2.52-.57-4.47-1.89-4.47-4.73a4.89 4.89 0 011.02-3.05z" fill="#FFFFFF"></path><path d="M17.94 16.8c1.37.87 1.97 2.07 1.97 3.8-1.13 1.42-3.12 2.22-5.46 2.22-3.94 0-6.7-1.9-7.3-5.21h3.78c.48 1.52 1.77 2.22 3.5 2.22 2.1 0 3.49-1.1 3.52-3.03" fill="#FFFFFFB3"></path><path d="M10.59 10.82a3.99 3.99 0 01-1.97-3.57c1.1-1.4 3-2.27 5.32-2.27 4 0 6.33 2.08 6.9 5H17.2c-.4-1.15-1.4-2.05-3.23-2.05-1.96 0-3.3 1.12-3.37 2.9" fill="#FFFFFFB3"></path></svg></a><div></div><div class="Footer_copyright__8W_Zp">© Sanity <!-- -->2025</div><button class="Footer_editCookieConsentBtn__U4zIv">Cookie preferences</button><div aria-hidden="true" style="flex:1"></div><fieldset class="RadioSwitch_fieldset__Nve_L"><input type="radio" id="theme-switch-light" class="RadioSwitch_radio__7YSaL" data-index="0" name="theme-switch" value="light"/><label class="RadioSwitch_icon__6o4eQ" for="theme-switch-light" data-force-tooltip="false"><svg data-icon="sun" viewBox="0 0 25 25"><use href="/iconophor/sanity-icons/3.5.7/sun?replace-colors=currentColor&symbol=true#icon"></use></svg><div class="RadioSwitch_tooltip__EMWlF">Light mode</div></label><input type="radio" id="theme-switch-system" class="RadioSwitch_radio__7YSaL" data-index="1" name="theme-switch" value="system"/><label class="RadioSwitch_icon__6o4eQ" for="theme-switch-system" data-force-tooltip="false"><svg data-icon="desktop" viewBox="0 0 25 25"><use href="/iconophor/sanity-icons/3.5.7/desktop?replace-colors=currentColor&symbol=true#icon"></use></svg><div class="RadioSwitch_tooltip__EMWlF">System theme</div></label><input type="radio" id="theme-switch-dark" class="RadioSwitch_radio__7YSaL" data-index="2" name="theme-switch" value="dark"/><label class="RadioSwitch_icon__6o4eQ" for="theme-switch-dark" data-force-tooltip="false"><svg data-icon="moon" viewBox="0 0 25 25"><use href="/iconophor/sanity-icons/3.5.7/moon?replace-colors=currentColor&symbol=true#icon"></use></svg><div class="RadioSwitch_tooltip__EMWlF">Dark mode</div></label><div class="RadioSwitch_indicator__DJugd"></div></fieldset></div></nav></div><!--$--><!--/$--><!--$--><!--/$--><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N3ZSHCP" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"contribution":{"integrations":[],"conversionCta":{"body":[{"style":"h2","_key":"d396b34d7621","markDefs":[{"_type":"link","href":"https://www.sanity.io/","_key":"f55a77ef974e"}],"children":[{"_type":"span","marks":["f55a77ef974e"],"text":"Sanity","_key":"77402a51ef13"},{"marks":[],"text":" – build remarkable experiences at scale","_key":"ed58b2b44681","_type":"span"}],"_type":"block"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.","_key":"9cf93d5e67e90"}],"_type":"block","style":"normal","_key":"953123723e7a"},{"children":[{"marks":[],"text":"Sanity scales from weekend projects to enterprise needs and is used by companies like ","_key":"5ff109c068230","_type":"span"},{"_type":"span","marks":["664775fb897b"],"text":"Puma","_key":"438562c7c4e0"},{"text":", ","_key":"3b38887e9486","_type":"span","marks":[]},{"_type":"span","marks":["ebc969584265"],"text":"AT\u0026T","_key":"32607d90be00"},{"text":", ","_key":"97156dc6f54e","_type":"span","marks":[]},{"_key":"26d947f4bc12","_type":"span","marks":["694ac4fec152"],"text":"Burger King"},{"_type":"span","marks":[],"text":", Tata, and Figma.","_key":"9dce789bb9a0"}],"_type":"block","style":"normal","_key":"37e35854fb86","markDefs":[{"_type":"link","href":"/case-studies/puma","_key":"664775fb897b"},{"_type":"link","href":"/blog/how-rbi-uses-structured-content","_key":"694ac4fec152"},{"href":"/blog/interview-scott-gentz-att","_key":"ebc969584265","_type":"link"}]}]},"cssframeworks":null,"usecases":null,"title":"Build your first blog using React","netlifyDeployLink":null,"othersByAuthors":[{"curated":{"approved":true,"official":null,"featured":false,"upvoteCount":2},"slug":{"current":"sanity-exchange-community-appreciation-program","_type":"slug"},"_type":"contribution.guide","_createdAt":"2021-06-24T19:20:44Z","authors":[{"name":"Kapehe","handle":{"current":"kapehe","_type":"slug"},"photo":{"_type":"image","asset":{"_ref":"image-f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920-jpg","_type":"reference"}}}],"description":"Overview of Sanity's Community Appreciation Program","image":{"_type":"image","alt":"Community Appreciation Program","asset":{"_ref":"image-b742795b2df8ae76e242464e307e78afc805d25d-1200x900-png","_type":"reference"}},"externalLink":null,"studioVersion":null,"_id":"344408d9-edde-4fbc-a92c-10581adc0537","title":"Sanity Exchange: Community Appreciation Program"},{"slug":{"current":"3-things-you-need-to-know-when-getting-started-with-portable-text","_type":"slug"},"externalLink":null,"_id":"824135fb-4d9c-456f-81c5-fde74b8f19fa","description":"When using Sanity, it's important to understand these 3 things when getting started with Portable Text.","image":{"asset":{"_ref":"image-8074938c37555cade33f4a383c4f738d33de7b1b-1200x900-png","_type":"reference"},"_type":"image","alt":"3 things you need to know when getting started with Portable Text"},"_type":"contribution.guide","studioVersion":null,"_createdAt":"2021-05-26T03:28:51Z","title":"3 things you need to know when getting started with Portable Text","authors":[{"name":"Kapehe","handle":{"current":"kapehe","_type":"slug"},"photo":{"_type":"image","asset":{"_ref":"image-f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920-jpg","_type":"reference"}}}],"curated":{"approved":true,"official":null,"featured":false,"upvoteCount":10}}],"image":{"caption":null,"crop":null,"hotspot":null,"asset":{"_id":"image-41c8595944d919ef3289d24eb5884bf9b5385ab0-1200x900-jpg","_type":"sanity.imageAsset","url":"https://cdn.sanity.io/images/81pocpw8/production/41c8595944d919ef3289d24eb5884bf9b5385ab0-1200x900.jpg","metadata":{"dimensions":{"height":900,"width":1200},"lqip":"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EACEQAAICAgEEAwAAAAAAAAAAAAIDAQQAETEFEhMUFTJh/8QAFgEBAQEAAAAAAAAAAAAAAAAABAYH/8QAHxEAAQMDBQAAAAAAAAAAAAAAAQACAwQRsQYHMUGR/9oADAMBAAIRAxEAPwDP+NfapOsr7fGrnc4volJlwJUqREy3Oy/MkdactZqWwhA+YiecZ7LaKFkg5A4HmMfqKUiIMPZwg7dUofVvnbyxh9Jti6w75Sq2xZfYZ1OGQ22k2wZnMyRTuZwyVDVqRkN1/9k="}},"darkModeImage":null,"alt":"React logo and Sanity logo"},"_createdAt":"2020-08-26T21:31:40Z","body":[{"_key":"71df198adef4","markDefs":[],"children":[{"marks":[],"text":"TL;DR: Starting from scratch, we will build a blog using React and Sanity. We will create our React and Sanity projects, walk through the Sanity Studio, connect the React app to Sanity, and use React Routing to navigate through our app.","_key":"2053e9f5156c","_type":"span"}],"_type":"block","style":"normal"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"6c3d75a5f6ca"}],"_type":"block","style":"normal","_key":"1ea42db03957"},{"style":"normal","_key":"75bed5d92971","markDefs":[{"href":"https://www.sanity.io/create","_key":"1508d0238d49","_type":"link"}],"children":[{"text":"This guide will start from scratch, but if you would like to test out Sanity a little quicker, there are starters that you can find at ","_key":"ae441d0395d70","_type":"span","marks":[]},{"_type":"span","marks":["1508d0238d49"],"text":"sanity.io/create","_key":"709715fee1b01"},{"_type":"span","marks":[],"text":".","_key":"709715fee1b02"}],"_type":"block"},{"style":"normal","_key":"e754f173735b","markDefs":[{"_type":"link","href":"https://reactjs.org/docs/create-a-new-react-app.html","_key":"c048476f4348"},{"_type":"link","href":"https://tailwindcss.com/","_key":"2213d0690e69"}],"children":[{"text":"By starting from nothing, let's go over what we are going to cover in detail:","_key":"f717ccd1b93c0","_type":"span","marks":[]}],"_type":"block"},{"listItem":"bullet","markDefs":[],"children":[{"marks":[],"text":"Set up a basic React SPA using ","_key":"f84c1ff977a2","_type":"span"},{"_type":"span","marks":["code"],"text":"create-react-app","_key":"dce3b3985911"}],"level":1,"_type":"block","style":"normal","_key":"70dbeb9ccad2"},{"children":[{"_type":"span","marks":[],"text":"Set up our own content management system using Sanity","_key":"316106cdfe5f"}],"level":1,"_type":"block","style":"normal","_key":"321e1f901192","listItem":"bullet","markDefs":[]},{"style":"normal","_key":"2e78b9d2bdb5","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Learn about navigating our app using React Router","_key":"04e28ace7f4f"}],"level":1,"_type":"block"},{"style":"normal","_key":"b44ab89b7e7a","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Learn how to query for remote data","_key":"420518cb81d2"}],"level":1,"_type":"block"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Get started with styling using Tailwind CSS","_key":"aac36fbdc058"}],"level":1,"_type":"block","style":"normal","_key":"933b06854c7b","listItem":"bullet"},{"markDefs":[{"_key":"c048476f4348","_type":"link","href":"https://reactjs.org/docs/create-a-new-react-app.html"}],"children":[{"_type":"span","marks":[],"text":"let’s see how you can fetch (structured) content from Sanity and use it in your own React application. This method will work for an existing React app or one that is at the ","_key":"245b757549e6"},{"_type":"span","marks":["c048476f4348"],"text":"create-react-app","_key":"4c1ac82a570a1"},{"_type":"span","marks":[],"text":" stage.","_key":"4c1ac82a570a2"}],"_type":"block","style":"normal","_key":"c7117f8d3d24"},{"_type":"block","style":"normal","_key":"d3a0b3cf5a49","markDefs":[{"_type":"link","href":"https://github.com/sanity-io/create-react-app-blog","_key":"3d07005c555d"}],"children":[{"_key":"8e177d70a4680","_type":"span","marks":[],"text":"To find the completed project, head on over to "},{"_type":"span","marks":["3d07005c555d"],"text":"this GitHub repo","_key":"8e177d70a4681"},{"_type":"span","marks":[],"text":"!","_key":"8e177d70a4682"}]},{"children":[{"_key":"d38fb1bb49d9","_type":"span","marks":[],"text":"Powered by Sanity"}],"_type":"block","style":"h2","_key":"3431846ee1e1","markDefs":[]},{"_key":"233a0fc91c5d","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Sanity is how we can manage our structured content. Whether our application is a blog, a portfolio, or the next spaceship data cloud, we need all of our content to be handled in an organized and simple way. With Sanity, we can manage our content’s title, image, body text, etc. Anything content, Sanity can help manage.","_key":"7b8bb741f0d9"}],"_type":"block","style":"normal"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Sanity can manage the content for many different use cases. For example, an e-commerce site has products, prices for each product, and a description of the product. Sanity can hold all that information in one main location. In the case of Sanity, we would use the Sanity Studio.","_key":"9d86cb85868d0"}],"_type":"block","style":"normal","_key":"61dc04ba4187"},{"_key":"be79718e7152","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Sanity Studio","_key":"f7a589d50ea10"}],"_type":"block","style":"h3"},{"markDefs":[{"_type":"link","href":"https://www.sanity.io/studio","_key":"b26a5e4540b1"}],"children":[{"_type":"span","marks":[],"text":"Not only do we get the power of Sanity but we also get ","_key":"9b8265b16759"},{"marks":["b26a5e4540b1"],"text":"Sanity Studio","_key":"c99c7636d93f","_type":"span"},{"_type":"span","marks":[],"text":". Sanity Studio is an interface where we can view our content. The studio allows for image editing, the editing of fields, and can be used by developers and non-developers! All of this can be viewed in a nicely laid out UI/UX. In this tutorial, we will use Sanity Studio.","_key":"5e070840287d"}],"_type":"block","style":"normal","_key":"6b9fff10500a"},{"_key":"7cb009d02f40","markDefs":[{"_key":"3cd00e37e3bd","_type":"link","href":"https://www.sanity.io/docs/sanity-studio"}],"children":[{"_key":"6a08275c840f0","_type":"span","marks":[],"text":"To learn more about the Sanity Studio, we can find "},{"_key":"6a08275c840f1","_type":"span","marks":["3cd00e37e3bd"],"text":"the docs here"},{"marks":[],"text":".","_key":"6a08275c840f2","_type":"span"}],"_type":"block","style":"normal"},{"markDefs":[],"children":[{"_key":"c94ade4de7e6","_type":"span","marks":[],"text":"GROQ"}],"_type":"block","style":"h3","_key":"6e35f2e6cb9c"},{"markDefs":[],"children":[{"marks":[],"text":"Sanity offers two different ways to query for your content:","_key":"b0916b88b592","_type":"span"}],"_type":"block","style":"normal","_key":"d60e71aeeea3"},{"children":[{"_type":"span","marks":["1bcd7abb1184"],"text":"GraphQL","_key":"56f66e6403a40"}],"level":1,"_type":"block","style":"normal","_key":"3daa2ff630f2","listItem":"number","markDefs":[{"_type":"link","href":"https://www.sanity.io/docs/graphql","_key":"1bcd7abb1184"}]},{"children":[{"_type":"span","marks":["5f69b8c54104"],"text":"GROQ","_key":"5337a53b4af60"},{"text":"","_key":"095e37ada413","_type":"span","marks":[]}],"level":1,"_type":"block","style":"normal","_key":"09ba0cfeb80c","listItem":"number","markDefs":[{"href":"https://www.sanity.io/docs/groq","_key":"a38b6483c243","_type":"link"},{"_type":"link","href":"https://www.sanity.io/docs/overview-groq","_key":"5f69b8c54104"}]},{"_key":"51ce65db3855","markDefs":[],"children":[{"_type":"span","marks":[],"text":"We are going to also be using ","_key":"2b1dc43ef5dc0"},{"marks":[],"text":"GROQ","_key":"200fa826626c1","_type":"span"},{"_type":"span","marks":[],"text":" today. GROQ stands for Graph-Relational Object Queries. This is designed to query collections of schema-less JSON documents. GROQ can do many things, for example, join several documents, expressive filtering, and create the response into something the application can use.","_key":"200fa826626c2"}],"_type":"block","style":"normal"},{"_key":"11f496487fed","markDefs":[{"_type":"link","href":"https://www.sanity.io/docs/groq","_key":"d42924a8b841"}],"children":[{"text":"To learn more about GROQ visit ","_key":"b2360118659d0","_type":"span","marks":[]},{"_key":"f31010384e871","_type":"span","marks":["d42924a8b841"],"text":"the docs here"},{"_type":"span","marks":[],"text":".","_key":"f31010384e872"}],"_type":"block","style":"normal"},{"_key":"b3db9c2cffc1","markDefs":[],"children":[{"_key":"8490601650170","_type":"span","marks":[],"text":"Let’s get building!"}],"_type":"block","style":"normal"},{"style":"h2","_key":"565172d2a89e","markDefs":[],"children":[{"text":"Our project's structure","_key":"b78e9f7af6eb","_type":"span","marks":[]}],"_type":"block"},{"style":"normal","_key":"980332d29be9","markDefs":[],"children":[{"_key":"23fdf10d1c58","_type":"span","marks":[],"text":"Before we begin let's talk about how our project is going to be organized. Once we create our React app using "},{"_type":"span","marks":["code"],"text":"create-react-app","_key":"7cb253c3ed66"},{"_type":"span","marks":[],"text":", we will have our base React app. Once inside that application, we will create our Sanity Studio. Our folder structure will look like the following:","_key":"b881c1b1277a"},{"_type":"span","marks":[],"text":"","_key":"f853ea3211c5"}],"_type":"block"},{"code":"sanity-react (main project)\n\n |--- mysanityblog (Sanity project)\n\n |--- src (React application)\n","_type":"code","language":"text","_key":"f2bac5f8d250"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Our goal today is to:","_key":"a3edcf4ced6f"}],"_type":"block","style":"normal","_key":"1c8c8179293f"},{"_type":"block","style":"normal","_key":"255b54184145","listItem":"bullet","markDefs":[],"children":[{"text":"Create a new React blog","_key":"2d7f5f3a08b00","_type":"span","marks":[]}],"level":1},{"style":"normal","_key":"7159651cb8ef","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Have Sanity manage our content","_key":"2726223edfc20"}],"level":1,"_type":"block"},{"children":[{"_type":"span","marks":[],"text":"Using React Routing, be able to navigate our app","_key":"a3e0871c30fb0"}],"level":1,"_type":"block","style":"normal","_key":"5e64415874c7","listItem":"bullet","markDefs":[]},{"_key":"7672e19173eb","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Setting up a new React SPA","_key":"4898b77204f0"}],"_type":"block","style":"h2"},{"_key":"6264308e0868","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Let's first set up a new React SPA (single-page application) in our local developer environment.","_key":"d14522c4c494"}],"_type":"block","style":"normal"},{"children":[{"_type":"span","marks":[],"text":"Note: If you already have an application, feel free to skip this setup part!","_key":"3ffa3d95a0130"}],"_type":"block","style":"normal","_key":"c9c541bb94a1","markDefs":[]},{"markDefs":[],"children":[{"marks":[],"text":"Run the following command in your shell, which you can find in Terminal.app if you are on Mac or CMD if you're on Windows:","_key":"f63af57b98b4","_type":"span"}],"_type":"block","style":"normal","_key":"3fe0e44766ef"},{"_key":"7ee9f9195ce7","code":"npx create-react-app sanity-react","_type":"code","language":"sh"},{"calloutType":"protip","_type":"callout","_key":"fbedb893e371","body":[{"style":"normal","_key":"ea17e6a1fbe4","markDefs":[{"_type":"link","href":"https://www.npmjs.com/package/npx","_key":"2cb02602d4ac"},{"_type":"link","href":"https://nodejs.org/en/download/","_key":"4efc65874d4d"}],"children":[{"_type":"span","marks":[],"text":"Note: ","_key":"1d9cce21f964"},{"_key":"49590649fc67","_type":"span","marks":["code","2cb02602d4ac"],"text":"npx"},{"_key":"2a7fd4d56e2e","_type":"span","marks":[],"text":" will download and run the command that follows it. So instead of installing "},{"_type":"span","marks":["code"],"text":"create-react-app","_key":"6244a33d0988"},{"marks":[],"text":" with ","_key":"79c49fdd001c","_type":"span"},{"_type":"span","marks":["code"],"text":"npm","_key":"5458e797b799"},{"_type":"span","marks":[],"text":", we can use it once with ","_key":"56ef29ab79ab"},{"text":"npx","_key":"e0552eb944dc","_type":"span","marks":["code"]},{"_type":"span","marks":[],"text":". To make sure all of this works, be sure to ","_key":"0c608ae80a06"},{"_type":"span","marks":["4efc65874d4d"],"text":"download Node.js","_key":"b798bab0e3d3"},{"_type":"span","marks":[],"text":" for your computer.","_key":"28753b9c5e12"}],"_type":"block"}]},{"children":[{"_key":"add234894239","_type":"span","marks":[],"text":"Once that is built out, run this command to go into the new project directory that the command made:"}],"_type":"block","style":"normal","_key":"3fa1a3f6a4dc","markDefs":[]},{"_type":"code","language":"sh","_key":"d4f937ea25a4","code":"cd sanity-react"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Open our newly created project in your code editor of choice. Once open, we should see our new React app! To double-check that everything is running smoothly, run the following command to view the React app in the browser:","_key":"91110a192eaf"}],"_type":"block","style":"normal","_key":"909a5d6a43c0"},{"_type":"code","language":"sh","_key":"2f064364c07c","code":"npm start"},{"_type":"block","style":"normal","_key":"4a33e556b4dd","markDefs":[{"_type":"link","href":"http://localhost:3000/","_key":"14da65302c1a"}],"children":[{"_type":"span","marks":[],"text":"We should be able to see our application running at ","_key":"da27243ac2c00"},{"marks":["14da65302c1a"],"text":"localhost:3000","_key":"6984e9a2f009","_type":"span"},{"_key":"ec4975d92897","_type":"span","marks":[],"text":"!\n"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Setting up Sanity","_key":"e643ec47037d"}],"_type":"block","style":"h2","_key":"c46733c34d93"},{"markDefs":[{"_type":"link","href":"https://www.npmjs.com/package/@sanity/cli","_key":"f822aab784fa"}],"children":[{"_type":"span","marks":[],"text":"Now that we have our application ready for us, let's get Sanity up and running! We may need to install the ","_key":"bc0e8c872d80"},{"text":"Sanity CLI","_key":"a2fce8b6ab0c","_type":"span","marks":["f822aab784fa"]},{"text":" globally on our local developer environment. To do that, run the command:","_key":"17512f94f4eb","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"b58dc1f79deb"},{"_key":"771bb6aa75da","code":"npm i -g @sanity/cli","_type":"code","language":"sh"},{"_type":"block","style":"normal","_key":"e03e18088ff5","markDefs":[],"children":[{"_key":"6ce1a97379ad","_type":"span","marks":[],"text":"The Sanity CLI can do many things! Some of those include initiating a new project, interacting with a current project, or upgrading the studio. We will be using the CLI today to initiate a new project."}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Our next command will be activating Sanity to this particular project. We will be asked a bunch of questions, these are there to get our Sanity set up just right. To start, run the following command within our home folder (","_key":"8b65f23080ac0"},{"_type":"span","marks":["code"],"text":"sanity-react","_key":"e61abeda0327"},{"_type":"span","marks":[],"text":") to set up the Studio application:","_key":"57df73f95779"}],"_type":"block","style":"normal","_key":"a3675643ebfe"},{"code":"sanity init","_type":"code","language":"sh","_key":"a5677ba07705"},{"style":"normal","_key":"2d5f633cc2dd","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Note: ","_key":"5ca8438400eb"},{"_key":"dfb8e0d93f15","_type":"span","marks":[],"text":"You may need to log into your Sanity account or create a new Sanity account in the browser first. There will be prompts."}],"_type":"block"},{"markDefs":[],"children":[{"_key":"721e3263fdf4","_type":"span","marks":[],"text":"We are going to see a list of questions for us to answer in the next steps. Let's walk through those!"}],"_type":"block","style":"normal","_key":"bd790ea25ea6"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Create new project — Hit Enter.","_key":"b3df35633f71"}],"level":1,"_type":"block","style":"normal","_key":"75442a39e5b0","listItem":"number"},{"_key":"f0ab9b2c3538","listItem":"number","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Your project name: — We can name it whatever we would like. Let's “My Sanity Blog” for this project.","_key":"04d190d4687c0"}],"level":1,"_type":"block","style":"normal"},{"style":"normal","_key":"bf34b0df15c7","listItem":"number","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Use the default dataset configuration? — The default dataset configuration has a public dataset named “","_key":"1a95822eef2a0"},{"_key":"d2f7a72f3469","_type":"span","marks":["code"],"text":"production"},{"_type":"span","marks":[],"text":"”, let's stick with that. So type in “Y” and hit Enter.","_key":"fd1b968d5b0c"}],"level":1,"_type":"block"},{"listItem":"number","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Project output path: — This will show us the path where our sanity project will live. The path should show the path that leads to this: ","_key":"42a2b6105ff10"},{"marks":["code"],"text":"/sanity-react/mysanityblog","_key":"12ef595e431f","_type":"span"},{"_type":"span","marks":[],"text":". Hit Enter.","_key":"d80696472537"}],"level":1,"_type":"block","style":"normal","_key":"ca27b17f964f"},{"markDefs":[],"children":[{"_key":"cdda7b6db92a0","_type":"span","marks":[],"text":"Select project template: — Here we are going to choose “Blog (schema)”. Using the arrow keys, navigate to that so it’s showing blue. Hit Enter once there. Success!"}],"level":1,"_type":"block","style":"normal","_key":"b6214fcb6ab5","listItem":"number"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Once finished, we should see this:","_key":"20874c99518b"}],"_type":"block","style":"normal","_key":"2b50b9ed37cc"},{"_type":"image","alt":"Terminal view of questions after running `sanity init`","_key":"af9b7b6895ce","asset":{"_ref":"image-9be00858b3e9c8c74c2d31a96420625fd2662030-1222x696-png","_type":"reference"}},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"To get the Sanity Studio running in our browser, we'll run the following commands to get into the new studio directory and start the development server:","_key":"3fb4166d2896"}],"_type":"block","style":"normal","_key":"5f64d4ac2778"},{"code":"cd mysanityblog\nsanity start","_type":"code","language":"sh","_key":"8e714b56bc54"},{"children":[{"_key":"ef724a2089e1","_type":"span","marks":[],"text":"Once it has compiled, we can go visit our new Sanity Studio at "},{"_type":"span","marks":["4d856eff6d00"],"text":"localhost:3333","_key":"09add32fecbe1"},{"text":"!","_key":"09add32fecbe2","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"ac3d50a1de12","markDefs":[{"_key":"4d856eff6d00","_type":"link","href":"http://localhost:3333/"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"If we were to click on “Posts”, it would say, “No documents of this type found”. In the next section, we’ll walk through adding one in.","_key":"17e0fb95889a0"}],"_type":"block","style":"normal","_key":"1711e61bd132"},{"style":"h2","_key":"96397fe01053","markDefs":[],"children":[{"_key":"39db558a92a4","_type":"span","marks":[],"text":"Adding content to Sanity Studio"}],"_type":"block"},{"markDefs":[],"children":[{"_key":"0bf28d83a08b","_type":"span","marks":[],"text":"If we were to click on the edit icon next to our Studio name, we will be able to create a new Post, Author, or Category."}],"_type":"block","style":"normal","_key":"2b7018595cfe"},{"style":"normal","_key":"295618c6bc24","markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"cfee9d81a580"}],"_type":"block"},{"_type":"image","alt":"Showing the edit icon next to the Studio's name","_key":"27af3d85f616","asset":{"_type":"reference","_ref":"image-2208adb8817298b3a0ac2ac0eeacb8fcce451783-1468x996-png"}},{"children":[{"marks":[],"text":"Choose “Post” and an “Untitled” page will appear with a bunch of empty text boxes! ","_key":"5bd8bb09ba35","_type":"span"},{"_type":"span","marks":[],"text":"Filling these in helps us create our first blog post stored in the Studio. You may notice the “syncing” indicator in the bottom right. That means that all your changes are synced to Sanity’s content store in real-time and will be instantly available once you publish.","_key":"1f4510dc2499"}],"_type":"block","style":"normal","_key":"0d91a89d8dfb","markDefs":[]},{"style":"normal","_key":"55918217911e","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Go ahead and fill in the fields with any content you would like. It should look something like this:","_key":"b7e9258c7aba"}],"_type":"block"},{"markDefs":[],"children":[{"marks":[],"text":"","_key":"3a83049c2efe","_type":"span"}],"_type":"block","style":"normal","_key":"a904a9a67702"},{"asset":{"_ref":"image-7149288e09a381fdd22c1961dbfb3b571e071f29-3830x1842-png","_type":"reference"},"_type":"image","alt":"Creating first blog post in Sanity Studio and filling in text fields","_key":"14dab82e9a11"},{"_type":"block","style":"normal","_key":"a832eccac707","markDefs":[],"children":[{"_key":"41266c683b9a","_type":"span","marks":[],"text":"When finished, be sure to hit the blue “Publish” button in the bottom right-hand corner."}]},{"_type":"callout","_key":"0c31a62a1d87","body":[{"children":[{"marks":[],"text":"Note: To do the Author field, we will need to add an author to the “Author” section under “Content” the same way we are adding a blog post.","_key":"f41f94e0685e","_type":"span"}],"_type":"block","style":"normal","_key":"e7d07a1cb7c9","markDefs":[]}],"calloutType":"protip"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"\nFeel free to add as many blog posts as desired! The awesome thing is Sanity will be handling the management of this content, we’ll make a GROQ call for these posts, and display it in our React app.","_key":"b1ba9901c7ff0"}],"_type":"block","style":"normal","_key":"d6f542f3edba"},{"_type":"block","style":"normal","_key":"336b0cb50ea6","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Once we have finished adding in all the blog posts we could ever imagine, let’s head on over to our code and get these blog posts live in React!","_key":"25def4dac66d0"}]},{"children":[{"text":"Connecting Sanity to our React app","_key":"3a10c00e7919","_type":"span","marks":[]}],"_type":"block","style":"h2","_key":"6020abf65417","markDefs":[]},{"markDefs":[],"children":[{"text":"Now that we are back in our React app, let’s start creating our blog! We are going to see multiple folders, the two we’re going to navigate between are:","_key":"f31a9feef150","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"f94e06b0adb8"},{"style":"normal","_key":"501f4431dfd1","listItem":"number","markDefs":[],"children":[{"text":"sanity-react/mysanityblog","_key":"e511a2000543","_type":"span","marks":["code"]},{"_type":"span","marks":[],"text":" -- where our Sanity project lives","_key":"8904c5112be0"}],"level":1,"_type":"block"},{"_key":"51db9c889f8d","listItem":"number","markDefs":[],"children":[{"_type":"span","marks":["code"],"text":"sanity-react/src","_key":"a15db0145838"},{"_type":"span","marks":[],"text":" -- where our React app lives","_key":"dbb132bbebca"}],"level":1,"_type":"block","style":"normal"},{"markDefs":[{"_type":"link","href":"https://www.npmjs.com/package/@sanity/client","_key":"9ef0b4fc5f76"}],"children":[{"_type":"span","marks":[],"text":"We need to connect our React app to our Sanity project. We are going to want to bring in the ","_key":"0f8f14e56cf2"},{"marks":["9ef0b4fc5f76"],"text":"Sanity Client","_key":"1bde79d8c734","_type":"span"},{"_type":"span","marks":[],"text":". To do that run this command in the project:","_key":"036f36784384"}],"_type":"block","style":"normal","_key":"d1f03deff568"},{"language":"sh","_key":"e42715f7ea37","code":"npm install @sanity/client","_type":"code"},{"_key":"6831c0f5c769","markDefs":[],"children":[{"marks":[],"text":"Once done, we’ll first want to create a file in the React application that will import that package. Open ","_key":"9dd726fc3858","_type":"span"},{"_type":"span","marks":["code"],"text":"src","_key":"b64684d58fc3"},{"text":" and create a new file: ","_key":"0bb2c666c827","_type":"span","marks":[]},{"_type":"span","marks":["code"],"text":"src/client.js","_key":"3a94d8f7ed93"},{"_type":"span","marks":[],"text":" and open it up. Inside that file let’s add the following code:","_key":"c944582bc62b"}],"_type":"block","style":"normal"},{"code":"import sanityClient from \"@sanity/client\";\n\nexport default sanityClient({\n projectId: \"Your Project ID Here\", // find this at manage.sanity.io or in your sanity.json\n dataset: \"production\", // this is from those question during 'sanity init'\n useCdn: true,\n});\n","_type":"code","language":"javascript","_key":"741d2b40ef5d"},{"_key":"750085782d94","markDefs":[],"children":[{"_type":"span","marks":[],"text":"We’ll see a couple of comments here, the one we'll focus on right now is the ","_key":"b3ab5e374a6b"},{"_type":"span","marks":["code"],"text":"projectId","_key":"566b7fa33afd"},{"_type":"span","marks":[],"text":".","_key":"775270d45482"}],"_type":"block","style":"normal"},{"_type":"block","style":"normal","_key":"db27c5c655d7","markDefs":[],"children":[{"text":"There are two ways to find the ","_key":"e3281d748f820","_type":"span","marks":[]},{"text":"projectId","_key":"41b1c6cc9333","_type":"span","marks":["code"]},{"_type":"span","marks":[],"text":".","_key":"34c97e5b310d"}]},{"level":1,"_type":"block","style":"normal","_key":"2d18dd436f4e","listItem":"number","markDefs":[],"children":[{"_key":"1ada320be5bd0","_type":"span","marks":[],"text":"In our "},{"_type":"span","marks":["code"],"text":"sanity.json","_key":"2d3c7c566a92"},{"_type":"span","marks":[],"text":" file","_key":"81d2a24503e6"}]},{"level":1,"_type":"block","style":"normal","_key":"8f3fa8e1c37d","listItem":"number","markDefs":[{"_type":"link","href":"https://manage.sanity.io/","_key":"520a7fb59eec"}],"children":[{"_key":"9de017e2e1930","_type":"span","marks":[],"text":"On our personal "},{"text":"Sanity Manage page","_key":"9de017e2e1931","_type":"span","marks":["520a7fb59eec"]}]},{"_key":"2757352ce304","markDefs":[],"children":[{"marks":[],"text":"For the first way, navigate to ","_key":"e0136c3347450","_type":"span"},{"_key":"ffc64ba4eba6","_type":"span","marks":["code"],"text":"mysanityblog/sanity.json"},{"_type":"span","marks":[],"text":", under the ","_key":"af8b58c2617b"},{"marks":["code"],"text":"api","_key":"c0368fcb9a47","_type":"span"},{"_key":"30b1cdb8cd83","_type":"span","marks":[],"text":" section we should see the following code:"}],"_type":"block","style":"normal"},{"language":"json","_key":"c254ec480636","code":"\"api\": {\n \"projectId\": \"Your Project ID Here\",\n \"dataset\": \"production\"\n},\n","_type":"code"},{"_key":"f1d9631083fe","markDefs":[{"_type":"link","href":"https://manage.sanity.io/","_key":"2cb87e93ef5d"}],"children":[{"_type":"span","marks":[],"text":"For the second method, we'll need to go to our ","_key":"208f1fcc5d44"},{"_type":"span","marks":["2cb87e93ef5d"],"text":"Sanity Manage page","_key":"7ad285d450dc"},{"_key":"1c4f947f513a","_type":"span","marks":[],"text":". Find the tile that says “My Sanity Blog” (what we named it earlier) and click into it. We should then be taken to our dashboard for our project."}],"_type":"block","style":"normal"},{"_key":"d1337362ec90","markDefs":[],"children":[{"_type":"span","marks":[],"text":"We'll see at the top, under the name of the project, “PROJECT ID”. Copy that and paste it into the ","_key":"6cf4ee6b6a1b0"},{"_type":"span","marks":["code"],"text":"src/client.js","_key":"41ad7be190d2"},{"text":" file where it says ","_key":"a8f03708a7d2","_type":"span","marks":[]},{"_type":"span","marks":["code"],"text":"projectId: “Your Project ID Here”","_key":"ab1758d385a7"},{"_type":"span","marks":[],"text":".","_key":"d89691fcbd7b"}],"_type":"block","style":"normal"},{"children":[{"_type":"span","marks":[],"text":"In that same dashboard view, we are going to want to add “localhost:3000” to our API settings so it knows that link can be trusted! In the “My Sanity Blog” dashboard, click on “Settings”. Once there, click on “API” on the left and we’ll see “CORS Origins”. Click on “ADD NEW ORIGIN” and add “","_key":"2ded009f26e60"},{"_type":"span","marks":[],"text":"http://localhost:3000”","_key":"72cf1d1688bb1"},{"_type":"span","marks":[],"text":".","_key":"72cf1d1688bb2"}],"_type":"block","style":"normal","_key":"bbb2ef15ecad","markDefs":[]},{"calloutType":"protip","_type":"callout","_key":"9a647c36d314","body":[{"children":[{"text":"If you would like to add this with the CLI run the command ","_key":"5020c320a465","_type":"span","marks":[]},{"_key":"50381deb3a6e","_type":"span","marks":["code"],"text":"sanity cors add http://localhost:3000"},{"text":" within your studio project.","_key":"749f3c75ca8c","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"17d9ea3067a1","markDefs":[]}]},{"children":[{"text":"\nNow our React app and Sanity Project are connected!","_key":"f50746e027900","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"edfd89a229bd","markDefs":[]},{"_type":"block","style":"h2","_key":"923ce1d96837","markDefs":[],"children":[{"text":"Building our React components","_key":"2498ad7673fd","_type":"span","marks":[]}]},{"_key":"ef946d805571","markDefs":[],"children":[{"_key":"2759bdfad1bf","_type":"span","marks":[],"text":"In this tutorial, we are going to have two pages for templates:"}],"_type":"block","style":"normal"},{"listItem":"number","markDefs":[],"children":[{"_type":"span","marks":[],"text":"All blog posts in a tile format","_key":"5173a7da7d5a0"}],"level":1,"_type":"block","style":"normal","_key":"2be068ef83fd"},{"markDefs":[],"children":[{"marks":[],"text":"One blog post and all the content for it","_key":"fad651d4072c0","_type":"span"}],"level":1,"_type":"block","style":"normal","_key":"b52fd8b9e8f2","listItem":"number"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Let’s create those files. In the ","_key":"d1cc6c0499fd0"},{"_type":"span","marks":["code"],"text":"src/","_key":"2870aa7b6f39"},{"_type":"span","marks":[],"text":" folder, create the following folder: ","_key":"44553d9b62e7"},{"marks":["code"],"text":"src/components","_key":"e87aa905a37e","_type":"span"},{"marks":[],"text":". Within that newly created folder, let’s create two files:","_key":"f1c314cd3d8d","_type":"span"}],"_type":"block","style":"normal","_key":"a907825e8ff3"},{"level":1,"_type":"block","style":"normal","_key":"b717b4532aad","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":["code"],"text":"src/components/AllPosts.js","_key":"6e018516573c0"}]},{"level":1,"_type":"block","style":"normal","_key":"7b8f6f3d7d7e","listItem":"bullet","markDefs":[],"children":[{"_key":"531b12a15f500","_type":"span","marks":["code"],"text":"src/components/OnePost.js"}]},{"style":"normal","_key":"849c2efcebf5","markDefs":[{"_type":"link","href":"https://reactrouter.com/","_key":"41178a1bd072"}],"children":[{"_key":"4484f3d0954d0","_type":"span","marks":[],"text":"We are going to be using "},{"_type":"span","marks":["41178a1bd072"],"text":"React Router","_key":"4484f3d0954d1"},{"_type":"span","marks":[],"text":" to navigate around our app. What this will do is in our ","_key":"4484f3d0954d2"},{"_type":"span","marks":["code"],"text":"App.js","_key":"83dcd738fec4"},{"_type":"span","marks":[],"text":" file, we will declare “routes” for our components. For example, if we wanted to route to an About page, we could use the URL route ","_key":"ade6c0a15056"},{"marks":["code"],"text":"/about","_key":"3232ddd975e5","_type":"span"},{"_type":"span","marks":[],"text":". By declaring our URL route and matching it up with a component, we are able to navigate to the proper page.","_key":"51d0fcd5e278"}],"_type":"block"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"To set this up, let’s navigate to the ","_key":"d821bc32028f0"},{"_type":"span","marks":["code"],"text":"src/App.js","_key":"2e0f9f5fdc7c"},{"text":" file.","_key":"6ad750bb32b1","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"e792f81de2d9"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Setting up React Router","_key":"018ac2ac29ce"}],"_type":"block","style":"h2","_key":"9114908f01c1"},{"children":[{"_type":"span","marks":[],"text":"To get React Router going, we are going to need to install our dependency. In the project, run the following command:","_key":"c6fb8d093cf8"}],"_type":"block","style":"normal","_key":"6c63675bd0b7","markDefs":[]},{"code":"npm install --save react-router-dom","_type":"code","language":"sh","_key":"2cd4b830888c"},{"_key":"28d7e56c0f35","markDefs":[],"children":[{"_key":"b428dcceea27","_type":"span","marks":[],"text":"Within the "},{"marks":["code"],"text":"App.js","_key":"29263e3deb06","_type":"span"},{"_type":"span","marks":[],"text":" file, change the code to include the router components:","_key":"b0a66922e501"}],"_type":"block","style":"normal"},{"code":"// src/App.js\n\nimport React from \"react\";\nimport { BrowserRouter, Route } from \"react-router-dom\";\nimport AllPosts from \"./components/AllPosts.js\";\nimport OnePost from \"./components/OnePost.js\";\n\nfunction App() {\n return (\n \u003cBrowserRouter\u003e\n \u003cdiv\u003e\n \u003cRoute component={AllPosts} path=\"/\" exact /\u003e\n \u003cRoute component={OnePost} path=\"/:slug\" /\u003e\n \u003c/div\u003e\n \u003c/BrowserRouter\u003e\n );\n}\nexport default App;","_type":"code","language":"javascript","_key":"1b3cf57f3302"},{"_type":"block","style":"normal","_key":"37781dc9dfe4","markDefs":[],"children":[{"marks":[],"text":"Let’s break this down.","_key":"c4746be12e27","_type":"span"}]},{"_key":"ef0bfad971fd","markDefs":[],"children":[{"_type":"span","marks":[],"text":"By adding in the ","_key":"ec3f3756d23a0"},{"text":"path=“/”","_key":"80a86d5d0cdc","_type":"span","marks":["code"]},{"_type":"span","marks":[],"text":" we are stating that when we are at the base URL for our website, display the ","_key":"e194da0c4689"},{"_type":"span","marks":["code"],"text":"AllPosts","_key":"f81f607d7d98"},{"_type":"span","marks":[],"text":" component. Adding in the ","_key":"3c389cc8c431"},{"_type":"span","marks":["code"],"text":"exact","_key":"c609304434f7"},{"_type":"span","marks":[],"text":" makes it so there’s no confusion for other routes that have additional info after the “/”; “/additional-info”. In our case, we have ","_key":"d951f4a3eb42"},{"_type":"span","marks":["code"],"text":"/:slug","_key":"b4ee82675949"},{"_type":"span","marks":[],"text":" which will show the ","_key":"3582fdee28f8"},{"_type":"span","marks":["code"],"text":"OnePost","_key":"a4b87a2e66e2"},{"_type":"span","marks":[],"text":" component, but more specifically, which blog post to display from the corresponding blog post.","_key":"ba30855f7388"}],"_type":"block","style":"normal"},{"_key":"4aa896273c55","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Within our two components, add the following code:","_key":"44e6d1e4cd77"},{"_type":"span","marks":[],"text":"","_key":"b0a9ea5588de"}],"_type":"block","style":"normal"},{"code":"// src/components/AllPosts.js\n\nimport React from \"react\";\n\nexport default function AllPosts() {\n return \u003ch2\u003eAllPosts Page\u003c/h2\u003e;\n}","_type":"code","language":"javascript","_key":"49122805329a"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"7e6bf8c89772"}],"_type":"block","style":"normal","_key":"e93555e34219"},{"code":"// src/components/OnePost.js\n\nimport React from \"react\";\n\nexport default function OnePost() {\n return \u003ch2\u003eOnePost Page\u003c/h2\u003e;\n}","_type":"code","language":"javascript","_key":"dd7875667cc3"},{"markDefs":[],"children":[{"_key":"740ef1546216","_type":"span","marks":[],"text":"Once we have all that code, restart the server (ctrl + c, npm start) and navigate to “localhost:3000”. At “localhost:3000/” we should see the text “AllPosts Page” and if we navigate to “localhost:3000/:slug” (replacing :slug with a slug) we should see the text “OnePost Page”."}],"_type":"block","style":"normal","_key":"057c478bdb90"},{"body":[{"_key":"ca395040bd4f","markDefs":[],"children":[{"_type":"span","marks":[],"text":"If you want to test the slug part now, go grab a slug from your Sanity Studio. For example, ","_key":"55659f085591"},{"marks":["code"],"text":"localhost:3000/first-blog","_key":"4fd78ea03634","_type":"span"}],"_type":"block","style":"normal"}],"calloutType":"protip","_type":"callout","_key":"573cfeb85cac"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Awesome! Our routing is set up!","_key":"5e2949c97d1f"}],"_type":"block","style":"normal","_key":"29d17bd81907"},{"_key":"09943e6d2b68","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Building the page for all the blog posts","_key":"5dac202fafa8"}],"_type":"block","style":"h2"},{"_type":"block","style":"normal","_key":"55b3ca504fe7","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Let's go ahead and display all of our posts’ titles and their main image on the “All Posts” page. Head on over to ","_key":"3c2e88da6727"},{"marks":["code"],"text":"src/components/AllPosts.js","_key":"7bc8c5988101","_type":"span"},{"_type":"span","marks":[],"text":" and paste the following code in there (we’ll go through it step-by-step after):","_key":"e2935295b3a5"}]},{"code":"// src/components/AllPosts.js\n\nimport React, { useEffect, useState } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport sanityClient from \"../client.js\";\n\nexport default function AllPosts() {\n const [allPostsData, setAllPosts] = useState(null);\n\n useEffect(() =\u003e {\n sanityClient\n .fetch(\n `*[_type == \"post\"]{\n title,\n slug,\n mainImage{\n asset-\u003e{\n _id,\n url\n }\n }\n }`\n )\n .then((data) =\u003e setAllPosts(data))\n .catch(console.error);\n }, []);\n\n return (\n \u003cdiv\u003e\n \u003ch2\u003eBlog Posts\u003c/h2\u003e\n \u003ch3\u003eWelcome to my blog posts page!\u003c/h3\u003e\n \u003cdiv\u003e\n {allPostsData \u0026\u0026\n allPostsData.map((post, index) =\u003e (\n \u003cLink to={\"/\" + post.slug.current} key={post.slug.current}\u003e\n \u003cspan key={index}\u003e\n \u003cimg src={post.mainImage.asset.url} alt=\"\" /\u003e\n \u003cspan\u003e\n \u003ch2\u003e{post.title}\u003c/h2\u003e\n \u003c/span\u003e\n \u003c/span\u003e\n \u003c/Link\u003e\n ))}\n \u003c/div\u003e\n \u003c/div\u003e\n );\n}\n","_type":"code","language":"javascript","_key":"1e900963dc5e"},{"style":"normal","_key":"b818af715ddc","markDefs":[],"children":[{"_type":"span","marks":[],"text":"\n","_key":"18414d560cb50"},{"_type":"span","marks":[],"text":"Let’s walk through this section by section!","_key":"350b43891021"}],"_type":"block"},{"_key":"e65d5b1d1df8","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Top of the file","_key":"999011ee8bf1"}],"_type":"block","style":"h3"},{"children":[{"_type":"span","marks":[],"text":"We are going to be using hooks that are built into React for state management, so we have imported ","_key":"c26029b5f9f1"},{"_type":"span","marks":["code"],"text":"useEffect","_key":"1aafff928abe"},{"marks":[],"text":" and ","_key":"3724b7084f82","_type":"span"},{"text":"useState","_key":"6667ae71c0ae","_type":"span","marks":["code"]},{"_type":"span","marks":[],"text":".","_key":"4d305b2932f3"}],"level":1,"_type":"block","style":"normal","_key":"5885b75d5a0c","listItem":"bullet","markDefs":[]},{"level":1,"_type":"block","style":"normal","_key":"883614061b6a","listItem":"bullet","markDefs":[],"children":[{"_key":"1affa8d02bc40","_type":"span","marks":[],"text":"Imported "},{"_key":"1a48b3bc0585","_type":"span","marks":["code"],"text":"Link"},{"_type":"span","marks":[],"text":" for linking to single blog posts.","_key":"ab358d723d9f"}]},{"style":"normal","_key":"63e2d4b2d195","listItem":"bullet","markDefs":[],"children":[{"text":"Imported the ","_key":"5d87287803ef0","_type":"span","marks":[]},{"_type":"span","marks":["code"],"text":"sanityClient","_key":"5dfe9390f940"},{"_type":"span","marks":[],"text":" so we can fetch our data","_key":"674fc34f82ed"}],"level":1,"_type":"block"},{"children":[{"marks":[],"text":"AllPosts()","_key":"28983ddec979","_type":"span"}],"_type":"block","style":"h3","_key":"0e9911890a9c","markDefs":[]},{"_key":"4adcf98450fd","listItem":"bullet","markDefs":[],"children":[{"text":"Setting our state","_key":"16699c720411","_type":"span","marks":[]}],"level":1,"_type":"block","style":"normal"},{"_key":"491ea7da95a1","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Using ","_key":"ace7801ea74b0"},{"_type":"span","marks":["code"],"text":"useEffect","_key":"6552d65c2a5c"},{"_type":"span","marks":[],"text":" and ","_key":"49fdfb4eb4a0"},{"_type":"span","marks":["code"],"text":"sanityClient","_key":"d13f43ebf28f"},{"_type":"span","marks":[],"text":" to fetch our data","_key":"d0582af6c36a"}],"level":1,"_type":"block","style":"normal"},{"_key":"508e31f2071f","markDefs":[],"children":[{"_type":"span","marks":[],"text":"The return","_key":"43b1c33cec0a"}],"_type":"block","style":"h3"},{"children":[{"_key":"17a254e49879","_type":"span","marks":[],"text":"Setting a couple of headers"}],"level":1,"_type":"block","style":"normal","_key":"e57b7f087248","listItem":"bullet","markDefs":[]},{"_type":"block","style":"normal","_key":"9de8f7141669","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":["code"],"text":"mapping","_key":"a8ac875849590"},{"_key":"e41ee833dc32","_type":"span","marks":[],"text":" over our blog posts and displaying the "},{"marks":["code"],"text":"mainImage","_key":"73ab14ab5b51","_type":"span"},{"_type":"span","marks":[],"text":" and ","_key":"97d3f990cdb8"},{"text":"title","_key":"3f366eb2aff2","_type":"span","marks":["code"]},{"_type":"span","marks":[],"text":" of each","_key":"7849ad4f1f97"}],"level":1},{"_type":"block","style":"normal","_key":"61e8c0ef8c95","listItem":"bullet","markDefs":[],"children":[{"_key":"308f9116d3b70","_type":"span","marks":[],"text":"Making those clickable and setting "},{"_type":"span","marks":["code"],"text":"post.slug.current","_key":"0a18c2a432aa"},{"marks":[],"text":" so that it sends us to the correct blog post","_key":"baa4636686d3","_type":"span"}],"level":1},{"level":1,"_type":"block","style":"normal","_key":"f639dacd7db9","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"If we hit save and navigate to “localhost:3000”, we should now see all of our data!","_key":"aeaa14c04a4c0"}]},{"children":[{"_type":"span","marks":[],"text":"Our images might be very large, we’ll style those soon and make it look nice!","_key":"d419ce87c060"}],"_type":"block","style":"normal","_key":"8d57e6b567d9","markDefs":[]},{"_type":"block","style":"normal","_key":"8d92f2b3d092","markDefs":[],"children":[{"_type":"span","marks":[],"text":"There is a Sanity plugin for handling images that we will use in ","_key":"2ba51320d505"},{"marks":["code"],"text":"components/OnePost.js","_key":"e407f6f56803","_type":"span"},{"_type":"span","marks":[],"text":", but in this component, we wanted to show how to GROQ for an image URL and display it without the plugin.","_key":"272d18bc4391"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Building the page for an individual blog post","_key":"0811242f60f90"}],"_type":"block","style":"h2","_key":"df4870b69e38"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Now that we have our main blog page set up, let’s make those Link's navigate to an actual blog post and display all the information!","_key":"a27c0e5eef75"}],"_type":"block","style":"normal","_key":"5b76e2e5c7e1"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Before we write any code, we are going to want to install a couple of dependencies. Run the following command within the project:","_key":"b8df01fd10a20"}],"_type":"block","style":"normal","_key":"54b18323bb3e"},{"code":"npm install @sanity/block-content-to-react @sanity/image-url\n","_type":"code","language":"sh","_key":"a0557754e4d8"},{"children":[{"_type":"span","marks":[],"text":"\n","_key":"9e9f13f4cf660"},{"_type":"span","marks":[],"text":"Let's talk about these two:","_key":"6df6b56885d7"}],"_type":"block","style":"normal","_key":"5aadd1804288","markDefs":[]},{"level":1,"_type":"block","style":"normal","_key":"3c20ab500c9e","listItem":"bullet","markDefs":[{"_type":"link","href":"https://www.sanity.io/docs/block-content","_key":"652e05bc4d81"}],"children":[{"_type":"span","marks":["code"],"text":"@sanity/block-content-to-react","_key":"b287d797a8930"},{"_type":"span","marks":[],"text":" — This will render an array of block text from Sanity with React. To learn more about this, we can find ","_key":"d6db38f733da"},{"_type":"span","marks":["652e05bc4d81"],"text":"the docs here","_key":"b287d797a8931"},{"_type":"span","marks":[],"text":". There are libraries for React, Vue, HTML, and HyperText.","_key":"b287d797a8932"}]},{"markDefs":[{"_type":"link","href":"https://www.sanity.io/docs/image-url","_key":"35c4bc4e4923"}],"children":[{"marks":["code"],"text":"@sanity/image-url","_key":"9f2233317a190","_type":"span"},{"_type":"span","marks":[],"text":" — This library will help us with the image URL. Remember, in ","_key":"d20aed21fc5f"},{"text":"AllPosts.js","_key":"425bc962feff","_type":"span","marks":["code"]},{"_type":"span","marks":[],"text":" we did not use this, but rather saw how to without. We are going to use this plugin for ","_key":"42b1a583dd96"},{"_type":"span","marks":["code"],"text":"OnePost.js","_key":"0ef991fb5a63"},{"_key":"b531ed1c68f7","_type":"span","marks":[],"text":". To learn more about this, please visit "},{"_type":"span","marks":["35c4bc4e4923"],"text":"the docs here","_key":"9f2233317a191"},{"marks":[],"text":".","_key":"9f2233317a192","_type":"span"}],"level":1,"_type":"block","style":"normal","_key":"5241a5d20c5e","listItem":"bullet"},{"style":"normal","_key":"635450c3e893","markDefs":[],"children":[{"_type":"span","marks":[],"text":"\nNow that we have our dependencies installed, let’s go ahead and build out our component! Head on over to ","_key":"764ad3b7992d0"},{"_type":"span","marks":["code"],"text":"src/components/OnePost.js","_key":"57c24ce084a6"},{"_type":"span","marks":[],"text":" and input the following code:","_key":"199156657533"}],"_type":"block"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"c39eb3df4001"}],"_type":"block","style":"normal","_key":"9561ae2051ef"},{"code":"// src/components/OnePost.js\n\nimport React, { useEffect, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport sanityClient from \"../client.js\";\nimport BlockContent from \"@sanity/block-content-to-react\";\nimport imageUrlBuilder from \"@sanity/image-url\";\n\nconst builder = imageUrlBuilder(sanityClient);\nfunction urlFor(source) {\n return builder.image(source);\n}\n\nexport default function OnePost() {\n const [postData, setPostData] = useState(null);\n const { slug } = useParams();\n\n useEffect(() =\u003e {\n sanityClient\n .fetch(\n `*[slug.current == $slug]{\n title,\n slug,\n mainImage{\n asset-\u003e{\n _id,\n url\n }\n },\n body,\n \"name\": author-\u003ename,\n \"authorImage\": author-\u003eimage\n }`,\n { slug }\n )\n .then((data) =\u003e setPostData(data[0]))\n .catch(console.error);\n }, [slug]);\n\n if (!postData) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n\n return (\n \u003cdiv\u003e\n \u003cdiv\u003e\n \u003ch2\u003e{postData.title}\u003c/h2\u003e\n \u003cdiv\u003e\n \u003cimg\n src={urlFor(postData.authorImage).width(100).url()}\n alt=\"Author is Kap\"\n /\u003e\n \u003ch4\u003e{postData.name}\u003c/h4\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cimg src={urlFor(postData.mainImage).width(200).url()} alt=\"\" /\u003e\n \u003cdiv\u003e\n \u003cBlockContent\n blocks={postData.body}\n projectId={sanityClient.clientConfig.projectId}\n dataset={sanityClient.clientConfig.dataset}\n /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n );\n}\n","_type":"code","language":"javascript","_key":"54c001ad13e0"},{"markDefs":[],"children":[{"_key":"396adcf908bc0","_type":"span","marks":[],"text":"\n"},{"_type":"span","marks":[],"text":"Let’s walk through this code!","_key":"da2cf134e58a"}],"_type":"block","style":"normal","_key":"e4c949d954d9"},{"_type":"block","style":"h3","_key":"5c8f3cce7217","markDefs":[],"children":[{"_type":"span","marks":[],"text":"\nTop of the file","_key":"64a2ecc2af200"}]},{"_key":"f8ec8328f777","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"We have imported the dependencies that we installed earlier","_key":"9ed239b34828"}],"level":1,"_type":"block","style":"normal"},{"level":1,"_type":"block","style":"normal","_key":"e53c3b1348c2","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Imported our Sanity Client","_key":"32bc2887145e0"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Imported all the things we need from React","_key":"984d7b63010e0"}],"level":1,"_type":"block","style":"normal","_key":"ddae198fa254","listItem":"bullet"},{"_type":"block","style":"normal","_key":"f07280a858b2","listItem":"bullet","markDefs":[],"children":[{"text":"Wrote out a function for ","_key":"ac9c17bab5890","_type":"span","marks":[]},{"text":"urlFor","_key":"96630bcab0de","_type":"span","marks":["code"]},{"text":" so that we can use it below. Here is where we pulled in ","_key":"e974982552e1","_type":"span","marks":[]},{"_type":"span","marks":["code"],"text":"imageUrlBuilder","_key":"05c0975efc66"},{"text":" from ","_key":"0be6d1983384","_type":"span","marks":[]},{"text":"@sanity/image-url","_key":"533051e39b62","_type":"span","marks":["code"]},{"text":" and used that within ","_key":"a280c7e0c558","_type":"span","marks":[]},{"_type":"span","marks":["code"],"text":"urlFor","_key":"7355dbe5ef35"},{"_type":"span","marks":[],"text":". We'll use that lower in the file.","_key":"9162c92df37e"}],"level":1},{"_type":"block","style":"h3","_key":"95c8cb082d79","markDefs":[],"children":[{"_type":"span","marks":[],"text":"OnePost()","_key":"43e67309dd61"}]},{"listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Set our state","_key":"c74be228e0a4"}],"level":1,"_type":"block","style":"normal","_key":"95bfcbf701bc"},{"listItem":"bullet","markDefs":[],"children":[{"_key":"4ddf01f036e10","_type":"span","marks":[],"text":"We are using "},{"_type":"span","marks":["code"],"text":"useParams()","_key":"c41fda87df0b"},{"_type":"span","marks":[],"text":" for our slug. This is a React Hook that the ","_key":"f84abf82e11b"},{"text":"react-router-dom","_key":"c45e26f4bcec","_type":"span","marks":["code"]},{"_type":"span","marks":[],"text":" package gives to pull URL parameters.","_key":"1d80d148e3cc"}],"level":1,"_type":"block","style":"normal","_key":"b89656a6afda"},{"listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"In the ","_key":"7863a35afb3e0"},{"_type":"span","marks":["code"],"text":"useEffect()","_key":"8b4e8bdcfc74"},{"marks":[],"text":" we are again fetching our data from ","_key":"6055966d1966","_type":"span"},{"_key":"f744c83c0f8b","_type":"span","marks":["code"],"text":"sanityClient"}],"level":1,"_type":"block","style":"normal","_key":"2510bd1d816a"},{"style":"normal","_key":"a9964cc0e9c2","listItem":"bullet","markDefs":[],"children":[{"text":"This GROQ query is a little different than our previous call. This one is pulling a particular post by its slug. Remember, this slug was set in our Sanity Studio. We are going to be pulling out the title, slug, mainImage, body, and then the name and image of the author!","_key":"0e3f531a99cd0","_type":"span","marks":[]}],"level":1,"_type":"block"},{"level":1,"_type":"block","style":"normal","_key":"8f411c46b9c2","listItem":"bullet","markDefs":[],"children":[{"marks":[],"text":"We then set all the data and catch any errors!","_key":"ebe1d90225330","_type":"span"}]},{"style":"normal","_key":"03603cb3ce29","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"If no post shows up, we'll show “Loading…” text.","_key":"090a70723f830"}],"level":1,"_type":"block"},{"style":"h3","_key":"9f02cfc11bf5","markDefs":[],"children":[{"marks":[],"text":"The return","_key":"0ee6cc2b1fdf","_type":"span"}],"_type":"block"},{"_type":"block","style":"normal","_key":"a8c6cbb46848","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Display the title of the post","_key":"9aa60287c8a1"}],"level":1},{"markDefs":[{"_key":"76213b44983b","_type":"link","href":"https://www.sanity.io/docs/presenting-images"}],"children":[{"_type":"span","marks":[],"text":"Show the author’s image and then name. We are using our ","_key":"34767a4982730"},{"_type":"span","marks":["code"],"text":"urlFor","_key":"31fee411e2f3"},{"_type":"span","marks":[],"text":" here. Notice we chained multiple things here. First, the image, we then set width, and then added ","_key":"df9721670ae9"},{"_type":"span","marks":["code"],"text":"url()","_key":"fd6f10e96c39"},{"_type":"span","marks":[],"text":" to create that URL. To learn all about presenting images, visit ","_key":"5be058e22ee1"},{"_key":"34767a4982731","_type":"span","marks":["76213b44983b"],"text":"this page"},{"text":".","_key":"34767a4982732","_type":"span","marks":[]}],"level":1,"_type":"block","style":"normal","_key":"d1be075732a2","listItem":"bullet"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"We then display the main image of the blog post. Again, we are using ","_key":"25288254af350"},{"_type":"span","marks":["code"],"text":"urlFor()","_key":"4a1edf78f1e5"},{"_type":"span","marks":[],"text":" here.","_key":"762b25a2b93a"}],"level":1,"_type":"block","style":"normal","_key":"ef1ab820d877","listItem":"bullet"},{"_key":"7cf5235adae5","listItem":"bullet","markDefs":[],"children":[{"_key":"4683d73e357b0","_type":"span","marks":[],"text":"Lastly, we have used "},{"_type":"span","marks":["code"],"text":"BlockContent","_key":"2e51754baf0a"},{"_key":"dc558fb2186a","_type":"span","marks":[],"text":" for the body of the blog. This will take all the text and images that are in our Sanity Studio and display it nicely!"}],"level":1,"_type":"block","style":"normal"},{"style":"h2","_key":"170d4b8cd3bb","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Putting it all together","_key":"17916b4fd5fc"}],"_type":"block"},{"_key":"7458bafef933","markDefs":[{"_type":"link","href":"http://localhost:3000/sanity-react","_key":"9b1637d124df"}],"children":[{"_type":"span","marks":[],"text":"Now that we have our components set up, we can head on over to “localhost:3000” and see a list of our blog posts. If we click on any of those, it will redirect us to that particular blog post and display our information! That URL should look something like this: ","_key":"2a78f04d9cc9"},{"_type":"span","marks":["9b1637d124df"],"text":"http://localhost:3000/sanity-react","_key":"8c7075d99e2e"}],"_type":"block","style":"normal"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"And we now have a functioning blog with blog posts! All of our content is living in our Sanity Studio and if we want to add more, remove one, or edit the content in an existing one, we can head there to do so! Remember, our Sanity Studio is living at “localhost:3333” and we must run ","_key":"0a364644ec3f0"},{"_type":"span","marks":["code"],"text":"sanity start","_key":"539b73bb6e08"},{"_type":"span","marks":[],"text":" in our folder ","_key":"e86fdf128d10"},{"_key":"0248159c2680","_type":"span","marks":["code"],"text":"sanity-react/mysanityblog"},{"marks":[],"text":".","_key":"8568be9bd44d","_type":"span"}],"_type":"block","style":"normal","_key":"6724f3ad73a1"},{"style":"h2","_key":"c6e53b527336","markDefs":[],"children":[{"_key":"0610cd609ecf","_type":"span","marks":[],"text":"Styling our application"}],"_type":"block"},{"_type":"block","style":"normal","_key":"8bf14df6de49","markDefs":[],"children":[{"text":"Let’s add some styling!","_key":"211611e3bafa","_type":"span","marks":[]}]},{"_key":"6cc0d5a8d2fa","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Feel free to skip this section if you would like to do your own styling!","_key":"154f6c7410a4"}],"_type":"block","style":"normal"},{"markDefs":[{"_type":"link","href":"https://tailwindcss.com/","_key":"6c89a38cbbc1"}],"children":[{"_type":"span","marks":[],"text":"We are going to be using ","_key":"ca7881bae7ef"},{"_key":"09c4519146b1","_type":"span","marks":["6c89a38cbbc1"],"text":"Tailwind CSS"},{"_type":"span","marks":[],"text":"! Tailwind is a CSS framework that can be highly-customizable! But also provides amazing building blocks right out of the box.","_key":"ba0728c47f83"}],"_type":"block","style":"normal","_key":"ed74fbf483a8"},{"children":[{"marks":[],"text":"Let's go ahead and add that in. To do so, head to our ","_key":"65b5da32d767","_type":"span"},{"marks":["code"],"text":"src/index.css","_key":"a4b6ecbc91e7","_type":"span"},{"marks":[],"text":" file, clear out the existing code, and input the following code:","_key":"8900b6b9f4c6","_type":"span"}],"_type":"block","style":"normal","_key":"460140f53781","markDefs":[]},{"code":"/* src/index.css */\n\n@import url(\"https://unpkg.com/@tailwindcss/typography@0.2.x/dist/typography.min.css\");\n@import url(\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\");\n@import url(\"https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700\u0026display=swap\");\n\n.cursive {\n font-family: \"Amatic SC\", cursive;\n font-weight: 700;\n}\n\n.prose img {\n margin-left: auto;\n margin-right: auto;\n border-radius: 5px;\n}\n","_type":"code","language":"css","_key":"338dd39c7642"},{"_type":"block","style":"normal","_key":"91b774eb1fc6","markDefs":[],"children":[{"marks":[],"text":"We are importing the necessary Tailwind packages. Also, a Google font that we’ll use.","_key":"6b0de7f82875","_type":"span"}]},{"markDefs":[{"_type":"link","href":"https://tailwindcss.com/docs/typography-plugin","_key":"1e9b8dad1718"}],"children":[{"marks":[],"text":"The prose comes from that first import (","_key":"d34b658ed29d0","_type":"span"},{"_type":"span","marks":["1e9b8dad1718"],"text":"typography","_key":"358ef8913c4b"},{"_type":"span","marks":[],"text":"). This will help our body in our “OnePost” render correctly. Tailwind needs this when pulling from Sanity Studio.","_key":"f272f686770f"}],"_type":"block","style":"normal","_key":"f418e4fb45ba"},{"calloutType":"protip","_type":"callout","_key":"c6592d8ce414","body":[{"children":[{"text":"There are other ways to import Tailwind so you don’t need to import the entire package every time. You can find that information here: ","_key":"b1bc0af07c73","_type":"span","marks":[]},{"_type":"span","marks":["47d0cf6d3e85"],"text":"https://tailwindcss.com/docs/installation","_key":"eb6eeecb6437"}],"_type":"block","style":"normal","_key":"3c01b7010e4c","markDefs":[]}]},{"_type":"block","style":"h2","_key":"b0e701902d86","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Styling AllPosts() with Tailwind","_key":"1dc2aebc8741"}]},{"children":[{"text":"Here is the ","_key":"0d3c91f65f22","_type":"span","marks":[]},{"_type":"span","marks":["code"],"text":"AllPosts()","_key":"28dd7ef23e67"},{"_key":"46eb7429cba6","_type":"span","marks":[],"text":" component with Tailwind:"},{"_type":"span","marks":[],"text":"","_key":"981209d60c80"}],"_type":"block","style":"normal","_key":"c90509e1b1e3","markDefs":[]},{"language":"javascript","_key":"c15539cda9d3","code":"// src/components/AllPosts.js\n\nimport React, { useEffect, useState } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport sanityClient from \"../client.js\";\n\nexport default function AllPosts() {\n const [allPostsData, setAllPosts] = useState(null);\n\n useEffect(() =\u003e {\n sanityClient\n .fetch(\n `*[_type == \"post\"]{\n title,\n slug,\n mainImage{\n asset-\u003e{\n _id,\n url\n }\n }\n }`\n )\n .then((data) =\u003e setAllPosts(data))\n .catch(console.error);\n }, []);\n\n return (\n \u003cdiv className=\"bg-green-100 min-h-screen p-12\"\u003e\n \u003cdiv className=\"container mx-auto\"\u003e\n \u003ch2 className=\"text-5xl flex justify-center cursive\"\u003eBlog Posts\u003c/h2\u003e\n \u003ch3 className=\"text-lg text-gray-600 flex justify-center mb-12\"\u003e\n Welcome to my blog posts page!\n \u003c/h3\u003e\n \u003cdiv className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\"\u003e\n {allPostsData \u0026\u0026\n allPostsData.map((post, index) =\u003e (\n \u003cLink to={\"/\" + post.slug.current} key={post.slug.current}\u003e\n \u003cspan\n className=\"block h-64 relative rounded shadow leading-snug bg-white\n border-l-8 border-green-400\"\n key={index}\n \u003e\n \u003cimg\n className=\"w-full h-full rounded-r object-cover absolute\"\n src={post.mainImage.asset.url}\n alt=\"\"\n /\u003e\n \u003cspan\n className=\"block relative h-full flex justify-end items-end pr\n -4 pb-4\"\n \u003e\n \u003ch2\n className=\"text-gray-800 text-lg font-bold px-3 py-4 bg-red-700\n text-red-100 bg-opacity-75 rounded\"\n \u003e\n {post.title}\n \u003c/h2\u003e\n \u003c/span\u003e\n \u003c/span\u003e\n \u003c/Link\u003e\n ))}\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n );\n}\n","_type":"code"},{"children":[{"_type":"span","marks":[],"text":"\nOnce that is all in, we should see something like this at “localhost:3000”:","_key":"69fd92bbf0730"}],"_type":"block","style":"normal","_key":"790ec99cbd79","markDefs":[]},{"_type":"image","alt":"View of AllPosts() route with blog post tile","_key":"4d357b588073","asset":{"_ref":"image-fe3914f826a541cb8957e0f76d92c107722ec2fe-3834x1842-png","_type":"reference"}},{"_type":"block","style":"normal","_key":"9b151d363e09","markDefs":[],"children":[{"_type":"span","marks":[],"text":"\nLooks great!","_key":"97fabdebae320"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Styling OnePost() with Tailwind","_key":"e0b1b92d3ab3"}],"_type":"block","style":"h2","_key":"750be757b266"},{"_key":"7c0693a94287","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Here is the ","_key":"fdafcc99b30b"},{"_type":"span","marks":["code"],"text":"OnePost()","_key":"98a3e0eb2ac1"},{"_type":"span","marks":[],"text":" component with Tailwind:","_key":"3446e3fc7a04"},{"_type":"span","marks":[],"text":"","_key":"8ecefbd6fa02"}],"_type":"block","style":"normal"},{"language":"javascript","_key":"630ed148b90c","code":"// src/component/OnePost.js\n\nimport React, { useEffect, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport sanityClient from \"../client.js\";\nimport BlockContent from \"@sanity/block-content-to-react\";\nimport imageUrlBuilder from \"@sanity/image-url\";\n\nconst builder = imageUrlBuilder(sanityClient);\nfunction urlFor(source) {\n return builder.image(source);\n}\n\nexport default function OnePost() {\n const [postData, setPostData] = useState(null);\n const { slug } = useParams();\n\n useEffect(() =\u003e {\n sanityClient\n .fetch(\n `*[slug.current == \"${slug}\"]{\n title,\n slug,\n mainImage{\n asset-\u003e{\n _id,\n url\n }\n },\n body,\n \"name\": author-\u003ename,\n \"authorImage\": author-\u003eimage\n }`\n )\n .then((data) =\u003e setPostData(data[0]))\n .catch(console.error);\n }, [slug]);\n\n if (!postData) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n\n return (\n \u003cdiv className=\"bg-gray-200 min-h-screen p-12\"\u003e\n \u003cdiv className=\"container shadow-lg mx-auto bg-green-100 rounded-lg\"\u003e\n \u003cdiv className=\"relative\"\u003e\n \u003cdiv className=\"absolute h-full w-full flex items-center justify-center p-8\"\u003e\n {/* Title Section */}\n \u003cdiv className=\"bg-white bg-opacity-75 rounded p-12\"\u003e\n \u003ch2 className=\"cursive text-3xl lg:text-6xl mb-4\"\u003e\n {postData.title}\n \u003c/h2\u003e\n \u003cdiv className=\"flex justify-center text-gray-800\"\u003e\n \u003cimg\n src={urlFor(postData.authorImage).url()}\n className=\"w-10 h-10 rounded-full\"\n alt=\"Author is Kap\"\n /\u003e\n \u003ch4 className=\"cursive flex items-center pl-2 text-2xl\"\u003e\n {postData.name}\n \u003c/h4\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cimg\n className=\"w-full object-cover rounded-t\"\n src={urlFor(postData.mainImage).url()}\n alt=\"\"\n style={{ height: \"400px\" }}\n /\u003e\n \u003c/div\u003e\n \u003cdiv className=\"px-16 lg:px-48 py-12 lg:py-20 prose lg:prose-xl max-w-full\"\u003e\n \u003cBlockContent\n blocks={postData.body}\n projectId={sanityClient.clientConfig.projectId}\n dataset={sanityClient.clientConfig.dataset}\n /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n );\n}\n","_type":"code"},{"style":"normal","_key":"28209182ae10","markDefs":[{"_type":"link","href":"https://tailwindcss.com/docs/typography-plugin","_key":"0974ee6d056d"}],"children":[{"_type":"span","marks":[],"text":"Notice we are using the ","_key":"47987364f3b5"},{"_key":"a2c2b9016aca","_type":"span","marks":["0974ee6d056d"],"text":"prose"},{"_type":"span","marks":[],"text":" for our ","_key":"baa347cc5a82"},{"_key":"577785548486","_type":"span","marks":["code"],"text":"BlockContent"},{"marks":[],"text":"!\n","_key":"e196343e0c3c","_type":"span"}],"_type":"block"},{"_type":"block","style":"normal","_key":"a2792920386c","markDefs":[],"children":[{"text":"Awesome! Go ahead and navigate to “localhost:3000” and click on the blog post card. We’ll then be navigated to the blog post! Here’s an example of how it should look!","_key":"c5e93661824d","_type":"span","marks":[]}]},{"_type":"block","style":"normal","_key":"84d9b1df5b08","markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"dda8d64a2444"}]},{"alt":"View of OnePost() component with blog post showing","_key":"a1669a45130b","asset":{"_ref":"image-635d0a64d65478656fb17945aa98a849e4928927-3824x1798-png","_type":"reference"},"_type":"image"},{"children":[{"_type":"span","marks":[],"text":"We built a blog!","_key":"837dbf321ccc0"}],"_type":"block","style":"h2","_key":"3affadbf1222","markDefs":[]},{"style":"normal","_key":"28d79f7c3c6b","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Using React from ","_key":"30d6ca7b3519"},{"_type":"span","marks":["code"],"text":"create-react-app","_key":"a5c61eb01008"},{"_type":"span","marks":[],"text":", using Sanity to manage our content, and using Tailwind CSS for styling, we have created a pretty cool blog!","_key":"4d1668b421b2"}],"_type":"block"},{"markDefs":[],"children":[{"text":"The great thing about this is all we have to do is add blog posts to our Sanity Studio and it will automatically show up in our React application!","_key":"1d33e6e07f580","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"9982e9a1a829"},{"_type":"block","style":"normal","_key":"de76b2d896c3","markDefs":[{"_type":"link","href":"https://github.com/sanity-io/create-react-app-blog","_key":"6c90ae1a125e"}],"children":[{"_type":"span","marks":[],"text":"Remember, the final code for this project can be found ","_key":"21da015968800"},{"_type":"span","marks":["6c90ae1a125e"],"text":"here","_key":"db3958cacfa21"},{"marks":[],"text":"!","_key":"db3958cacfa22","_type":"span"}]},{"_key":"0f93002f09db","markDefs":[{"_type":"link","href":"https://slack.sanity.io/","_key":"c61ffcdbcd65"}],"children":[{"_type":"span","marks":[],"text":"What do you think of your blog built with React and Sanity? Let us know in the ","_key":"33686919d2920"},{"_type":"span","marks":["c61ffcdbcd65"],"text":"Community","_key":"0db4959a7691"},{"text":" or on Twitter! We would love to see it! The sky’s the limit with your new blog! Happy blogging!","_key":"bc99b52798cf","_type":"span","marks":[]}],"_type":"block","style":"normal"},{"markDefs":[],"children":[{"text":"","_key":"46972b82d485","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"6ecbb514b27a"}],"categories":[{"_ref":"apM2XmnuWRSTbverdGnVHd","_type":"reference","_key":"k-049060984603454494"},{"_ref":"apM2XmnuWRSTbverdGnVOF","_type":"reference","_key":"k-06722339436032436-"},{"_ref":"apM2XmnuWRSTbverdGnVTX","_type":"reference","_key":"k-032508468077254293"}],"slug":{"current":"build-your-first-blog-using-react","_type":"slug"},"publishedAt":"2020-08-26T21:31:40Z","ogImage":{"_type":"image","asset":{"_ref":"image-2dba700ab39b0e359b07d22b6c76113480cd5c9e-1200x630-png","_type":"reference"}},"_type":"contribution.guide","cameFromAdmin":true,"introduction":[{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Starting from scratch, build your first blog using ReactJS. We'll learn about the basic setup for a React SPA, query for our data, and have all of our blog content be managed by Sanity. To finish off, we'll style our blog with Tailwind CSS.","_key":"95410da2afba"}],"_type":"block","style":"normal","_key":"338257ac7305"}],"studioVersion":2,"authors":[{"ambassador":false,"handle":{"current":"kapehe","_type":"slug"},"name":"Kapehe","photo":{"asset":{"_type":"reference","_ref":"image-f58dfc69bd1c92121e0073e8be0cc3da4d448db1-1920x1920-jpg"},"_type":"image"},"headline":"Developer Relations at Sanity","location":"Las Vegas, NV","availableForWork":null,"ldJson":null}],"packageUrl":null,"_rev":"ESuIHruaBLXBNLM4ZwjFaj","_id":"e2e1f355-8048-4107-be37-2c330fe36c2a","_updatedAt":"2022-12-05T16:54:30Z","vercelDeployLink":null,"frameworks":[{"title":"React","_type":"taxonomy.framework","slug":{"current":"react"}}],"description":"Build a blog in React from scratch! We'll use Sanity for the content management and Tailwind CSS for styling.","hidden":false,"solutions":[{"title":"Marketing site","_type":"taxonomy.solution","slug":{"current":"marketing-site","_type":"slug"}}],"curated":{"upvoteCount":124,"relatedTitle":null,"related":null,"approved":true,"official":true,"featured":false}},"isPreview":false},"__N_SSG":true},"page":"/guides/[slug]","query":{"slug":"build-your-first-blog-using-react"},"buildId":"tHAV_nbC5mYoh3m6OFvdw","isFallback":false,"isExperimentalCompile":false,"dynamicIds":[3794,1823,37639],"gsp":true,"scriptLoader":[]}</script></body></html>