{"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":"60a393d8b7d0a531c6aa69b1","url":"https://blog.devjunction.in","canonicalURL":"https://blog.devjunction.in","urlPattern":"SIMPLE","title":"Dev.Junction","displayTitle":"Dev.Junction","hasBadges":true,"descriptionSEO":"We talk about Web Development, Programming, JavaScript, Python, Freelancing and Career related tips. Learning is a never ending process, keep learning and follow DevJunction for more.","about":{"html":"

Daily blogs about Web Development, JavaScript, Python and other programming stuff. Learning is a never ending process, keep learning & follow Dev.Junction.

\n","__typename":"Content"},"features":{"newsletter":{"isEnabled":true,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":true,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":true,"__typename":"ReadTimeFeature"},"audioBlog":{"isEnabled":true,"voiceType":"MALE","__typename":"AudioBlogFeature"},"textSelectionSharer":{"isEnabled":true,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":true,"published":{"__typename":"CustomCSS","homeMinified":"@media only screen and (min-width:768px){.blog-header{position:sticky !important;top:-12rem;z-index:1 !important;border-bottom-width:0 !important}.blog-search-button{width:12rem;background:#ffffffd4;border-width:1px;cursor:text}}@media only screen and (max-width:768px){.blog-header{position:sticky !important;top:-15.5rem;z-index:1 !important}.blog-header .container{border:none !important;box-shadow:none !important;margin-bottom:auto !important}}.blog-nav-active{border-bottom:0}.blog-nav-active .blog-nav-text{background:#583877;color:white}.blog-author-container{background-color:#ffffff00 !important;border-bottom-width:0 !important}.blog-author-card{padding-bottom:0 !important}.blog-header{background-color:#ffffff00 !important}.blog-header .container{background-color:#f9f61d;border:1px solid black;box-shadow:7px 7px 0 0 #583877;margin-bottom:2rem}.blog-post-card-wrapper{border:1px solid grey;padding:1rem;box-shadow:10px 10px 0 -2px #e86f6685;transition-duration:.3s}.blog-post-card-wrapper:hover{box-shadow:10px 10px 0 -2px #e86f66}.blog-subscription-form{border-bottom-width:1px;padding-bottom:2rem;margin-bottom:2rem !important}","postMinified":"@media only screen and (min-width:768px){.blog-header{position:sticky !important;top:0;z-index:41 !important;border-bottom-width:0 !important}.blog-search-button{width:12rem;background:#ffffffd4;border-width:1px;cursor:text}}@media only screen and (max-width:768px){.blog-header{position:sticky !important;top:-15.5rem;z-index:41 !important}.blog-header .container{border:none !important;box-shadow:none !important;margin-bottom:auto !important}}.blog-nav-active{border-bottom:0}.blog-nav-active .blog-nav-text{background:#583877;color:white}.blog-author-card{padding-bottom:0 !important}.blog-author-container{background-color:#ffffff00 !important;border-bottom-width:0 !important}.blog-header{background-color:#ffffff00 !important}.blog-header .container{background-color:#f9f61d;border:1px solid black;box-shadow:7px 7px 0 0 #583877;margin-bottom:2rem}h1 code,h2 code,h3 code{color:#e66d5e !important}","staticMinified":"@media only screen and (min-width:768px){.blog-header{position:sticky !important;top:-12rem;z-index:21 !important;border-bottom-width:0 !important}.blog-search-button{width:12rem;background:#ffffffd4;border-width:1px;cursor:text}}@media only screen and (max-width:768px){.blog-header{position:sticky !important;top:-15.5rem;z-index:21 !important}.blog-header .container{border:none !important;box-shadow:none !important;margin-bottom:auto !important}}.blog-nav-active{border-bottom:0}.blog-nav-active .blog-nav-text{background:#583877;color:white}.blog-author-card{padding-bottom:0 !important}.blog-author-container{background-color:#ffffff00 !important;border-bottom-width:0 !important}.blog-header{background-color:#ffffff00 !important}.blog-header .container{background-color:#f9f61d;border:1px solid black;box-shadow:7px 7px 0 0 #583877;margin-bottom:2rem}"},"draft":{"__typename":"CustomCSS","homeMinified":"@media only screen and (min-width:768px){.blog-header{position:sticky !important;top:-12rem;z-index:1 !important;border-bottom-width:0 !important}.blog-search-button{width:12rem;background:#ffffffd4;border-width:1px;cursor:text}}@media only screen and (max-width:768px){.blog-header{position:sticky !important;top:-15.5rem;z-index:1 !important}.blog-header .container{border:none !important;box-shadow:none !important;margin-bottom:auto !important}}.blog-nav-active{border-bottom:0}.blog-nav-active .blog-nav-text{background:#583877;color:white}.blog-author-container{background-color:#ffffff00 !important;border-bottom-width:0 !important}.blog-author-card{padding-bottom:0 !important}.blog-header{background-color:#ffffff00 !important}.blog-header .container{background-color:#f9f61d;border:1px solid black;box-shadow:7px 7px 0 0 #583877;margin-bottom:2rem}.blog-post-card-wrapper{border:1px solid grey;padding:1rem;box-shadow:10px 10px 0 -2px #e86f6685;transition-duration:.3s}.blog-post-card-wrapper:hover{box-shadow:10px 10px 0 -2px #e86f66}.blog-subscription-form{border-bottom-width:1px;padding-bottom:2rem;margin-bottom:2rem !important}","postMinified":"@media only screen and (min-width:768px){.blog-header{position:sticky !important;top:0;z-index:41 !important;border-bottom-width:0 !important}.blog-search-button{width:12rem;background:#ffffffd4;border-width:1px;cursor:text}}@media only screen and (max-width:768px){.blog-header{position:sticky !important;top:-15.5rem;z-index:41 !important}.blog-header .container{border:none !important;box-shadow:none !important;margin-bottom:auto !important}}.blog-nav-active{border-bottom:0}.blog-nav-active .blog-nav-text{background:#583877;color:white}.blog-author-card{padding-bottom:0 !important}.blog-author-container{background-color:#ffffff00 !important;border-bottom-width:0 !important}.blog-header{background-color:#ffffff00 !important}.blog-header .container{background-color:#f9f61d;border:1px solid black;box-shadow:7px 7px 0 0 #583877;margin-bottom:2rem}h1 code,h2 code,h3 code{color:#e66d5e !important}","staticMinified":"@media only screen and (min-width:768px){.blog-header{position:sticky !important;top:-12rem;z-index:21 !important;border-bottom-width:0 !important}.blog-search-button{width:12rem;background:#ffffffd4;border-width:1px;cursor:text}}@media only screen and (max-width:768px){.blog-header{position:sticky !important;top:-15.5rem;z-index:21 !important}.blog-header .container{border:none !important;box-shadow:none !important;margin-bottom:auto !important}}.blog-nav-active{border-bottom:0}.blog-nav-active .blog-nav-text{background:#583877;color:white}.blog-author-card{padding-bottom:0 !important}.blog-author-container{background-color:#ffffff00 !important;border-bottom-width:0 !important}.blog-header{background-color:#ffffff00 !important}.blog-header .container{background-color:#f9f61d;border:1px solid black;box-shadow:7px 7px 0 0 #583877;margin-bottom:2rem}"},"__typename":"CustomCSSFeature"},"__typename":"PublicationFeatures"},"metaTags":"\n\n","ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621653505370/fEn_dsj0L.png","__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"60a39287b7d0a531c6aa6960","name":"Gaurav Sharma","username":"mnamegaurav","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672650968590/I0GDzQONM.jpeg"},"preferences":{"__typename":"Preferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1651940925157/zpZiaSZ47.png","darkMode":{"__typename":"DarkModePreferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1651940927310/LKhd-6Byg.png","enabled":false},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"62889b3c929bcf4c721d2840","label":"Resources","url":"https://blog.devjunction.in/resources","priority":6,"type":"page","series":null,"page":{"__typename":"StaticPage","id":"62889ae6929bcf4c721d283e"}},{"__typename":"PublicationNavbarItem","id":"628a180b929bcf4c721d45eb","label":"Dev.Junction Content","url":"https://blog.devjunction.in/devjunction","priority":5,"type":"page","series":null,"page":{"__typename":"StaticPage","id":"628a17b2aad1d357809ff785"}},{"__typename":"PublicationNavbarItem","id":"628a1807929bcf4c721d45e5","label":"YouTube","url":"https://www.youtube.com/c/devjunction","priority":4,"type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"63c4d124dbe7ab4342a0702b","label":"E-Book","url":"https://store.devjunction.in","priority":4,"type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"628a1802929bcf4c721d45df","label":"Discord","url":"https://discord.gg/9YnpgB8Rv5","priority":3,"type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"628a17fb929bcf4c721d45d8","label":"Sponsor","url":"https://blog.devjunction.in/sponsor","priority":2,"type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"628a17f6929bcf4c721d45d3","label":"Buy me a Coffee","url":"https://buymeacoffee.com/mnamegaurav","priority":1,"type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"627ceb46b7c3c8c34614f921","label":"About","url":"https://blog.devjunction.in/about","priority":0,"type":"page","series":null,"page":{"__typename":"StaticPage","id":"627ceb204903bec29b586c77"}}],"enabledPages":{"__typename":"PagesPreferences","badges":false,"newsletter":true,"members":false},"layout":"grid","disableFooterBranding":false},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1652510017554/_60XgoAaQ.png","headerColor":"#ffffff","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"G-RK8PK5DWQP","plausibleAnalyticsEnabled":true,"wmPaymentPointer":"","umamiWebsiteUUID":null,"__typename":"PublicationIntegrations"},"imprint":"","postsCount":63,"isTeam":true,"links":{"twitter":"https://twitter.com/mnamegaurav","instagram":"https://www.instagram.com/devjunction_in/","github":"https://github.com/mnamegaurav","website":"https://devjunction.in","hashnode":"https://hashnode.com/@mnamegaurav","youtube":"https://www.youtube.com/c/devjunction","dailydev":"","linkedin":"https://www.linkedin.com/company/devjunction/","mastodon":"","__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"devjunction","domain":{"__typename":"DomainStatus","host":"blog.devjunction.in","ready":true},"wwwPrefixedDomain":null},"redirectionRules":[{"source":"/youtube","destination":"https://www.youtube.com/c/devjunction","type":"TEMPORARY","__typename":"RedirectionRule"},{"source":"/gaurav","destination":"https://gaurav.devjunction.in/","type":"TEMPORARY","__typename":"RedirectionRule"},{"source":"/linkedin","destination":"https://www.linkedin.com/in/mnamegaurav","type":"TEMPORARY","__typename":"RedirectionRule"},{"source":"/github","destination":"https://github.com/mnamegaurav","type":"TEMPORARY","__typename":"RedirectionRule"},{"source":"/instagram","destination":"https://www.instagram.com/devjunction_in/","type":"TEMPORARY","__typename":"RedirectionRule"},{"source":"/linkedin-page","destination":"https://www.linkedin.com/company/devjunction/","type":"TEMPORARY","__typename":"RedirectionRule"},{"source":"/hashnode","destination":"https://hashnode.com/@mnamegaurav","type":"TEMPORARY","__typename":"RedirectionRule"},{"source":"/twitter","destination":"https://twitter.com/mnamegaurav","type":"TEMPORARY","__typename":"RedirectionRule"},{"source":"/easy-drf","destination":"https://www.youtube.com/playlist?list=PLLpdwvkAGftBiEepKjgI1pwfP2qmBdCOu","type":"TEMPORARY","__typename":"RedirectionRule"},{"source":"/easy-django","destination":"https://www.youtube.com/playlist?list=PLLpdwvkAGftAvoRBOoVs8rVyzZmN0IsVO","type":"TEMPORARY","__typename":"RedirectionRule"}],"sponsorship":{"content":{"html":"

Hi

Gaurav here, An independent full stack developer and Founder of DevJunction.

I have a really great passion for teaching and sharing my knowledge through Blogs, LinkedIn and YouTube. I have been doing this actively for the last few years.

If you are following me since the beginning, high chances you are already aware about my passion towards teaching.

Have a great day.

\n","markdown":"# Hi\n\nGaurav here, An independent full stack developer and Founder of DevJunction.\n\nI have a really great passion for teaching and sharing my knowledge through Blogs, LinkedIn and YouTube. I have been doing this actively for the last few years.\n\nIf you are following me since the beginning, high chances you are already aware about my passion towards teaching.\n\n# Have a great day.","__typename":"Content"},"stripe":{"connected":true,"accountId":"acct_1KxD5nSAOwR6FIIm","country":"IN","__typename":"StripeConfiguration"},"__typename":"PublicationSponsorship"},"pro":null,"posts":{"edges":[{"node":{"id":"65144552151cac3a132e3ab8","title":"What is TypeScript, Why and how to use it?","slug":"what-is-typescript-why-and-how-to-use-it","publishedAt":"2023-09-27T15:08:02.067Z","cuid":"cln1vs1ar000k09l81nowbyeq","url":"https://blog.devjunction.in/what-is-typescript-why-and-how-to-use-it","subtitle":"TypeScript, a Syntactic sugar on top of JavaScript","brief":"You might have heard many senior JavaScript developers talking about typescript, and praising about the benefits of using it.\nWhat is so special in TypeScript that it is being used by over 13.3M+ developer worldwide, as per GitHub statistics?\nWe will...","readTimeInMinutes":4,"views":71,"author":{"id":"60a39287b7d0a531c6aa6960","username":"mnamegaurav","name":"Gaurav Sharma","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672650968590/I0GDzQONM.jpeg","followersCount":20,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1695826878960/31264b94-2472-4d59-b8db-e3d157292bbc.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjUxNDQ1NTIxNTFjYWMzYTEzMmUzYWI4XzIwMjMtMDktMjdUMTU6MDg6MDIuMDY3Wg==","__typename":"PostEdge"},{"node":{"id":"63b6aee8406ed2b523b6a7c6","title":"5 Tips for Optimizing Performance in a React App","slug":"5-tips-for-optimizing-performance-in-a-react-app","publishedAt":"2023-01-05T11:05:11.988Z","cuid":"clcizf0ac000708l466mj1p58","url":"https://blog.devjunction.in/5-tips-for-optimizing-performance-in-a-react-app","subtitle":"Improve the user experience and efficiency of your React app with these simple techniques.","brief":"Introduction:\nIf you're building a React application, it's important to ensure that it performs well and provides a smooth user experience.\nIn this article, we'll cover 5 tips for optimizing performance in a React app. From optimizing your component ...","readTimeInMinutes":3,"views":179,"author":{"id":"60a39287b7d0a531c6aa6960","username":"mnamegaurav","name":"Gaurav Sharma","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672650968590/I0GDzQONM.jpeg","followersCount":20,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672916554909/50cd5ca5-2a1b-4ffa-a704-c283e3a90390.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjNiNmFlZTg0MDZlZDJiNTIzYjZhN2M2XzIwMjMtMDEtMDVUMTE6MDU6MTEuOTg4Wg==","__typename":"PostEdge"},{"node":{"id":"628d0962bc26026fa45c47c9","title":"5 Ways to Style React Components in CRA (Create React App)","slug":"5-ways-to-style-react-components-in-create-react-app","publishedAt":"2022-05-24T16:35:46.660Z","cuid":"cl3kdpm7a069kl8nva069d6z9","url":"https://blog.devjunction.in/5-ways-to-style-react-components-in-create-react-app","subtitle":"Styling in React is a piece of cake","brief":"#1. Plain CSS/SCSS\nYou can simply create a CSS / SCSS files anywhere inside your src directory in your CRA, simply import it in your components, and you are ready to use CSS / SCSS files in your React project.\nNote: For using SCSS in a CRA, you have ...","readTimeInMinutes":3,"views":139,"author":{"id":"60a39287b7d0a531c6aa6960","username":"mnamegaurav","name":"Gaurav Sharma","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672650968590/I0GDzQONM.jpeg","followersCount":20,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1652813186441/4NSF3XLUt.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjI4ZDA5NjJiYzI2MDI2ZmE0NWM0N2M5XzIwMjItMDUtMjRUMTY6MzU6NDYuNjYwWg==","__typename":"PostEdge"},{"node":{"id":"62752456317fc95a74ca5e1e","title":"Why you should use NextJS instead of just React (Create React App)?","slug":"why-you-should-use-nextjs-instead-of-just-create-react-app","publishedAt":"2022-05-06T13:36:22.139Z","cuid":"cl2uhdk7k001wu5nv5g0k0skn","url":"https://blog.devjunction.in/why-you-should-use-nextjs-instead-of-just-create-react-app","subtitle":"NextJS is a better than Create React App if you need SEO.","brief":"Here are few reasons that you have to read right now.\n\nAutomatic code splitting, NextJS is really smart when you build your project, it knows which JS/CSS code to be sent when any request come for any page. No unnecessary junk.\n\nImage optimization, N...","readTimeInMinutes":2,"views":84,"author":{"id":"60a39287b7d0a531c6aa6960","username":"mnamegaurav","name":"Gaurav Sharma","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672650968590/I0GDzQONM.jpeg","followersCount":20,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1651843930279/Vf9onj8xf.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjI3NTI0NTYzMTdmYzk1YTc0Y2E1ZTFlXzIwMjItMDUtMDZUMTM6MzY6MjIuMTM5Wg==","__typename":"PostEdge"},{"node":{"id":"610e397db79d6a1136681050","title":"Create a Global State with React Context 🦾, No Redux, No third party library at all, pure React for Global State.","slug":"create-a-global-state-with-react-context-no-redux-no-third-party-library-at-all-pure-react-for-global-state","publishedAt":"2021-08-07T07:41:04.000Z","cuid":"cks1gza0i0j8tees13oaa1lfn","url":"https://blog.devjunction.in/create-a-global-state-with-react-context-no-redux-no-third-party-library-at-all-pure-react-for-global-state","subtitle":"React Context for global state with pure React","brief":"What is React Context?\nA typical React application consists of many Components, things get pretty complex as an application grows. If you are using props to pass state values from your parent component to the child component, things will become more ...","readTimeInMinutes":7,"views":291,"author":{"id":"60a39287b7d0a531c6aa6960","username":"mnamegaurav","name":"Gaurav Sharma","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672650968590/I0GDzQONM.jpeg","followersCount":20,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1628322054388/32juLgqzD.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjEwZTM5N2RiNzlkNmExMTM2NjgxMDUwXzIwMjEtMDgtMDdUMDc6NDE6MDQuMDAwWg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjEwZTM5N2RiNzlkNmExMTM2NjgxMDUwXzIwMjEtMDgtMDdUMDc6NDE6MDQuMDAwWg==","hasNextPage":false,"__typename":"PageInfo"},"__typename":"PublicationPostConnection"}}}