{"tag":{"id":"56744723958ef13879b95434","name":"React","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","slug":"reactjs","tagline":"React is a JavaScript library for building user interfaces.","__typename":"Tag"},"publication":{"__typename":"Publication","id":"5f29a7b2d7d55f162b5d9ce4","url":"https://sabinadams.hashnode.dev","canonicalURL":"https://sabinadams.hashnode.dev","urlPattern":"SIMPLE","title":"Sabin Adams","displayTitle":"SabinTheDev","hasBadges":true,"descriptionSEO":"Tutorials for a learning developer, from a learning developer.","publicMembers":{"totalDocuments":1,"__typename":"PublicationMemberConnection"},"about":{"html":"

Developer Advocate @ Prisma, Husband, and Board Game lover. I'm always learning and love sharing as I go. Hit me up on Twitter if you want to chat!

\n","text":"Developer Advocate @ Prisma, Husband, and Board Game lover. I'm always learning and love sharing as I go. Hit me up on Twitter if you want to chat!\n","__typename":"Content"},"features":{"proTeam":{"isEnabled":false,"__typename":"ProTeamFeature"},"newsletter":{"isEnabled":true,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":false,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":true,"__typename":"ReadTimeFeature"},"textSelectionSharer":{"isEnabled":true,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":false,"published":null,"draft":null,"__typename":"CustomCSSFeature"},"gptBotCrawling":{"__typename":"GPTBotCrawlingFeature","isEnabled":false},"__typename":"PublicationFeatures"},"metaTags":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1643722920003/cNVtiXnOl.png","__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"5f28ad3009567e0dc187ef1b","name":"Sabin Adams","username":"SabinAdams","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1659331093180/bct8YleSD.jpeg"},"preferences":{"__typename":"Preferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621652871690/xNziFCR4A.png","darkMode":{"__typename":"DarkModePreferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621650933657/Cqo8gTgKd.png","enabled":false},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"604632c1d0457f4d5c5834c0","label":"Contact","url":"https://sabinadams.hashnode.dev/contact","type":"page","series":null,"page":{"__typename":"StaticPage","id":"5f29c6d8e180c5164cdeccf0"}}],"enabledPages":{"__typename":"PagesPreferences","badges":false,"newsletter":true,"members":true},"layout":"magazine","disableFooterBranding":false,"isSubscriptionModalDisabled":false},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1620723343486/MV7lV_l16.png","headerColor":"","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"G-12LRK3N27T","gTagManagerID":null,"plausibleAnalyticsEnabled":true,"wmPaymentPointer":"","koalaPublicKey":null,"msClarityID":null,"__typename":"PublicationIntegrations"},"imprintV2":null,"postsCount":{"totalDocuments":29,"__typename":"PublicationPostConnection"},"isTeam":true,"links":{"twitter":"https://twitter.com/sabinthedev","instagram":"","github":"https://github.com/sabinadams","website":"https://www.devchronicles.io","hashnode":"https://hashnode.com/@SabinAdams","youtube":"","dailydev":"https://app.daily.dev/sabinadams","linkedin":"","mastodon":"","facebook":null,"bluesky":null,"__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"sabinadams","domain":null,"wwwPrefixedDomain":null},"redirectionRules":[],"totalRecommendedPublications":0,"sponsorship":{"content":null,"stripe":null,"__typename":"PublicationSponsorship"},"allowContributorEdits":true,"posts":{"edges":[{"node":{"__typename":"Post","id":"64c1a707c08681b2824c886e","title":"Add Sign In and Sign Up to Your React App With Clerk","slug":"add-sign-in-and-sign-up-to-your-react-app-with-clerk","publishedAt":"2023-07-26T23:06:47.781Z","cuid":"clkkc5279000209jn00ide9gr","url":"https://sabinadams.hashnode.dev/add-sign-in-and-sign-up-to-your-react-app-with-clerk","subtitle":null,"brief":"It can look like a daunting task if you haven't had to add authentication to your application before. This is because there are so many things to consider:\n\nWhere do I store my user data?\nHow do I make sure it is secure?\nWhat should the sign-up and s...","readTimeInMinutes":7,"views":38,"author":{"__typename":"User","id":"5f28ad3009567e0dc187ef1b","username":"SabinAdams","name":"Sabin Adams","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1659331093180/bct8YleSD.jpeg","followersCount":93},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/imageupload/v1690412323215/a65a5f8a-3794-4dbb-b890-3fbee0aaad71.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjRjMWE3MDdjMDg2ODFiMjgyNGM4ODZlXzIwMjMtMDctMjZUMjM6MDY6NDcuNzgxWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"64beb4fba812a5b4767eeeb9","title":"Common React Interview Question: Tic Tac Toe","slug":"common-react-interview-question-tic-tac-toe","publishedAt":"2023-07-24T17:29:31.937Z","cuid":"clkh57msh000c09l15ejs6nny","url":"https://sabinadams.hashnode.dev/common-react-interview-question-tic-tac-toe","subtitle":null,"brief":"Are you preparing for a technical interview for a position where you'll be working with React? One of the more common tasks I've seen given to interviewees is: \"build a simple tic tac toe game\".\nOftentimes, the individual you are coordinating intervi...","readTimeInMinutes":14,"views":34,"author":{"__typename":"User","id":"5f28ad3009567e0dc187ef1b","username":"SabinAdams","name":"Sabin Adams","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1659331093180/bct8YleSD.jpeg","followersCount":93},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/imageupload/v1690219119756/832623c3-4129-40da-ab07-da4a9656055a.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjRiZWI0ZmJhODEyYTViNDc2N2VlZWI5XzIwMjMtMDctMjRUMTc6Mjk6MzEuOTM3Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"61f9154de0502911a6f0fbc4","title":"Dynamically Setting Meta Tags in Remix","slug":"dynamically-setting-meta-tags-in-remix","publishedAt":"2022-02-01T11:11:09.152Z","cuid":"ckz40sqnz028dhis12ckuap9s","url":"https://sabinadams.hashnode.dev/dynamically-setting-meta-tags-in-remix","subtitle":"Check out how to dynamically update the Meta tags on your webpage from Remix sub-routes for better SEO.","brief":"Often when developing a website, the meta information about a webpage is determined by some of the content that gets loaded into the page.\nA product's page for headphones might have a description: Sony Headphones, the number one product in its class!...","readTimeInMinutes":5,"views":3515,"author":{"__typename":"User","id":"5f28ad3009567e0dc187ef1b","username":"SabinAdams","name":"Sabin Adams","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1659331093180/bct8YleSD.jpeg","followersCount":93},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1643713824522/3xMVipZxt.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjFmOTE1NGRlMDUwMjkxMWE2ZjBmYmM0XzIwMjItMDItMDFUMTE6MTE6MDkuMTUyWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"61ea9bd1540e877a6c00bb84","title":"End-To-End Type Safety: What, Why and How","slug":"end-to-end-type-safety-what-why-and-how","publishedAt":"2022-01-21T11:41:05.157Z","cuid":"ckyoc0v7001i86ks18kee6hus","url":"https://sabinadams.hashnode.dev/end-to-end-type-safety-what-why-and-how","subtitle":"Learn the concept of End-To-End Type Safety by implementing it in a full-stack application using Nx, NestJS, React, and Prisma","brief":"A difficult challenge developers often face is creating and managing types across the entirety of their software stack in a way that allows for quick and easy error and change detection.\nWithout a proper system in place, simple changes to your databa...","readTimeInMinutes":16,"views":4238,"author":{"__typename":"User","id":"5f28ad3009567e0dc187ef1b","username":"SabinAdams","name":"Sabin Adams","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1659331093180/bct8YleSD.jpeg","followersCount":93},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1642719412344/F3bG3iqRB.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjFlYTliZDE1NDBlODc3YTZjMDBiYjg0XzIwMjItMDEtMjFUMTE6NDE6MDUuMTU3Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"61e64f1df6d40b3391ad6acb","title":"Adding Custom Font Classes to TailwindCSS","slug":"adding-custom-font-classes-to-tailwindcss","publishedAt":"2022-01-18T05:24:45.151Z","cuid":"ckyjo9cb101p56ps17l0pcn9m","url":"https://sabinadams.hashnode.dev/adding-custom-font-classes-to-tailwindcss","subtitle":"Learn how to add Custom Font Classes to Tailwind in a React Project","brief":"In this article we'll be taking a look at how to use Custom Fonts with TailwindCSS and make those available as Tailwind classes.\nTailwindCSS is one of the most useful CSS frameworks to date and has tons of amazing features that make building beautifu...","readTimeInMinutes":5,"views":3278,"author":{"__typename":"User","id":"5f28ad3009567e0dc187ef1b","username":"SabinAdams","name":"Sabin Adams","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1659331093180/bct8YleSD.jpeg","followersCount":93},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1642466451914/HBrwRReiy.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjFlNjRmMWRmNmQ0MGIzMzkxYWQ2YWNiXzIwMjItMDEtMThUMDU6MjQ6NDUuMTUxWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"60a868ac5379f65d10b5ea6a","title":"Using a React Component's function from its Parent","slug":"using-a-react-components-function-from-its-parent","publishedAt":"2021-05-22T02:13:00.145Z","cuid":"ckoz4ag9h07j7dss15j7776wy","url":"https://sabinadams.hashnode.dev/using-a-react-components-function-from-its-parent","subtitle":"With forwardRef and useImperativeHandle","brief":"React offers an awesome toolset that allows you to effectively break up and modularize your applications into smaller pieces that work together. This allows us developers to breakout functionality and keep it in one location. \nWhile this way of archi...","readTimeInMinutes":6,"views":179,"author":{"__typename":"User","id":"5f28ad3009567e0dc187ef1b","username":"SabinAdams","name":"Sabin Adams","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1659331093180/bct8YleSD.jpeg","followersCount":93},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621650212687/ACmtrmUJk.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjBhODY4YWM1Mzc5ZjY1ZDEwYjVlYTZhXzIwMjEtMDUtMjJUMDI6MTM6MDAuMTQ1Wg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjBhODY4YWM1Mzc5ZjY1ZDEwYjVlYTZhXzIwMjEtMDUtMjJUMDI6MTM6MDAuMTQ1Wg==","hasNextPage":true,"__typename":"PageInfo"},"__typename":"PublicationPostConnection"}}}