React Tutorial - GeeksforGeeks

<!DOCTYPE html>    <html lang="en-US" prefix="og: http://ogp.me/ns#" >  <head> <meta charset="UTF-8" /> <meta name="keywords" content="React,React JS,React Tutorial,Learn React,React.js,JSX,React Components,React Hooks,React State Management,React Router,React Context API,Redux,Next.js,React Native,Virtual DOM,React Lifecycle Methods,Frontend Development,SPA (Single Page Application),JavaScript Frameworks,React Tutorials,React Interview Questions,React Best Practices,Component-Based Architecture,State and Props,Web Development with React,JavaScript Libraries,Server-Side Rendering,Functional Components,Class Components,React Forms,Code Splitting,React Performance Optimization,Prop Drilling,React Testing,TypeScript with React,Styled Components,React Suspense,React Concurrent Mode,Recoil,React Query,Webpack Configuration,Babel,React Developer Tools,React Code Examples,React Debugging,React Animations,React Portals,Frontend Frameworks,React Ecosystem" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0"> <link rel="shortcut icon" href="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_favicon.png" type="image/x-icon" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <meta name="theme-color" content="#308D46" /> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1' /> <meta name="image" property="og:image" content="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="200"> <meta property="og:image:height" content="200"> <meta name="facebook-domain-verification" content="xo7t4ve2wn3ywfkjdvwbrk01pvdond" /> <script src="https://cdnads.geeksforgeeks.org/synchronously_gfg_ads.min.js"></script> <script defer src="https://apis.google.com/js/platform.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>     <script> var IHPWT={}; //Initialize Namespace var pbjs = pbjs || {}; pbjs.que = pbjs.que || []; var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; var gptRan = false; </script> <script defer src="https://ads.pubmatic.com/AdServer/js/pwt/162080/12331/pwt.js"></script> <script defer src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <script defer src="https://cdnads.geeksforgeeks.org/prebid.js?ver=0.1"></script> <script defer src="https://cdnads.geeksforgeeks.org/gfg_ads.min.js?ver=0.1"></script>  <script defer src="https://assets.geeksforgeeks.org/codetabs/v1/codetabs.js" environment="production" domain="gfg" no-scroll></script> <title>React Tutorial - GeeksforGeeks</title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="" />   <script> var video_api_response = JSON.parse("{\"id\":10667,\"title\":\"React Introduction\",\"slug\":\"react-introduction\",\"description\":\"<h2>ReactJS Introduction | Comprehensive Guide<\/h2><p><strong>ReactJS<\/strong> is a popular JavaScript library used for building user interfaces, particularly for single-page applications (SPAs). It allows developers to create reusable UI components that manage their own state, making the process of building complex interfaces more efficient and maintainable. React was developed by Facebook and is maintained by both Facebook and a large community of developers.<\/p><h3>What is ReactJS?<\/h3><p><strong>ReactJS<\/strong>, often simply called <strong>React<\/strong>, is an open-source JavaScript library designed for building dynamic and interactive web applications. It focuses on creating fast and scalable front-end applications by using a component-based architecture.<\/p><p>React allows developers to build web applications where data can change dynamically without the need to reload the page. This is achieved through the use of components, which are the building blocks of a React application.<\/p><h3>Key Features of ReactJS<\/h3><p><strong>Component-Based Architecture<\/strong>:<\/p><ul><li>React applications are made up of multiple components, each responsible for rendering a small, reusable piece of HTML. These components can be nested within each other to build more complex interfaces.<\/li><\/ul><p><strong>Virtual DOM<\/strong>:<\/p><ul><li>React uses a <strong>Virtual DOM<\/strong>, which is a lightweight copy of the actual DOM. When a component\u2019s state changes, React updates the virtual DOM first, and then efficiently updates only the parts of the actual DOM that changed. This improves the performance of web applications.<\/li><\/ul><p><strong>JSX (JavaScript XML)<\/strong>:<\/p><ul><li>React uses <strong>JSX<\/strong>, a syntax that allows developers to write HTML within JavaScript. JSX makes it easier to write and visualize the structure of the UI within the same codebase.<\/li><\/ul><p><strong>Unidirectional Data Flow<\/strong>:<\/p><ul><li>React follows a <strong>unidirectional data flow<\/strong>, meaning data flows from parent to child components through props. This structure makes it easier to manage and debug applications by tracing how data moves through the application.<\/li><\/ul><p><strong>Declarative UI<\/strong>:<\/p><ul><li>With React, developers can describe the UI based on the current state of the application. React automatically updates and renders the necessary components when the state changes, which makes it easier to reason about the code.<\/li><\/ul><p><strong>React Hooks<\/strong>:<\/p><ul><li>Hooks are functions introduced in React 16.8 that let developers use state and other React features without writing classes. Common hooks include useState, useEffect, and useContext.<\/li><\/ul><h3>Benefits of ReactJS<\/h3><p><strong>Reusable Components<\/strong>:<\/p><ul><li>One of the core principles of React is its <strong>component-based architecture<\/strong>. Components can be reused across different parts of an application, reducing duplication and improving consistency.<\/li><\/ul><p><strong>Improved Performance<\/strong>:<\/p><ul><li>React\u2019s <strong>Virtual DOM<\/strong> helps in updating only the components that changed rather than reloading the entire DOM. This results in faster rendering and better performance, especially in large applications.<\/li><\/ul><p><strong>Strong Community Support<\/strong>:<\/p><ul><li>React is maintained by Facebook and has a massive community of developers contributing to its growth. This makes it easy to find resources, tutorials, and libraries that extend React\u2019s functionality.<\/li><\/ul><p><strong>SEO-Friendly<\/strong>:<\/p><ul><li>React can be rendered on the server using <strong>ReactDOMServer<\/strong>, allowing search engines to easily crawl the content of the page, improving SEO.<\/li><\/ul><p><strong>Rich Ecosystem<\/strong>:<\/p><ul><li>React has a rich ecosystem of tools and libraries, such as React Router for routing and Redux for state management, which makes it highly versatile and extendable.<\/li><\/ul><h3>Use Cases of ReactJS<\/h3><p><strong>Single Page Applications (SPAs)<\/strong>:<\/p><ul><li>React is often used for building single-page applications where the content dynamically updates without the need for a full-page reload.<\/li><\/ul><p><strong>Dynamic Web Applications<\/strong>:<\/p><ul><li>Any web application that needs to handle dynamic data, such as social media platforms, e-commerce websites, or dashboards, can benefit from React\u2019s efficient rendering system.<\/li><\/ul><p><strong>Mobile Applications<\/strong>:<\/p><ul><li>With <strong>React Native<\/strong>, developers can build mobile applications for iOS and Android using React\u2019s architecture and component-based approach.<\/li><\/ul><p><strong>Progressive Web Apps (PWAs)<\/strong>:<\/p><ul><li>React can be used to build Progressive Web Apps, which offer a native app-like experience with features like offline access and push notifications.<\/li><\/ul><h3>Why Learn ReactJS?<\/h3><p>ReactJS has become one of the most widely used libraries for front-end development due to its flexibility, efficiency, and ease of use. Whether you're building small websites or large-scale enterprise applications, React provides the tools and ecosystem to create maintainable, scalable, and performant web applications. By learning React, developers gain the skills necessary to work on cutting-edge projects and build fast, interactive user interfaces.<\/p><p><strong>Topics Covered<\/strong>:<\/p><p><strong>Key Features of React<\/strong>: Components, Virtual DOM, JSX, and more.<\/p><p><strong>Benefits of Using ReactJS<\/strong>: Reusability, performance, community support, and SEO benefits.<\/p><p><strong>Applications of ReactJS<\/strong>: SPAs, dynamic web applications, mobile apps, and PWAs.<\/p><p>For more details and further examples, check out the full article on GeeksforGeeks: <a href=\\\"https:\/\/www.geeksforgeeks.org\/reactjs-introduction\/\\\">https:\/\/www.geeksforgeeks.org\/reactjs-introduction\/<\/a>.<\/p>\",\"source\":\"https:\/\/videos.geeksforgeeks.org\/ec9796f0d0dea6a50fa2d45a6ca8d835gfg-WhyReact20241008152425\/video.m3u8\",\"category\":[{\"term_id__id\":91,\"term_id__term_name\":\"Web Development\",\"term_id__term_type\":1,\"term_id__slug\":\"web-development\"},{\"term_id__id\":232,\"term_id__term_name\":\"React JS\",\"term_id__term_type\":2,\"term_id__slug\":\"react-js\"},{\"term_id__id\":449,\"term_id__term_name\":\"web-technology\",\"term_id__term_type\":2,\"term_id__slug\":\"web-technology\"}],\"video_type\":\"geeksforgeeks\",\"meta\":{\"thumbnail\":\"https:\/\/media.geeksforgeeks.org\/geeksforgeeks\/ReactIntroduction\/ReactIntroduction20241008152420-small.png\",\"largeThumbnail\":\"https:\/\/media.geeksforgeeks.org\/geeksforgeeks\/ReactIntroduction\/ReactIntroduction20241008152420.jpg\",\"likes\":0,\"views\":30,\"isFeatured\":0,\"isPremium\":0,\"isPublic\":0,\"format\":\"video\/mp4\",\"revision\":{}},\"time\":\"08\/10\/2024\",\"seo\":{\"description\":\"<h2>ReactJS Introduction | Comprehensive Guide<\/h2><p><strong>ReactJS<\/stro\",\"thumbnail\":\"https:\/\/media.geeksforgeeks.org\/geeksforgeeks\/ReactIntroduction\/ReactIntroduction20241008152420-seo.png\"},\"subtitle\":\"https:\/\/videos.geeksforgeeks.org\/ec9796f0d0dea6a50fa2d45a6ca8d835gfg-WhyReact20241008152425\/subtitle.vtt\",\"duration\":966,\"post_list\":[{\"post_id\":159349,\"post_title\":\"React Introduction\"},{\"post_id\":1107997,\"post_title\":\"React Tutorial\"}],\"course_link\":\"https:\/\/www.geeksforgeeks.org\/courses\/react-js-beginner-to-advance\",\"views\":\"30\",\"video_schema\":{\"@context\":\"https:\/\/schema.org\",\"@type\":\"VideoObject\",\"name\":\"React Introduction\",\"description\":\"ReactJS Introduction Comprehensive GuideReactJS is a popular JavaScript library used for building user interfaces, particularly for single-page applications (SPAs). It allows developers to create reusable UI components that manage their own state, making the process of building complex interfaces more efficient and maintainable. React was developed by Facebook and is maintained by both Facebook and a large community of developers.What is ReactJS?ReactJS, often simply called React, is an open-source JavaScript library designed for building dynamic and interactive web applications. It focuses on creating fast and scalable front-end applications by using a component-based architecture.React allows developers to build web applications where data can change dynamically without the need to reload the page. This is achieved through the use of components, which are the building blocks of a React application.Key Features of ReactJSComponent-Based ArchitectureReact applications are made up of multiple components, each responsible for rendering a small, reusable piece of HTML. These components can be nested within each other to build more complex interfaces.Virtual DOMReact uses a Virtual DOM, which is a lightweight copy of the actual DOM. When a components state changes, React updates the virtual DOM first, and then efficiently updates only the parts of the actual DOM that changed. This improves the performance of web applications.JSX (JavaScript XML)React uses JSX, a syntax that allows developers to write HTML within JavaScript. JSX makes it easier to write and visualize the structure of the UI within the same codebase.Unidirectional Data FlowReact follows a unidirectional data flow, meaning data flows from parent to child components through props. This structure makes it easier to manage and debug applications by tracing how data moves through the application.Declarative UIWith React, developers can describe the UI based on the current state of the application. React automatically updates and renders the necessary components when the state changes, which makes it easier to reason about the code.React HooksHooks are functions introduced in React 16.8 that let developers use state and other React features without writing classes. Common hooks include useState, useEffect, and useContext.Benefits of ReactJSReusable ComponentsOne of the core principles of React is its component-based architecture. Components can be reused across different parts of an application, reducing duplication and improving consistency.Improved PerformanceReacts Virtual DOM helps in updating only the components that changed rather than reloading the entire DOM. This results in faster rendering and better performance, especially in large applications.Strong Community SupportReact is maintained by Facebook and has a massive community of developers contributing to its growth. This makes it easy to find resources, tutorials, and libraries that extend Reacts functionality.SEO-FriendlyReact can be rendered on the server using ReactDOMServer, allowing search engines to easily crawl the content of the page, improving SEO.Rich EcosystemReact has a rich ecosystem of tools and libraries, such as React Router for routing and Redux for state management, which makes it highly versatile and extendable.Use Cases of ReactJSSingle Page Applications (SPAs)React is often used for building single-page applications where the content dynamically updates without the need for a full-page reload.Dynamic Web ApplicationsAny web application that needs to handle dynamic data, such as social media platforms, e-commerce websites, or dashboards, can benefit from Reacts efficient rendering system.Mobile ApplicationsWith React Native, developers can build mobile applications for iOS and Android using Reacts architecture and component-based approach.Progressive Web Apps (PWAs)React can be used to build Progressive Web Apps, which offer a native app-like experience with features like offline access and push notifications.Why Learn ReactJS?ReactJS has become one of the most widely used libraries for front-end development due to its flexibility, efficiency, and ease of use. Whether youre building small websites or large-scale enterprise applications, React provides the tools and ecosystem to create maintainable, scalable, and performant web applications. By learning React, developers gain the skills necessary to work on cutting-edge projects and build fast, interactive user interfaces.Topics CoveredKey Features of React Components, Virtual DOM, JSX, and more.Benefits of Using ReactJS Reusability, performance, community support, and SEO benefits.Applications of ReactJS SPAs, dynamic web applications, mobile apps, and PWAs.For more details and further examples, check out the full article on GeeksforGeeks httpswww.geeksforgeeks.orgreactjs-introduction.\",\"thumbnailUrl\":[\"https:\/\/media.geeksforgeeks.org\/geeksforgeeks\/ReactIntroduction\/ReactIntroduction20241008152420-seo.png\",\"https:\/\/media.geeksforgeeks.org\/geeksforgeeks\/ReactIntroduction\/ReactIntroduction20241008152420.jpg\",\"https:\/\/media.geeksforgeeks.org\/geeksforgeeks\/ReactIntroduction\/ReactIntroduction20241008152420-small.png\"],\"uploadDate\":\"2024-10-08T15:26:44Z\",\"duration\":\"PT0H16M6S\",\"contentUrl\":\"https:\/\/www.geeksforgeeks.org\/videos\/react-introduction\/\"}}"); </script> <script type="application/ld+json">{"@context":"https://schema.org","@type":"VideoObject","name":"React Introduction","description":"ReactJS Introduction Comprehensive GuideReactJS is a popular JavaScript library used for building user interfaces, particularly for single-page applications (SPAs). It allows developers to create reusable UI components that manage their own state, making the process of building complex interfaces more efficient and maintainable. React was developed by Facebook and is maintained by both Facebook and a large community of developers.What is ReactJS?ReactJS, often simply called React, is an open-source JavaScript library designed for building dynamic and interactive web applications. It focuses on creating fast and scalable front-end applications by using a component-based architecture.React allows developers to build web applications where data can change dynamically without the need to reload the page. This is achieved through the use of components, which are the building blocks of a React application.Key Features of ReactJSComponent-Based ArchitectureReact applications are made up of multiple components, each responsible for rendering a small, reusable piece of HTML. These components can be nested within each other to build more complex interfaces.Virtual DOMReact uses a Virtual DOM, which is a lightweight copy of the actual DOM. When a components state changes, React updates the virtual DOM first, and then efficiently updates only the parts of the actual DOM that changed. This improves the performance of web applications.JSX (JavaScript XML)React uses JSX, a syntax that allows developers to write HTML within JavaScript. JSX makes it easier to write and visualize the structure of the UI within the same codebase.Unidirectional Data FlowReact follows a unidirectional data flow, meaning data flows from parent to child components through props. This structure makes it easier to manage and debug applications by tracing how data moves through the application.Declarative UIWith React, developers can describe the UI based on the current state of the application. React automatically updates and renders the necessary components when the state changes, which makes it easier to reason about the code.React HooksHooks are functions introduced in React 16.8 that let developers use state and other React features without writing classes. Common hooks include useState, useEffect, and useContext.Benefits of ReactJSReusable ComponentsOne of the core principles of React is its component-based architecture. Components can be reused across different parts of an application, reducing duplication and improving consistency.Improved PerformanceReacts Virtual DOM helps in updating only the components that changed rather than reloading the entire DOM. This results in faster rendering and better performance, especially in large applications.Strong Community SupportReact is maintained by Facebook and has a massive community of developers contributing to its growth. This makes it easy to find resources, tutorials, and libraries that extend Reacts functionality.SEO-FriendlyReact can be rendered on the server using ReactDOMServer, allowing search engines to easily crawl the content of the page, improving SEO.Rich EcosystemReact has a rich ecosystem of tools and libraries, such as React Router for routing and Redux for state management, which makes it highly versatile and extendable.Use Cases of ReactJSSingle Page Applications (SPAs)React is often used for building single-page applications where the content dynamically updates without the need for a full-page reload.Dynamic Web ApplicationsAny web application that needs to handle dynamic data, such as social media platforms, e-commerce websites, or dashboards, can benefit from Reacts efficient rendering system.Mobile ApplicationsWith React Native, developers can build mobile applications for iOS and Android using Reacts architecture and component-based approach.Progressive Web Apps (PWAs)React can be used to build Progressive Web Apps, which offer a native app-like experience with features like offline access and push notifications.Why Learn ReactJS?ReactJS has become one of the most widely used libraries for front-end development due to its flexibility, efficiency, and ease of use. Whether youre building small websites or large-scale enterprise applications, React provides the tools and ecosystem to create maintainable, scalable, and performant web applications. By learning React, developers gain the skills necessary to work on cutting-edge projects and build fast, interactive user interfaces.Topics CoveredKey Features of React Components, Virtual DOM, JSX, and more.Benefits of Using ReactJS Reusability, performance, community support, and SEO benefits.Applications of ReactJS SPAs, dynamic web applications, mobile apps, and PWAs.For more details and further examples, check out the full article on GeeksforGeeks httpswww.geeksforgeeks.orgreactjs-introduction.","thumbnailUrl":["https://media.geeksforgeeks.org/geeksforgeeks/ReactIntroduction/ReactIntroduction20241008152420-seo.png","https://media.geeksforgeeks.org/geeksforgeeks/ReactIntroduction/ReactIntroduction20241008152420.jpg","https://media.geeksforgeeks.org/geeksforgeeks/ReactIntroduction/ReactIntroduction20241008152420-small.png"],"uploadDate":"2024-10-08T15:26:44Z","duration":"PT0H16M6S","contentUrl":"https://www.geeksforgeeks.org/videos/react-introduction/"}</script>   <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "id": "https://www.geeksforgeeks.org/react/" }, "headline": "React Tutorial", "datePublished": "2023-12-27 05:34:11", "dateModified": "2024-10-10 12:34:10", "image": { "@type": "ImageObject", "url": "https://media.geeksforgeeks.org/wp-content/uploads/20240701151251/react-tutorial-copy-2.webp", "width": "1000", "height": "470" }, "author": { "@type": "Organization", "name": "GeeksforGeeks", "url": "https://www.geeksforgeeks.org/", "logo": { "@type": "ImageObject", "url": "https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg", "width": "301", "height": "40" } }, "publisher": { "@type": "Organization", "name": "GeeksforGeeks", "url": "https://www.geeksforgeeks.org/", "logo": { "@type": "ImageObject", "url": "https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg", "width": "301", "height": "40" } }, "description": "React is a JavaScript Library used to build user interfaces. It is developed by Facebook. It simplifies creating dynamic and interactive web apps with the help of component-based architecture, reusability, and efficient rendering with the JSX and virtualDOM.React JS is used to create single-page applications (SPAs). It is known for", "about": [ { "@type": "Thing", "name": "Reactjs" }, { "@type": "Thing", "name": "WebTechnologies" } ] }</script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "url": "https://www.geeksforgeeks.org/", "potentialAction": { "@type": "SearchAction", "target": "https://www.geeksforgeeks.org/search/{search_term_string}/", "query-input": "required name=search_term_string" } }</script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "GeeksforGeeks", "url": "https://www.geeksforgeeks.org/", "logo": "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png", "description": "A computer science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.", "founder": [ { "@type": "Person", "name": "Sandeep Jain", "url": "https://in.linkedin.com/in/sandeep-jain-b3940815" } ], "sameAs": [ "https://www.facebook.com/geeksforgeeks.org/", "https://twitter.com/geeksforgeeks", "https://www.linkedin.com/company/1299009", "https://www.youtube.com/geeksforgeeksvideos/" ] }</script> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "What is React used for?", "acceptedAnswer": { "@type": "Answer", "text": "The primary goal of React is to create a User Interface, Single-Page Application, Progressive Web Application and more." } }, { "@type": "Question", "name": "Which language is used in React?", "acceptedAnswer": { "@type": "Answer", "text": "React used JavaScript programming language." } }, { "@type": "Question", "name": "Is React a front-end language?", "acceptedAnswer": { "@type": "Answer", "text": "React globally used for Front-end JS library and it is popular with both software and project speoncer." } }, { "@type": "Question", "name": "Which is in demand ReactJS or AngulerJS in 2024?", "acceptedAnswer": { "@type": "Answer", "text": "React is far more popular than AngulerJS because ReactJS comes with more libraries, resources and bigger community support." } }, { "@type": "Question", "name": "Which is better NodeJS or ReactJS or AngularJS", "acceptedAnswer": { "@type": "Answer", "text": "Choosing the framework always depends very much on your requirements. All of these three frameworks are quite popular, and users choose them based on what they want to do. But if we do so more specifically, then ReatJS is better." } }, { "@type": "Question", "name": "Is this ReactJS tutorial for beginners or for advanced", "acceptedAnswer": { "@type": "Answer", "text": "As we said at the beginning of this article, this course is for beginners as well as for advanced. " } } ] }</script> <script> var arrPostCat = new Array(); var arrPostCatName="ReactJS"; arrPostCat.push('4821'); arrPostCat.push('2628'); var tIds = "4821,2628"; var termsNames = "ReactJS,WebTechnologies"; var tIdsInclusiveParents = "4821,2628" var domain = 1; var arrPost = new Array(); var post_id = "1107997"; var post_type = "post"; var post_slug = window.location.href; var ip = "64.252.70.53"; var post_title = `React Tutorial`; var post_status = "publish"; var practiceAPIURL="https://practiceapi.geeksforgeeks.org/"; var practiceURL="https://practice.geeksforgeeks.org/"; var post_date = "2023-12-06 12:13:11"; var commentSysUrl = "https://discuss.geeksforgeeks.org/commentEmbedV2.js"; //var postAdApiUrlString = ""; var link_on_code_run = ''; var link_search_modal_top = ''; var country_code_cf = "US"; var postAdApiUrlString = '2628/4821/2628/'; </script>  <meta name="description" content="Learn React, a popular JavaScript library for building user interfaces. Discover the key concepts like reusable component, state, props, hooks, and routing to create interactive and efficient web applications."/> <link rel="canonical" href="https://www.geeksforgeeks.org/react/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="React Tutorial - GeeksforGeeks" /> <meta property="og:description" content="Learn React, a popular JavaScript library for building user interfaces. Discover the key concepts like reusable component, state, props, hooks, and routing to create interactive and efficient web applications." /> <meta property="og:url" content="https://www.geeksforgeeks.org/react/" /> <meta property="og:site_name" content="GeeksforGeeks" /> <meta property="article:section" content="ReactJS" /> <meta property="article:published_time" content="2023-12-27T17:34:11+00:00" /> <meta property="article:modified_time" content="2024-10-10T12:34:05+00:00" /> <meta property="og:updated_time" content="2024-10-10T12:34:05+00:00" /> <meta property="og:image" content="https://media.geeksforgeeks.org/wp-content/uploads/20240118103527/oneway-300x243.jpg" /> <meta property="og:image:secure_url" content="https://media.geeksforgeeks.org/wp-content/uploads/20240118103527/oneway-300x243.jpg" /> <script type='application/ld+json'>{"@context":"https:\/\/schema.org","@type":"Organization","url":"https:\/\/www.geeksforgeeks.org\/","sameAs":[],"@id":"https:\/\/www.geeksforgeeks.org\/#organization","name":"GeeksforGeeks","logo":"http:\/\/www.geeksforgeeks.org\/wp-content\/uploads\/gfg_200X200-1.png"}</script>  <link rel='dns-prefetch' href='//www.geeksforgeeks.org' /> <link rel='dns-prefetch' href='//s.w.org' /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.geeksforgeeks.org\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.8"}}; !function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56760,9792,65039],[55358,56760,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='custom-style-css' href='https://www.geeksforgeeks.org/wp-content/themes/iconic-one/css/gfg.min.css?ver=11.71' type='text/css' media='all' /> <script type='text/javascript' src='https://code.jquery.com/jquery-3.7.1.min.js?ver=3.7.1'></script> <script type='text/javascript' src='https://code.jquery.com/jquery-migrate-3.5.2.min.js?ver=3.5.2'></script> <script type='text/javascript'> /* <![CDATA[ */ var gfgObject = {"authUrl":"https:\/\/auth.geeksforgeeks.org\/","writeApiUrl":"https:\/\/apiwrite.geeksforgeeks.org\/","writeUrl":"https:\/\/write.geeksforgeeks.org\/","utilUrl":"https:\/\/util.geeksforgeeks.org\/","apiUrl":"https:\/\/api.geeksforgeeks.org\/","cfApiUrl":"https:\/\/gfgapi.geeksforgeeks.org\/","baseCompilerURL":"https:\/\/codejudge.geeksforgeeks.org\/","idePageBaseUrl":"https:\/\/ide.geeksforgeeks.org\/","gfgApiScriptUrl":"https:\/\/apiscript.geeksforgeeks.org\/","gfgSiteUrl":"https:\/\/www.geeksforgeeks.org\/","curatedListId":"1","curatedListTitle":"SDE Sheet Problems","utilDjangoCfUrl":"https:\/\/utilapi.geeksforgeeks.org\/","premiumCheckoutSlug":"premium-plans-payment\/","premiumLandingSlug":"premium-plans\/","premiumCssUrl":"https:\/\/www.geeksforgeeks.org\/wp-content\/themes\/iconic-one\/css\/gfgpremium.min.css?ver=1.6","premiumJsUrl":"https:\/\/www.geeksforgeeks.org\/wp-content\/themes\/iconic-one\/js\/gfgpremium.min.js?ver=1.5","utilGoogleUrl":"https:\/\/ugprod.geeksforgeeks.org\/","communityApiUrl":"https:\/\/communityapi.geeksforgeeks.org\/","utilDjangoUrl":"https:\/\/gfgutil.geeksforgeeks.org\/","gfgPracticeUrl":"https:\/\/practiceapi.geeksforgeeks.org\/","gfgMediaUrl":"https:\/\/media.geeksforgeeks.org\/","authDjangoApiUrl":"https:\/\/authapi.geeksforgeeks.org\/","gfgMlApiUrl":"https:\/\/recommendations.geeksforgeeks.org\/","is_home":"","is_category":"","userlevelPremiumPlus":"2","practiceUrl":"https:\/\/practice.geeksforgeeks.org\/","gfgNotificationsApiUrl":"https:\/\/notificationsapi.geeksforgeeks.org\/"}; /* ]]> */ </script> <script type='text/javascript' async="async" src='https://www.geeksforgeeks.org/wp-content/themes/iconic-one/js/gfg.min.js?ver=13.34'></script> <link rel='shortlink' href='https://www.geeksforgeeks.org/?p=1107997' /> <style> #wpadminbar{ background: #ff0000 !important; } </style> <style type="text/css" id="custom-background-css"> body.custom-background { background-color: #ffffff; } </style> <link rel="icon" href="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-100x100.png" sizes="32x32" /> <link rel="icon" href="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" sizes="192x192" /> <link rel="apple-touch-icon-precomposed" href="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" /> <meta name="msapplication-TileImage" content="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" />  <style> #internal-promo-section{ display: none !important; } @media screen and (max-width:1500px) and (min-width:1280px){ body.single .article-page_flex .leftBar { flex-basis: calc(100% - 605px); max-width: calc(100% - 605px); min-width: calc(100% - 605px); } .sidebar_wrapper{ max-width: 300px; min-width: 300px; } div#secondary { min-width: 300px; max-width: 300px; } .widget-area{ padding: 0px; } .article-page_flex .rightBar{ padding: 20px 0px 0px 0px; } .article--viewer_content .a-wrapper .content { padding: 0px 10px 55px 20px; } .oinLeftbar { height: calc(100vh - 350px) !important; } } .autoLeftBar_oin_child{ height: 100% !important; } .autoLeftBar_oin_non_sticky{ height: unset !important; } .sideBar--wrap.newLeftbar > div[id^='GFG_AD_Leftsidebar_']:nth-of-type(1){ padding-top: 20px; } .sideBar--wrap.newLeftbar > div[id^='GFG_AD_Leftsidebar_']{ padding: 5px 0; } @media (max-width:1043px) and (min-width:992px) { .hide-1043992 { display: none!important; } } .mobile-header-list-item{ padding-left:30px; padding-right:10px; margin-top:5px; } .mobile-header-list{ border-bottom: 1px solid rgba(158, 158, 158, 0.3) !important; } .mobile-header-list .dropdown-title{ border-bottom: none !important; font-size: 16px!important; padding: 0px!important; padding-left: 45px!important; font-weight: normal; } .mobile-header-list .upside::after{ transform: rotate(180deg); } </style>    </head> <body class="post-template-default single single-post postid-1107997 single-format-standard custom-background custom-background-white"> <script> // Dark mode script const gfgThemeList = Object.freeze({ LIGHT: "gfgThemeLight", DARK: "gfgThemeDark" }) const getThemeFromCookie = () => { let gfg_def_theme = ""; let cookies = document.cookie; let cooks = cookies.split(";"); for (let i = 0; i < cooks.length; i++) { let icook = cooks[i].split("="); if (icook[0].trim() == "gfg_theme") { gfg_def_theme = icook[1].trim(); } } return gfg_def_theme } if(!(post_slug.includes('premium-plans-payment/') || post_slug.includes('premium-plans/'))){ var isDarkMode = getThemeFromCookie() == gfgThemeList.DARK ? true : false; document.querySelector("body").setAttribute("data-dark-mode", isDarkMode); } function setSearchBarFocus() { const myTimeout = setTimeout(searchBarFocus, 0); function searchBarFocus() { document.getElementById("gcse-search-input").focus(); } } </script>  <nav> <div class="header-main__wrapper"> <a class="gfg-stc" style="top:0" href="#main">Skip to content</a> <a href="https://www.geeksforgeeks.org/" aria-label="Logo" class="header-main__logo"> <div class="_logo">  <img class="gfg_logo_img" style="height: 30px; width: 80px; max-width: fit-content;" src="https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="geeksforgeeks"> </div> </a> <div class="header-main__container">   <ul class="header-main__list"><li class="header-main__list-item Header_1" data-parent="false" aria-expanded="true" data-expandable="true"><span>Courses</span><i class="gfg-icon gfg-icon_arrow-down gfg-icon_header"></i><ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/dsa-to-development-coding-guide?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">DSA to Development</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/data-science-live?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Machine Learning & Data Science</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/mastering-generative-ai-and-chat-gpt?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Generative AI & ChatGPT</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/search?query=AWS&itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Become AWS Certified</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>DSA Courses</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/dsa-self-paced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Data Structure & Algorithm(C++/JAVA)</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/Data-Structures-With-Python?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Data Structure & Algorithm(Python)</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/data-structures-and-algorithms-in-javascript?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Data Structure & Algorithm(JavaScript)</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Programming Languages</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/cpp-programming-basic-to-advanced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">CPP</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/Java-Programming-basic-to-advanced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Java</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/Python-Foundation?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/javascript?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">JavaScript</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/c-Programming-basic-to-advanced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">C</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">All Courses</a></li></ul></li><li class="header-main__list-item Header_2" data-parent="false" aria-expanded="true" data-expandable="true"><span>Tutorials</span><i class="gfg-icon gfg-icon_arrow-down gfg-icon_header"></i><ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Python Tutorial</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/taking-input-in-python/?ref=outind" target="_self">Taking Input in Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-operators/?ref=outind" target="_self">Python Operators</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-data-types/?ref=outind" target="_self">Python Data Types</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Python Loops and Control Flow</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python3-if-if-else-nested-if-if-elif-statements/?ref=outind" target="_self">Python Conditional Statements</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/loops-in-python/?ref=outind" target="_self">Python Loops</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-functions/?ref=outind" target="_self">Python Functions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-oops-concepts/?ref=outind" target="_self">Python OOPS Concept</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-data-structures-and-algorithms/?ref=outind" target="_self">Python Data Structures</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-exception-handling/?ref=outind" target="_self">Python Exception Handling</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/file-handling-python/?ref=outind" target="_self">Python File Handling</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-exercises-practice-questions-and-solutions/?ref=outind" target="_self">Python Exercises</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Java</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java/?ref=outind" target="_self">Learn Java Programming Language</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/collections-in-java-2/?ref=outind" target="_self">Java Collections</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-8-features/?ref=outind" target="_self">Java 8 Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-programming-examples/?ref=outind" target="_self">Java Programs</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Java Interview Questions</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-interview-questions/?ref=outind" target="_self">Java Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/core-java-interview-questions-for-freshers/?ref=outind" target="_self">Core Java Interview Questions-Freshers</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-20-java-multithreading-interview-questions-answers/?ref=outind" target="_self">Java Multithreading Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/oops-interview-questions/?ref=outind" target="_self">OOPs Interview Questions and Answers</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-exercises/?ref=outind" target="_self">Java Exercises</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Java Quiz</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/quizzes/50-java-language-mcqs-with-answers-2/?ref=outind" target="_self">Java Quiz</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-multiple-choice-questions/?ref=outind" target="_self">Core Java MCQ</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-projects/?ref=outind" target="_self">Java Projects</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Advance Java</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/spring/?ref=outind" target="_self">Spring Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/spring-boot/?ref=outind" target="_self">Spring Boot Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/spring-boot-interview-questions/?ref=outind" target="_self">Spring Boot Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/spring-mvc/?ref=outind" target="_self">Spring MVC Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/spring-mvc-interview-questions/?ref=outind" target="_self">Spring MVC Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/hibernate-tutorial/?ref=outind" target="_self">Hibernate Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/hibernate-interview-questions/?ref=outind" target="_self">Hibernate Interview Questions</a></li></ul></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Programming Languages</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/javascript/?ref=outind" target="_self">JavaScript</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/c-plus-plus/?ref=outind" target="_self">C++</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/r-tutorial/?ref=outind" target="_self">R Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sql-tutorial/?ref=outind" target="_self">SQL</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/php-tutorial/?ref=outind" target="_self">PHP</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/csharp-programming-language/?ref=outind" target="_self">C#</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/c-programming-language/?ref=outind" target="_self">C</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/scala-programming-language/?ref=outind" target="_self">Scala</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/perl-programming-language/?ref=outind" target="_self">Perl</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/golang/?ref=outind" target="_self">Go Language</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/kotlin-programming-language/?ref=outind" target="_self">Kotlin</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>System Design</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/system-design-tutorial/?ref=ghm" target="_self">System Design Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-design-patterns/?ref=outind" target="_self">Software Design Patterns</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/complete-roadmap-to-learn-system-design/?ref=outind" target="_self">System Design Roadmap</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-10-system-design-interview-questions-and-answers/?ref=outind" target="_self">Top 10 System Design Interview Questions and Answers</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Interview Corner</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/company-preparation/?ref=outind" target="_self">Company Preparation</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/interview-preparation-for-software-developer/?ref=outind" target="_self">Top Topics</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://practice.geeksforgeeks.org/company-tags/?ref=outind" target="_self">Practice Company Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/company-interview-corner/?ref=outind" target="_self">Interview Experiences</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/experienced-interview-experiences-company-wise/?ref=outind" target="_self">Experienced Interviews</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/internship-interview-experiences-company-wise/?ref=outind" target="_self">Internship Interviews</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=outind" target="_self">Competitive Programming</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/quiz-corner-gq/?ref=outind" target="_self">Multiple Choice Quizzes</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/aptitude-questions-and-answers/?ref=outind" target="_self">Aptitude for Placements</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Computer Science Subjects</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/operating-systems/?ref=outind" target="_self">Operating System</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/dbms/?ref=outind" target="_self">DBMS</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/computer-network-tutorials/?ref=outind" target="_self">Computer Networks</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/engineering-mathematics-tutorials/?ref=outind" target="_self">Engineering Mathematics</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/computer-organization-and-architecture-tutorials/?ref=outind" target="_self">Computer Organization and Architecture</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/theory-of-computation-automata-tutorials/?ref=outind" target="_self">Theory of Computation</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/compiler-design-tutorials/?ref=outind" target="_self">Compiler Design</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/digital-electronics-logic-design-tutorials/#blg/?ref=outind" target="_self">Digital Logic</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-engineering/?ref=outind" target="_self">Software Engineering</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>DevOps</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/git-tutorial/?ref=outind" target="_self">GIT</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/aws-tutorial/?ref=outind" target="_self">AWS</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/docker-tutorial/?ref=outind" target="_self">Docker</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/kubernetes-tutorial/?ref=outind" target="_self">Kubernetes</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/microsoft-azure/?ref=outind" target="_self">Microsoft Azure Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/google-cloud-platform-tutorial/?ref=outind" target="_self">Google Cloud Platform</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Linux</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-tutorial/?ref=outind" target="_self">Linux Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-commands/?ref=outind" target="_self">Linux Commands A-Z</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-commands-cheat-sheet/?ref=outind" target="_self">Linux Commands Cheatsheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/permissions-in-linux/?ref=outind" target="_self">File Permission Commands</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/beginners-guide-to-linux-system-administration/?ref=outind" target="_self">Linux System Administration</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-file-system/?ref=outind" target="_self">Linux File System</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-linux-shell-shell-scripting/?ref=outind" target="_self">Linux Shell Scripting</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/network-configuration-trouble-shooting-commands-linux/?ref=outind" target="_self">Linux Networking</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-interview-questions/?ref=outind" target="_self">Linux Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Software Testing</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-testing-tutorial/?ref=outind" target="_self">Software Testing Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-engineering/?ref=outind" target="_self">Software Engineering Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-testing-interview-questions/?ref=outind" target="_self">Testing Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/jira-tutorial/?ref=outind" target="_self">Jira</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Databases</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/dbms/?ref=outind" target="_self">DBMS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sql-tutorial/?ref=outind" target="_self">SQL Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/postgresql-tutorial/?ref=outind" target="_self">PostgreSQL Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mongodb-tutorial/?ref=outind" target="_self">MongoDB Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sql-interview-questions/?ref=outind" target="_self">SQL Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mysql-interview-questions/?ref=outind" target="_self">MySQL Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/pl-sql-interview-questions/?ref=outind" target="_self">PL/SQL Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Android</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/android-tutorial/?ref=outind" target="_self">Android Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/android-studio-tutorial/?ref=outind" target="_self">Android Studio Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/kotlin-android-tutorial/?ref=outind" target="_self">Kotlin For Android</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/android-projects-from-basic-to-advanced-level/?ref=outind" target="_self">Android Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-50-android-interview-questions-answers-sde-i-to-sde-iii/?ref=outind" target="_self">Android Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/6-weeks-of-android-app-development-free-project-based-learning/?ref=outind" target="_self">6 Weeks of Android App Development</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Excel</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/excel-tutorial/?ref=outind" target="_self">MS Excel Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-ms-excel/?ref=outind" target="_self">Introduction to MS Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-analysis-in-excel/?ref=outind" target="_self">Data Analysis in Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/basic-excel-formulas-and-functions/?ref=outind" target="_self">Basic Excel Formulas & Functions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/instant-data-analysis-in-advanced-excel/?ref=outind" target="_self">Data Analysis in Advanced Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/workbooks-in-microsoft-excel/?ref=outind" target="_self">Workbooks</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/statistical-functions-in-excel-with-examples/?ref=outind" target="_self">Statistical Functions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-visualization-in-excel/?ref=outind" target="_self">Data Visualization in Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/pivot-tables-in-excel/?ref=outind" target="_self">Pivot Tables in Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/working-with-excel-spreadsheets-in-python/?ref=outind" target="_self">Excel Spreadsheets in Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/basic-excel-shortcuts/?ref=outind" target="_self">Basic Excel Shortcuts</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Mathematics</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/number-theory/?ref=outind" target="_self">Number System</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/algebra/?ref=outind" target="_self">Algebra</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linear-algebra/?ref=outind" target="_self">Linear Algebra</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/math-trigonometry/?ref=outind" target="_self">Trigonometry</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/set-theory/?ref=outind" target="_self">Set Theory</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/statistics/?ref=outind" target="_self">Statistics</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/probability-in-maths/?ref=outind" target="_self">Probability</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/geometry/?ref=outind" target="_self">Geometry</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mensuration/?ref=outind" target="_self">Mensuration</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/logarithms/?ref=outind" target="_self">Logarithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/math-calculus/?ref=outind" target="_self">Calculus</a></li></ul></li></ul></li><li class="header-main__list-item Header_3" data-parent="false" aria-expanded="true" data-expandable="true"><span>DSA</span><i class="gfg-icon gfg-icon_arrow-down gfg-icon_header"></i><ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Data Structures</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/array-data-structure-guide/?ref=outind" target="_self">Arrays</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/matrix/?ref=outind" target="_self">Matrix</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/string-data-structure/?ref=outind" target="_self">Strings</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-linked-list-data-structure/?ref=ghm" target="_self">Linked List</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/stack-data-structure/?ref=outind" target="_self">Stack</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/queue-data-structure/?ref=outind" target="_self">Queue</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-tree-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Tree</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/heap-data-structure/?ref=outind" target="_self">Heap</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/hashing-data-structure/?ref=outind" target="_self">Hashing</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/graph-data-structure-and-algorithms/?ref=outind" target="_self">Graph</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-set-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Set Data Structure</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-map-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Map Data Structure</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/advanced-data-structures/?ref=outind" target="_self">Advanced Data Structure</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-data-structures/?ref=outind" target="_self">Data Structures Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Algorithms</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Analysis of Algorithms</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/design-and-analysis-of-algorithms/?ref=outind" target="_self">Design and Analysis of Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/asymptotic-notation-and-analysis-based-on-input-size-of-algorithms/?ref=outind" target="_self">Asymptotic Analysis</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/types-of-asymptotic-notations-in-complexity-analysis-of-algorithms/?ref=outind" target="_self">Asymptotic Notations</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/worst-average-and-best-case-analysis-of-algorithms/?ref=outind" target="_self">Worst, Average and Best Cases</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Searching Algorithms</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linear-search/?ref=outind" target="_self">Linear Search</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/binary-search/?ref=outind" target="_self">Binary Search</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/searching-algorithms/?ref=outind" target="_self">Searching Algorithms Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Sorting Algorithms</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/selection-sort/?ref=outind" target="_self">Selection Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bubble-sort/?ref=outind" target="_self">Bubble Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/insertion-sort/?ref=outind" target="_self">Insertion Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/merge-sort/?ref=outind" target="_self">Merge Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/quick-sort/?ref=outind" target="_self">Quick Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/heap-sort/?ref=outind" target="_self">Heap Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/counting-sort/?ref=outind" target="_self">Counting Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/radix-sort/?ref=outind" target="_self">Radix Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bucket-sort-2/?ref=outind" target="_self">Bucket Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-sorting-algorithm/?ref=outind" target="_self">Sorting Algorithms Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-greedy-algorithm-data-structures-and-algorithm-tutorials/?ref=outind" target="_self">Greedy Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-dynamic-programming-data-structures-and-algorithm-tutorials/?ref=outind" target="_self">Dynamic Programming</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-graphs-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Graph Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-pattern-searching-data-structure-and-algorithm-tutorial/?ref=outind" target="_self">Pattern Searching</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-recursion-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Recursion</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-backtracking-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Backtracking</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-divide-and-conquer-algorithm-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Divide and Conquer</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mathematical-algorithms/?ref=outind" target="_self">Mathematical Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/geometric-algorithms/?ref=outind" target="_self">Geometric Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-bitwise-algorithms-data-structures-and-algorithms-tutorial/?ref=outind" target="_self">Bitwise Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/randomized-algorithms/?ref=outind" target="_self">Randomized Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-branch-and-bound-data-structures-and-algorithms-tutorial/?ref=outind" target="_self">Branch and Bound</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-algorithms/?ref=outind" target="_self">Algorithms Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/learn-data-structures-and-algorithms-dsa-tutorial/?ref=outind" target="_self">DSA Tutorial</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Practice</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">All DSA Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/problem-of-the-day?itm_source=geeksforgeeksitm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Problem of the Day</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Company Wise Coding Practice</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&company=Amazon&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Amazon</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&company=Microsoft&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Microsoft</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&company=Flipkart&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Flipkart</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Explore All</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&curated[]=1&sortBy=submissions&curated_names[]=SDE Sheet?itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">GfG SDE Sheet</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Practice Problems Difficulty Wise</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=School&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">School</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Basic&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Basic</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Easy&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Easy</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Medium&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Medium</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Hard&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Hard</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Language Wise Coding Practice</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&category=CPP&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">CPP</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&category=Java&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Java</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?category=python&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Python</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Curated DSA Lists</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=ca8ae412173dbd8346c26a0295d098fd&sortBy=submissions&sprint_name=Beginner's DSA Sheet&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Beginner's DSA Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=50746f92a895c22a50504ac0c1fb9c84&sortBy=submissions&sprint_name=Top 50 Array Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 Array Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=57184072610b884e5df3584cc534115d&sortBy=submissions&sprint_name=Top 50 String Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 String Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=93d672753b74440c7427214c8ebf866d&sortBy=submissions&sprint_name=Top 50 DP Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 DP Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=405e9db0f353691ad3b2d546b19145e9&sortBy=submissions&sprint_name=Top 50 Graph Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 Graph Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=5f24de84b65bf7c4f4399c8111e26b81&sortBy=submissions&sprint_name=Top 50 Tree Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 Tree Problems</a></li></ul></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=outind" target="_self">Competitive Programming</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Company Wise SDE Sheets</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/facebookmeta-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Facebook SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/amazon-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Amazon SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/apple-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Apple SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/netflix-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Netflix SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/google-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Google SDE Sheet</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>DSA Cheat Sheets</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sde-sheet-a-complete-guide-for-sde-preparation/?ref=outind" target="_self">SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/most-asked-dsa-interview-problems-for-beginners/?ref=outind" target="_self">DSA Sheet for Beginners</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/must-do-coding-questions-for-companies-like-amazon-microsoft-adobe/?ref=outind" target="_self">FAANG Coding Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/must-do-coding-questions-for-product-based-companies/?ref=outind" target="_self">Product-Based Coding Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/must-coding-questions-company-wise/?ref=outind" target="_self">Company-Wise Preparation Sheet</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-100-data-structure-and-algorithms-dsa-interview-questions-topic-wise/?ref=outind" target="_self">Top Interview Questions</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Puzzles</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/puzzles/?ref=outind" target="_self">All Puzzles</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-100-puzzles-asked-in-interviews/?ref=outind" target="_self">Top 100 Puzzles Asked In Interviews</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-20-puzzles-commonly-asked-during-sde-interviews/?ref=outind" target="_self">Top 20 Puzzles Commonly Asked During SDE Interviews</a></li></ul></li></ul></li><li class="header-main__list-item Header_4" data-parent="false" aria-expanded="true" data-expandable="true"><span>Data Science</span><i class="gfg-icon gfg-icon_arrow-down gfg-icon_header"></i><ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-programming-language/?ref=outind" target="_self">Python Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/r-tutorial/?ref=outind" target="_self">R Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/machine-learning/?ref=outind" target="_self">Machine Learning</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-science-with-python-tutorial/?ref=outind" target="_self">Data Science using Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/r-programming-for-data-science/?ref=outind" target="_self">Data Science using R</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Data Science Packages</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/pandas-tutorial/?ref=outind" target="_self">Pandas Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/numpy-tutorial/?ref=outind" target="_self">NumPy Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Data Visualization</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-data-visualization-tutorial/?ref=outind" target="_self">Python Data Visualization Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-visualization-in-r/?ref=outind" target="_self">Data Visualization with R</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Data Analysis</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-analysis-with-python/?ref=outind" target="_self">Data Analysis with Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-analysis-using-r/?ref=outind" target="_self">Data Analysis with R</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/deep-learning-tutorial/?ref=outind" target="_self">Deep Learning</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/natural-language-processing-nlp-tutorial/?ref=outind" target="_self">NLP Tutorial</a></li></ul></li><li class="header-main__list-item Header_5" data-parent="false" aria-expanded="true" data-expandable="true"><span>Web Tech</span><i class="gfg-icon gfg-icon_arrow-down gfg-icon_header"></i><ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/html-tutorial/?ref=outind" target="_self">HTML Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/css-tutorial/?ref=outind" target="_self">CSS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/javascript/?ref=outind" target="_self">JavaScript Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/php-tutorial/?ref=outind" target="_self">PHP Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/react-tutorial/?ref=outind" target="_self">ReactJS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/nodejs/?ref=outind" target="_self">NodeJS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bootstrap/?ref=outind" target="_self">Bootstrap Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/typescript/?ref=outind" target="_self">Typescript</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Web Development Using Python</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Django</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/django-tutorial/?ref=outind" target="_self">Django Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-django-projects-for-beginners/?ref=outind" target="_self">Django Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/django-interview-questions/?ref=outind" target="_self">Django Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Flask</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/flask-tutorial/?ref=outind" target="_self">Flask Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/flask-projects/?ref=outind" target="_self">Flask Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/flask-interview-questions-and-answers/?ref=outind" target="_self">Flask Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/postman-tutorial/?ref=outind" target="_self">Postman</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-github/?ref=outind" target="_self">Github</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Cheat Sheets</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/html-cheat-sheet-a-basic-guide-to-html/?ref=outind" target="_self">HTML Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/css-cheat-sheet-a-basic-guide-to-css/?ref=outind" target="_self">CSS Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/javascript-cheat-sheet-a-basic-guide-to-javascript/?ref=outind" target="_self">JavaScript Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/react-cheat-sheet/?ref=outind" target="_self">React Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/angular-cheat-sheet-a-basic-guide-to-angular/?ref=outind" target="_self">Angular Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/jquery-cheat-sheet-a-basic-guide-to-jquery/?ref=outind" target="_self">jQuery Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bootstrap-cheatsheet-a-basic-guide-to-bootstrap/?ref=outind" target="_self">Bootstrap Cheat Sheet</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/web-development/?ref=outind" target="_self">Learn Complete Web Development</a></li></ul></li></ul>  <ul class="header-main__left-list" data-nl="false"> <li class="header-main__left-list-item gcse-search_li p-relative" aria-expanded="false" data-expandable="false"> <div class="gcse-form-search-suggestion_wrapper"> <form id="gcse-form" class="gcse-form_class p-relative closeChatScreen" data-sm="false"> <span class="front-search-icon"><i class="gfg-icon gfg-icon_search gfg-icon_white gcse-search__icon gcse-search-icon_grey"></i> </span> <input class="gcse-search-input__wrapper" id="gcse-search-input" aria-expanded="false" placeholder="Search..." autocomplete="off" /> <i class="gfg-icon gfg-icon_times gfg-icon_white hide-search"></i> <button aria-label="search" type="submit" class="gcse-search__btn not-expanded"> <i class="gfg-icon gfg-icon_search gfg-icon_white gcse-search__icon"></i> </button> </form> <div class="gfg-search-suggestion_wrapper" style="display:none"></div> <div> </li> <li> <div class="darkMode-wrap" data-mode="Switch to Dark Mode"> <button aria-label="toggle theme" data-gfg-action="toggleGFGTheme"> <div id="darkMode-wrap-red-dot" style="height:12px;width:12px;background-color:#EB2222;border-radius:999999px;position:absolute;top:4px;right:0;display:none;"></div> <i class="gfg-icon gfg-icon_dark-mode"></i> </button> <span id="darkModeTooltipText"></span> </div> </li> <li class="header-main__left-list-item google-translate-parent-element" aria-expanded="false" data-expanded="true"> <div class="translate" id="g_translater"> <div id="google_translate_element" data-show="false"></div> </div> <i class ="gfg-icon gfg-icon_translate googleTranslateToggle" data-gfg-action="google_translate_element"></i>   </li> <li id="userProfileId" class="header-main__left-list-item p-relative" aria-expanded="false" data-expandable="false">  </li> </ul> </div>   </div> </nav> <div class="header-main__slider"> <button aria-label="sub header slider previous" class="header-main__slider-arrow previous hideIt"> <i class="gfg-icon gfg-icon_arrow-left gicon-centered"></i> </button>  <ul id="hslider"> <li><a href="https://www.geeksforgeeks.org/react-tutorial/?ref=shm">React Tutorial</a></li><li><a href="https://www.geeksforgeeks.org/practice-react-online/?ref=shm">React Exercise</a></li><li><a href="https://www.geeksforgeeks.org/reactjs-basics-concepts-complete-reference/?ref=shm">React Basic Concepts</a></li><li><a href="https://www.geeksforgeeks.org/reactjs-components-complete-reference/?ref=shm">React Components</a></li><li><a href="https://www.geeksforgeeks.org/reactjs-props-complete-reference/?ref=shm">React Props</a></li><li><a href="https://www.geeksforgeeks.org/reactjs-hooks-complete-reference/?ref=shm">React Hooks</a></li><li><a href="https://www.geeksforgeeks.org/reactjs-router/?ref=shm">React Router</a></li><li><a href="https://www.geeksforgeeks.org/reactjs-advanced-guides-complete-reference/?ref=shm">React Advanced</a></li><li><a href="https://www.geeksforgeeks.org/reactjs-examples/?ref=shm">React Examples</a></li><li><a href="https://www.geeksforgeeks.org/reactjs-interview-questions-and-answers/?ref=shm">React Interview Questions</a></li><li><a href="https://www.geeksforgeeks.org/reactjs-projects/?ref=shm">React Projects</a></li><li><a href="https://www.geeksforgeeks.org/nextjs/?ref=shm">Next.js Tutorial</a></li><li><a href="https://www.geeksforgeeks.org/react-bootstrap/?ref=shm">React Bootstrap</a></li><li><a href="https://www.geeksforgeeks.org/react-material-ui/?ref=shm">React Material UI</a></li><li><a href="https://www.geeksforgeeks.org/ant-design/?ref=shm">React Ant Design</a></li><li><a href="https://www.geeksforgeeks.org/react-desktop/?ref=shm">React Desktop</a></li><li><a href="https://www.geeksforgeeks.org/react-rebass/?ref=shm">React Rebass</a></li><li><a href="https://www.geeksforgeeks.org/blueprintjs/?ref=shm">React Blueprint</a></li><li><a href="https://www.geeksforgeeks.org/javascript/?ref=shm">JavaScript</a></li><li><a href="https://www.geeksforgeeks.org/web-technology/?ref=shm">Web Technology</a></li> </ul> <button aria-label="sub header slider next" class="header-main__slider-arrow next hideIt"> <i class="gfg-icon gfg-icon_arrow-right gicon-centered"></i> </button> </div> <button id="scrollTopBtn" title="Scroll to Top" type="button" class="btn btn-success">▲</button>  <div id="main" class="wrapper single-page"> <script> if(post_slug.includes('premium-plans-payment/') || post_slug.includes('premium-plans/')){ $(".header-main__slider").remove(); } //getting tags for the page type data let mobileView = false; let pageTags = JSON.parse('null'); let allTags = JSON.parse('["ReactJS","WebTechnologies"]'); </script> <script> window.have_dsa_term = false; // var practiceTab = ; </script> <style> .wrapper { flex-direction: column !important; } /* spinner css */ @keyframes spinner { to {transform: rotate(360deg);} } .spinner:before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #000; animation: spinner .6s linear infinite; } .report-loader{ position: relative; } .report-loader.spinner{ margin-left: 16px; } .badges{ display: flex; align-items: center; position: relative; } .badges .gfg-badge-icon.md::after{ transform: scale(0.25); position:relative; top: 2px; left: -2px; } .sep{ margin: 0px 5px; font-size: 20px; color: var(--badge-name-color); } .pub-count{ font-size: 14px; font-family: var(--font-secondary); } .badge-details{ display:none; } .badges{ cursor: pointer; position: relative; /* width: 0px; height: 20px; top: -32px; */ } .badge-icon{ display: flex; align-items: center; } .badge-content{ margin-left: 9px; } .badge-name{ color: var(--badge-nam-color); font-weight: 600; font-size: 16px; text-transform: capitalize; } .badge-data{ color: #A5A4A4; font-size: 10px; } .badges:hover .badge-details{ display: block; background: var(--badge-bg); padding: 10px 18px 10px 18px; position: absolute; width: 175px; top: -10px; z-index: 10; left: 112%; box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px; border-radius: 5px; /* transform-origin: top right; */ } .badge-details::before { content: ""; position: absolute; transform: rotate(90deg); /* transform-origin: right; */ left: -6px; top: 50%; margin-left: -17px; border-width: 12px; border-style: solid; border-color: var(--badge-bg) transparent transparent transparent; margin-top: -12px; } .badge-icon .icon{ border: 1px solid var(--icon-border-color); padding: 4px 3px; border-radius: 4px; width: 22px; height: 24px; position: relative; } .b-icon-pos{ position: relative; top: -34px; left: -34px; } /* article viewer */ .article--viewer .a-wrapper{ margin-top: 0px !important; } .content{ padding-top: 10px !important; } .u-name{ font-size: 14px; } .article--viewer_content .a-wrapper .content{ padding-bottom: 10px !important; } .likeTooltipBottom{ font-size: 14px; } @media (max-width: 434px) { .article-buttons.show-bg{ margin-top: 56px !important; } } @media (max-width: 730px), ((min-width: 992px) and (max-width:1100px)) { .article--viewer .media{ position: relative; } .article--viewer .media{ margin-bottom: 0px !important; } .badges:hover .badge-details{ top: -56px; left: 62px; } .badge-details::before{ transform: rotate(0deg); left: 10%; top: 117%; } .article-buttons.show-bg{ margin-top: 22px; top: 0px !important; } } @media ((min-width:731px) and (max-width:1223px)) { .article-buttons.show-bg{ top: 18px; } } @media ((min-width:993px) and (max-width:1190px)) { .article--viewer .media{ position: relative; } .article--viewer .media{ margin-bottom: 25px !important; } } </style>  <script> function getCookie(name) { function escape(s) { return s.replace(/([.*+?\^$(){}|\[\]\/\\])/g, '\\$1'); } var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)')); return match ? match[1] : null; } </script>    <div id='openInApp-modal' class='openInApp'> <a href = 'https://geeksforgeeksapp.page.link/?link=https://www.geeksforgeeks.org/react/?type%3Darticle%26id%3D1107997&apn=free.programming.programming&isi=1641848816&ibi=org.geeksforgeeks.GeeksforGeeksDev&efr=1' class='openInAppLink'> <span style='color: #fff;'>Open In App</span> </a> </div> <script> var consentValue = localStorage.getItem("gfg_cc"); var isIOS = !!navigator.platform && /iPad|iPhone|iPod|MacIntel/.test(navigator.platform) && navigator.maxTouchPoints > 0; const isSafari = navigator.userAgent.indexOf("Safari") > -1; const isMozilla = navigator.userAgent.indexOf("Mozilla") > -1; if(consentValue){ if(window.innerHeight > window.innerWidth && navigator.maxTouchPoints > 1 && (isSafari || isMozilla || navigator.userAgentData.mobile)){ $('.openInApp').css({ display: "block" }); $('#scrollTopBtn').css({ bottom: "44px" }); //adding a new class to check stats for clicks on iOS and Android isIOS ? jQuery('.openInAppLink').addClass("oia-iOS") : $('.openInAppLink').addClass("oia-android"); //for openInApp Link } } </script> <style> .openInApp{ display: none; bottom: 0px; width: 100%; position: fixed; z-index: 1025; opacity: 0.93; } .openInAppLink{ height: 44px; background: var(--color-gfg); font-weight: bold; display: block; text-align: center; padding: 12px; font-size: large; } .openInAppLink, .openInAppLink:hover, .openInAppLink:active, .openInAppLink:visited, .openInAppLink:focus { text-decoration:none; } </style>  <script> companyTagsArray = JSON.parse('[]'); categoryTagsArray = JSON.parse('[]'); </script> <div class="container-fluid bg-light" id="home-page" style="position: relative; max-width:100%;"> <div class="article-page_flex"> <div class="sidebar_wrapper manual_leftbar "> <div class="sideBar " style="height: unset !important">  <div class="sideBar--wrap newLeftbar "> <div id="GFG_AD_Leftsidebar_300x250_chained_1"></div> <div id="GFG_AD_Leftsidebar_300x250_chained_2"></div> <div id="GFG_AD_Leftsidebar_300x250_chained_3"></div> <div id="GFG_AD_Leftsidebar_300x600_chained_1"></div> </div> </div> <div id="GFG_AD_Desktop_LeftSideBar_Docked_160x600" style="max-width:160px; max-height:600px"></div> </div> <div class="leftBar"> <div class="article--viewer"> <div class="article--viewer_content"> <div class="a-wrapper"> <div class="" style="z-index:9999 !important;position:relative;"> </div> <article class="content post-1107997 post type-post status-publish format-standard hentry category-reactjs category-web-technologies" id="post-1107997">  <div class="main_wrapper" style="display:flex;"> <div style="width: 100%;"> <div class="article-title"> <h1>React Tutorial</h1> </div> <div class="last_updated_parent"> <div> <span class="strong">Last Updated : </span> <span>10 Oct, 2024</span> </div>  <div class="three_dot_dropdown"> <div style="display: flex;"> <div pid="1107997" ptitle="React Tutorial" class="top-summary-icon-div "> <div class="three_dot_dropdown_div tooltip"> <span class="summary_tooltiptext">Summarize</span> <div class="summarize_header"> <i class= "summary_button" style="position: relative;"></i> </div> </div> </div> <div pid="1107997" ptitle="React Tutorial" class="article--viewer_comment tooltip top-comment-icon-div"> <span class="comment_tooltiptext">Comments</span> <div class="three_dot_dropdown_div" data-gfg-action='loadComments'> <div class="comment_header"> <i class= "discussion_button" style="position: relative; transform: scale(0.9);"></i> </div> </div> </div> <div pid="1107997" ptitle="React Tutorial" class="article--viewer_improve tooltip"> <span class="improve_tooltiptext">Improve</span> <div class="three_dot_dropdown_div three_dot_dropdown_improve" onclick="improveArticleCall()"> <div class="improve_wrapper_top"> <i class="gfg-icon gfg-icon-pencil gfg-icon_edit" style="position: relative; z-index: 3;"></i> </div> </div>  </div>  <ul class="dropbtn icons btn-right showLeft" onclick="showDropdown()"> <li> </li> <li></li> <li></li> </ul> </div> </div> </div> </div> </div>  <div id="myDropdown" class="three_dot_dropdown_content"> <div class="article-buttons drop" onmouseleave="closeKebabMenu()">  <div pid="1107997" ptitle="React Tutorial" class="improve_article--viewer tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_improve" onclick="suggestionArticleCall()" style="margin-top: 1px;"> <div class="three_dot_dropdown_inner_div improve_dot_dropdown_inner_div"> <i class="gfg-icon gfg-icon_suggest_changes gfg-icon_edit"></i> <span>Suggest changes</span> </div> </div> </div> <div pid="1107997" class="article--viewer_like tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_likearticle" onmouseleave='toggleLikeElementVisibility("showLikesContainer", false)' onmouseenter='toggleLikeElementVisibility("showLikesContainer", true)'> <div class="showLikesContainer"> <span class="likeTooltip">Like Article</span> </div> <div class="three_dot_dropdown_inner_div" data-gfg-action="like-article" data-bookmark-value="0"> <i class="gfg-icon gfg-icon_thumbs"></i> <span>Like</span> </div> </div>  </div> <div pid="1107997" class="article--viewer_bookmark tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_save"> <div class="three_dot_dropdown_inner_div" data-gfg-action="bookmark-article" data-bookmark-value="0"> <i class="gfg-icon gfg-icon_bookmark"></i> <span>Save</span> </div> </div>  </div> <div pid="1107997" class="article--viewer_share tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_share" onmouseleave="closeShareModal()" onmouseenter="openShareModal()"> <div style="display: flex;align-items: center;" class="three_dot_dropdown_inner_div" data-gfg-action="share-article" data-bookmark-value="0"> <i class="gfg-share-icon"></i> <span>Share</span> </div> </div> </div> <div class="article--viewer_report tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_reportarticle"> <div class="three_dot_dropdown_inner_div" data-gfg-action="report-article" onclick="report_article();"> <i class="gfg-icon gfg-icon_report"></i> <span>Report</span> </div> </div>  </div> <div class="article--viewer_Gnews tooltip"> <a class="three_dot_dropdown_inner_div Gnews_wrapper" href ='https://news.google.com/publications/CAAqBwgKMLTrzwsw44bnAw?hl=en-IN&gl=IN&ceid=IN%3Aen' target="_blank"> <img class="gfg-icon_Gnews no-zoom-in-cursor" src=https://media.geeksforgeeks.org/auth-dashboard-uploads/Google-news.svg loading="lazy" alt="News"></img> <span class='kebab_menu_news_text'>Follow</span> </a> </div> </div> </div> <div class="text"> <p dir="ltr"><b><strong>React is a JavaScript Library used to build user interfaces. </strong></b><span>It is developed by Facebook. It simplifies creating dynamic and interactive web apps with the help of component-based architecture, reusability, and efficient rendering with the </span><b><strong>JSX </strong></b><span>and </span><b><strong>virtualDOM</strong></b><span>.</span></p><p dir="ltr"><b><strong>React JS is used to create single-page applications (SPAs). It </strong></b><span>is known for its </span><b><strong>component-based architecture </strong></b><span>which allows you to create reusable UI components, making complex web applications easier to manage and maintain.</span></p><figure class="image"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20240701151251/react-tutorial-copy-2.webp" alt="react-tutorial" width="1000" height="470" srcset="https://media.geeksforgeeks.org/wp-content/uploads/20240701151251/react-tutorial-copy-2.webp 1000w,https://media.geeksforgeeks.org/wp-content/uploads/20240701151251/react-tutorial-copy-2-100.webp 100w,https://media.geeksforgeeks.org/wp-content/uploads/20240701151251/react-tutorial-copy-2-200.webp 200w,https://media.geeksforgeeks.org/wp-content/uploads/20240701151251/react-tutorial-copy-2-300.webp 300w,https://media.geeksforgeeks.org/wp-content/uploads/20240701151251/react-tutorial-copy-2-660.webp 660w,https://media.geeksforgeeks.org/wp-content/uploads/20240701151251/react-tutorial-copy-2-768.webp 768w"><figcaption>React Tutorial</figcaption></figure><p dir="ltr"><span>In this </span><b><strong>React tutorial</strong></b><span>, you'll learn all the basic to advanced concepts of React such as </span><b><strong>React components React props, React state, Functional components in React, React hooks, etc.</strong></b></p><h3 id="react-tutorial-prerequisites"><b><strong>React Tutorial Prerequisites</strong></b><span>:</span></h3><p dir="ltr"><span>Before </span><a href="https://www.geeksforgeeks.org/reactjs-introduction/" target="_blank" rel=""><span>learning React </span></a><span>you must have the knowledge of the following.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/html-tutorial" target="_blank" rel="noopener"><span>HTML</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/css-tutorial" target="_blank" rel="noopener"><span>CSS</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/javascript" target="_blank" rel="noopener"><span>JavaScript</span></a></li></ul><p dir="ltr"><b><strong>Also Check: </strong></b><a href="https://www.geeksforgeeks.org/category/web-technologies/reactjs" target="_blank" rel="noreferrer noopener"><span>Recent Articles on ReactJS</span></a></p><div id="table_of_content"><p style="margin:4px; font-size:20px; font-weight:bold;">Table of Content</p><ul><li><a href="#getting-started-with-react-installation-and-environment-setup">Getting Started with React: Installation and Environment Setup</a></li><li><a href="#why-learn-react-js">Why Learn React JS?</a></li><li><a href="#features-of-react">Features of React</a></li><li><a href="#core-react-concepts">Core React Concepts </a></li><li><a href="#react-advantages">React Advantages</a></li></ul></div><h2 id="getting-started-with-react-installation-and-environment-setup"><span>Getting Started with React: Installation and Environment Setup</span></h2><p dir="ltr"><span>Before embarking on your React journey, ensure you have a suitable development environment set up. Here's a roadmap to get you started:</span></p><ol><li value="1"><b><strong>Node.js and npm:</strong></b><span> Download and install Node.js (</span><a href="https://nodejs.org/en/download/package-manager/current" target="_blank" rel="noopener noreferrer"><span>https://nodejs.org/en/download/package-manager/current</span></a><span>) as it provides the runtime environment for JavaScript code execution. npm (Node Package Manager) is bundled with Node.js and is used to manage project dependencies.</span></li><li value="2"><b><strong>Create React App (CRA):</strong></b><span> Using </span><a href="https://www.geeksforgeeks.org/create-a-new-react-app-npm-create-react-app/" target="_blank" rel=""><span>Create React App</span></a><span> (CRA) to establish a new React project with minimal configuration. Run</span><b><strong> </strong></b><b><code><strong>npx create-react-app my-react-app</strong></code></b><b><strong> </strong></b><span>in your terminal, replacing </span><code><span>my-react-app</span></code><span> with your desired project name.</span></li></ol><h3 id="basic-example-of-react"><b><strong>Basic Example of React:</strong></b></h3><p dir="ltr"><span>This example demonstrates a basic react app with hello component using JSX. </span></p><gfg-tabs allow-code-exec=true data-run-ide="false" data-mode="light"> <gfg-tab slot="tab">ReactJS</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre><span></span><span class=c1>// Import statements </span> <span class=k>import</span><span class=w> </span><span class=nx>React</span><span class=w> </span><span class=kr>from</span><span class=w> </span><span class=s1>'react'</span><span class=p>;</span> <span class=k>import</span><span class=w> </span><span class=nx>ReactDOM</span><span class=w> </span><span class=kr>from</span><span class=w> </span><span class=s1>'react-dom/client'</span><span class=p>;</span> <span class=c1>// Defining Functional Component </span> <span class=kd>function</span><span class=w> </span><span class=nx>Hello</span><span class=p>(</span><span class=nx>props</span><span class=p>)</span><span class=w> </span><span class=p>{</span> <span class=w> </span><span class=k>return</span><span class=w> </span><span class=o><</span><span class=nx>h1</span><span class=o>></span><span class=nx>Hello</span><span class=w> </span><span class=nx>GeeksforGeeks</span><span class=o><</span><span class=err>/h1>;</span> <span class=p>}</span> <span class=c1>// Creating Root Element</span> <span class=kd>const</span><span class=w> </span><span class=nx>container</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=nb>document</span><span class=p>.</span><span class=nx>getElementById</span><span class=p>(</span><span class=s2>"root"</span><span class=p>);</span> <span class=kd>const</span><span class=w> </span><span class=nx>root</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=nx>ReactDOM</span><span class=p>.</span><span class=nx>createRoot</span><span class=p>(</span><span class=nx>container</span><span class=p>);</span> <span class=c1>// Render the component</span> <span class=nx>root</span><span class=p>.</span><span class=nx>render</span><span class=p>(</span><span class=o><</span><span class=nx>Hello</span><span class=w> </span><span class=o>/></span><span class=p>);</span> </pre></div></code> </gfg-panel></gfg-tabs><p dir="ltr"><br><span>This code defines a functional component named </span><code><span>App</span></code><span> that returns </span><b><strong>JSX code</strong></b><span> displaying the text "Hello GeeksforGeeks". </span><b><strong>Save the file and run</strong></b><span> your development server using </span><b><code><strong>npm start</strong></code></b><span>. Navigate to</span><b><strong> </strong></b><b><code><strong>http://localhost:3000/</strong></code></b><span> in your browser to view your webpage.</span></p><h2 id="why-learn-react-js"><b><strong>Why Learn React JS?</strong></b></h2><p dir="ltr" style="text-align: justify;"><span>React, the popular JavaScript library, offers several exciting reasons for developers to learn it. </span></p><p dir="ltr" style="text-align: justify;"><span>First, </span><b><strong>React is flexible</strong></b><span> - once you learn its concepts, you can use it across various platforms to build quality user interfaces. Unlike a framework, React鈥檚 library approach allows it to evolve into a remarkable tool. </span></p><p dir="ltr" style="text-align: justify;"><span>Second, React has a great developer experience, making it easier to understand and write code. Third, it benefits from Facebook鈥檚 support and resources, ensuring regular bug fixes, enhancements, and documentation updates. Additionally, React鈥檚 broader community support, excellent performance, and ease of testing make it an ideal choice for web development.</span></p><p dir="ltr"><span>One of the most effective ways to solidify your understanding is through practical application. That's where structured learning comes into play. For those looking to deepen their React skills and progress from beginner to advanced levels, consider enrolling in the course on </span><a href="https://gfgcdn.com/tu/St7/" target="_blank" rel=""><span>React JS: Beginner to Advanced</span></a><span> offered by GeeksforGeeks. This comprehensive course provides hands-on projects and real-world applications, making it an excellent resource for anyone serious about mastering React.</span></p><h2 id="features-of-react"><span>Features of React</span></h2><p dir="ltr"><b><strong>1. JSX (JavaScript Syntax Extension)</strong></b><span>:</span></p><ul><li value="1"><span>JSX combines HTML and JavaScript, allowing you to embed JavaScript objects within HTML elements.</span></li><li value="2"><span>It enhances code readability and simplifies UI development.</span><b><strong> </strong></b></li></ul><p dir="ltr"><b><strong>Example</strong></b><span>:</span></p><pre><span>const name = "GeekforGeeks"; const ele = <h1>Welcome to {name}</h1>;</span></pre><p dir="ltr"><b><strong>2. Virtual DOM (Document Object Model)</strong></b><span>:</span></p><ul><li value="1"><span>React uses a virtual DOM, which is an exact copy of the real DOM.</span></li><li value="2"><span>When there are modifications in the web application, React updates the virtual DOM first and then computes the differences between the real DOM and the virtual DOM.</span></li><li value="3"><span>This approach minimizes unnecessary re-rendering and improves performance.</span></li></ul><img src="https://media.geeksforgeeks.org/wp-content/uploads/20230725135348/Browser-DOM-Virtual-DOM-React.webp" alt="Browser-DOM-Virtual-DOM-React" width="inherit" height="inherit" loading="lazy"><p dir="ltr"><b><strong>3. One-way Data Binding</strong></b><span>:</span></p><ul><li value="1"><span>React follows one-way data binding, where data flows from parent components to child components.</span></li><li value="2"><span>Child components cannot directly return data to their parent components, but they can communicate with parents to modify states based on provided inputs.</span></li></ul><img src="https://media.geeksforgeeks.org/wp-content/uploads/20240118103527/oneway-300x243.jpg" alt="react data binding" width="inherit" height="inherit" loading="lazy"><p dir="ltr"><b><strong>4. Performance</strong></b><span>:</span></p><ul><li value="1"><span>React鈥檚 virtual DOM and component-based architecture contribute to better performance.</span></li><li value="2"><span>Separate components allow efficient rendering and faster execution.</span></li></ul><p dir="ltr"><b><strong>5. Extension</strong></b><span>:</span></p><ul><li value="1"><span>React has a rich ecosystem and supports various extensions.</span></li><li value="2"><span>Explore tools like </span><b><strong>Flux</strong></b><span>, </span><b><strong>Redux</strong></b><span>, and </span><b><strong>React Native</strong></b><span> for mobile app development and server-side rendering.</span></li></ul><p dir="ltr"><b><strong>6. Conditional Statements in JSX</strong></b><span>:</span></p><ul><li value="1"><span>JSX allows writing conditional statements directly.</span></li><li value="2"><span>Display data in the browser based on provided conditions.</span></li></ul><p dir="ltr"><b><strong>Example</strong></b><span>:</span></p><pre><span>const age = 12; if (age >= 10) { return <p>Greater than {age}</p>; } else { return <p>{age}</p>; }</span></pre><p dir="ltr"><b><strong>7. Components</strong></b><span>:</span></p><ul><li value="1"><span>React divides web pages into reusable and immutable components.</span></li><li value="2"><span>Component-based development simplifies code organization and maintenance.</span></li></ul><h2 id="core-react-concepts"><span>Core React Concepts </span></h2><p dir="ltr"><span>here are some essential concepts to learn:</span></p><ul><li value="1"><b><strong>Props:</strong></b><span> Components can receive data from parent components through props, enabling you to pass information and customize component behavior.</span></li><li value="2"><b><strong>State:</strong></b><span> Components can manage their internal state using the </span><code><span>useState</span></code><span> hook. This state dictates the component's appearance and behavior, and updates trigger re-renders.</span></li><li value="3"><b><strong>Lifecycle Methods:</strong></b><span> React provides lifecycle methods like </span><code><span>componentDidMount</span></code><span> and </span><code><span>componentDidUpdate</span></code><span> that allow you to perform actions at specific stages of a component's lifecycle.</span></li><li value="4"><b><strong>Conditional Rendering:</strong></b><span> Control what gets displayed on the screen based on certain conditions using conditional statements within JSX.</span></li></ul><h2 id="react-advantages"><b><strong>React Advantages</strong></b></h2><ul><li value="1"><b><strong>Composable:</strong></b><span> We can divide these codes and put them in custom components. Then we can utilize those components and integrate them into one place.</span></li><li value="2"><b><strong>Declarative:</strong></b><span> In ReactJS, the DOM is declarative. We can make interactive UIs by changing the state of the component and ReactJS takes care of updating the DOM according to it.</span></li><li value="3"><b><strong>SEO Friendly:</strong></b><span> ReactJS affects the SEO by giving you a SPA (Single Page Application) which requires Javascript to show the content on the page which can be rendered and indexed.</span></li><li value="4"><b><strong>Community:</strong></b><span> ReactJS has a huge community because of its demand each company wants to work with ReactJS. Companies like Meta, Netflix, etc built on ReactJS.</span></li><li value="5"><b><strong>Easy to learn:</strong></b><span> HTML-like syntax of JSX makes you comfortable with the codes of React, it only requires a basic knowledge of HTML, CSS, and JS fundamentals to start working with it.</span></li><li value="6"><span>If you want to learn more refer to this article </span><a href="https://www.geeksforgeeks.org/what-are-the-advantages-of-react-js" rel="noopener"><span>React JS Advantages</span></a></li><li value="7"><b><strong>Debugging is Easy:</strong></b><span> The debugging of ReactJS is unidirectional which means while designing any app using ReactJS the child components are nested within parent components. So, the data flow is in a single direction it gets more easier to debug errors.</span></li></ul><h2 id="react-tutorial"><span>React Tutorial</span></h2><h3 id="react-basic-concepts"><span>React Basic Concepts</span></h3><p dir="ltr"><span>Introduction to the Fundamentals of React form importing, exporting modules, creating components, to managing data flow and rendering UI across the application.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/reactjs-introduction" rel="noopener"><span>Introduction</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/reactjs-importing-exporting" rel="noopener"><span>Import and Export</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/reactjs-jsx-introduction" rel="noopener"><span>JSX Introduction</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/reactjs-components" rel="noopener"><span>Components</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/reactjs-conditional-rendering" rel="noopener"><span>Conditional Rendering</span></a></li><li value="6"><a href="https://www.geeksforgeeks.org/reactjs-proptypes" rel="noopener"><span>PropTypes</span></a></li><li value="7"><a href="https://www.geeksforgeeks.org/what-is-prop-drilling-and-how-to-avoid-it" rel="noopener"><span>Prop Drilling</span></a></li><li value="8"><a href="https://www.geeksforgeeks.org/reactjs-lists" rel="noopener"><span>React Lists</span></a></li><li value="9"><a href="https://www.geeksforgeeks.org/explain-new-context-api-in-react" rel="noopener"><span>Context API</span></a></li><li value="10"><a href="https://www.geeksforgeeks.org/introduction-to-react-redux" rel="noopener"><span>React Redux</span></a></li></ul><h3 id="react-hooks"><span>React Hooks</span></h3><p dir="ltr"><span>Different hooks to access and mange state and lifecycle in functional components.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/reactjs-hooks" rel="noopener"><span>Hooks Introduction</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/reactjs-usestate-hook" rel="noopener"><span>useState Hook</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/reactjs-useeffect-hook" rel="noopener"><span>useEffect Hook</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/react-js-useref-hook" rel="noopener"><span>useRef Hook</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/react-js-usememo-hook" rel="noopener"><span>useMemo Hook</span></a></li><li value="6"><a href="https://www.geeksforgeeks.org/reactjs-usecontext-hook" rel="noopener"><span>useContext Hook</span></a></li></ul><h3 id="react-dom-events"><b><strong>React DOM Events</strong></b></h3><p dir="ltr"><span>Handle DOM events in react like mouse, keyboard and form events.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/react-js-events" rel="noopener"><span>React Events Introduction</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/what-is-onclickcapture-event-in-reactjs" rel="noopener"><span>onclickcapture Event</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/react-onmousedown-event" rel="noopener"><span>onMouseDown Event</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/react-ondoubleclick-event" rel="noopener"><span>onDoubleClick Event</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/react-onsubmit-event" rel="noopener"><span>onSubmit Event</span></a></li><li value="6"><a href="https://www.geeksforgeeks.org/react-onscroll-event" rel="noopener"><span>onScroll Event</span></a></li><li value="7"><a href="https://www.geeksforgeeks.org/react-onblur-event" rel="noopener"><span>onBlur Event</span></a></li></ul><h3 id="lifecycle-of-components"><b><strong>Lifecycle of Components</strong></b></h3><p dir="ltr"><span>The lifecycle of react components from creation, mounting and unmounting to manage the different phases.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/reactjs-lifecycle-components" rel="noopener"><span>Introduction to lifecycle of components</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/react-js-constructor-method" rel="noopener"><span>constructor</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/react-js-render-method" rel="noopener"><span>render</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/reactjs-componentdidmount-method" rel="noopener"><span>componentDidMount</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/reactjs-componentwillunmount-method" rel="noopener"><span>componentWillUnmount</span></a></li><li value="6"><a href="https://www.geeksforgeeks.org/reactjs-componentdidcatch-method" rel="noopener"><span>componentDidCatch</span></a></li><li value="7"><a href="https://www.geeksforgeeks.org/reactjs-componentdidupdate-method" rel="noopener"><span>componentDidUpdate</span></a></li><li value="8"><a href="https://www.geeksforgeeks.org/reactjs-shouldcomponentupdate-method" rel="noopener"><span>shouldComponentUpdate</span></a></li></ul><h3 id="routing-in-react"><span>Routing in React</span></h3><p dir="ltr"><span>Manage navigation and routing within the single page application.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/reactjs-router/" target="_blank" rel=""><span>React JS Router</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/what-is-react-router-dom/" target="_blank" rel=""><span>What is react-router-dom?</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/reactjs-types-of-routers/" target="_blank" rel=""><span>React JS Types of Routers</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/react-router-hooks/" target="_blank" rel=""><span>React-Router Hooks</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/mastering-react-routing-learn-navigation-and-routing-in-react-apps/" target="_blank" rel=""><span>Learn Navigation and Routing in React Apps</span></a></li><li value="6"><a href="https://www.geeksforgeeks.org/link-and-navlink-components-in-react-router-dom/" target="_blank" rel=""><span>Link and NavLink components in React-Router-Dom</span></a></li></ul><h3 id="important-react-packages"><span>Important React Packages</span></h3><p dir="ltr"><span>Additional libraries for styling and state management to enhance your react projects.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/introduction-to-react-redux" rel="noopener"><span>Redux</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/react-material-ui" rel="noopener"><span>Material UI</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/react-bootstrap" rel="noopener"><span>react-bootstrap</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/tailwind-css" rel="noopener"><span>Tailwind</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/framer-motion-introduction-and-installation" rel="noopener"><span>Framer Motion</span></a></li></ul><h3 id="react-interview-questions"><span>React Interview Questions</span></h3><p dir="ltr"><span>React Interview questions categorised for different levels including most asked questions.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/reactjs-interview-questions-and-answers" rel="noopener"><span>Beginner Level Interview Questions (2024)</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/reactjs-interview-questions-and-answers-intermediate-level" rel="noopener"><span>Intermediate Level Interview Questions (2024)</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/reactjs-interview-question-and-answers-advance-level" rel="noopener"><span>Advanced Level Interview Questions (2024)</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/7-most-asked-reactjs-interview-questions-answers" rel="noopener"><span>7 Most Asked ReactJS Interview Questions</span></a></li></ul><h3 id="react-online-quizs"><span>React Online Quizs</span></h3><p dir="ltr"><span>Test and Improve your knowledge with the well organised React Quizs</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/react-js-quiz-set-1" rel="noopener"><span>Set-1</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/react-js-quiz-set-2" rel="noopener"><span>Set-2</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/react-js-quiz-set-3" rel="noopener"><span>Set-3</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/reactjs-quiz-set-4" rel="noopener"><span>Set-4</span></a></li></ul><h3 id="react-online-practice-exercise"><span>React Online Practice Exercise</span></h3><p dir="ltr"><span>Embark on your React learning journey with our online practice portal. Start by selecting quizzes tailored to your skill level. Engage in hands-on coding exercises, receive real-time feedback, and monitor your progress. With our user-friendly platform, mastering React becomes an enjoyable and personalized experience. </span></p><blockquote><p dir="ltr"><span>Elevate your coding expertise by going through our carefully curated </span><a href="https://www.geeksforgeeks.org/practice-react-online" rel="noopener"><span>Free Online React Exercises.</span></a></p></blockquote><h3 id="react-complete-references"><span>React Complete References</span></h3><p dir="ltr"><span>Refer to the following articles to have a quick glance at all the important key concepts which are helpful while developing web applications using React</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/reactjs-basics-concepts-complete-reference" rel="noopener"><span>Basic Concepts Reference</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/reactjs-components-complete-reference" rel="noopener"><span>Components Complete Reference</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/reactjs-props-complete-reference" rel="noopener"><span>Props Reference</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/react-events-reference" rel="noopener"><span>Events Reference</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/reactjs-hooks-complete-reference/" target="_blank" rel=""><span>Hooks Reference</span></a></li><li value="6"><a href="https://www.geeksforgeeks.org/reactjs-advanced-guides-complete-reference/" target="_blank" rel=""><span>Advanced Guide Reference</span></a></li></ul><p dir="ltr"><span>If you want to have a simple, quick reference to commonly used React methods you can refer to </span><a href="https://www.geeksforgeeks.org/react-cheat-sheet" rel="noopener"><span>ReactJS Cheat Sheet</span></a><span> article</span></p><p dir="ltr"><span>React is a JavaScript library for building user interfaces, focusing on component-based architecture, reusability, and efficient rendering with the virtual DOM. This React tutorial covers essential topics like JSX, components, hooks, state management, routing with React Router, and popular libraries like Redux and Material UI. It also includes quizzes and interview questions to reinforce and test your knowledge.</span></p><h2 id="frequently-asked-questions-on-react"><span>Frequently Asked Questions on React</span></h2><h3 id="1-what-is-react-used-for"><span>What is React used for?</span></h3><blockquote><p dir="ltr"><span>The primary goal of React is to create a User Interface, Single-Page Application, Progressive Web Application and more.</span></p></blockquote><h3 id="2-which-language-is-used-in-react"><span>Which language is used in React?</span></h3><blockquote><p dir="ltr"><span>React used JavaScript programming language.</span></p></blockquote><h3 id="3-is-react-a-frontend-language"><span>Is React a front-end language?</span></h3><blockquote><p dir="ltr"><span>React globally used for Front-end JS library and it is popular with both software and project speoncer.</span></p></blockquote><h3 id="4-which-is-in-demand-reactjs-or-angulerjs-in-2024"><span>Which is in demand ReactJS or AngulerJS in 2024?</span></h3><blockquote><p dir="ltr"><span>React is far more popular than AngulerJS because ReactJS comes with more libraries, resources and bigger community support.</span></p></blockquote><h3 id="5-which-is-better-nodejs-or-reactjs-or-angularjs"><span>Which is better NodeJS or ReactJS or AngularJS</span></h3><blockquote><p dir="ltr"><span>Choosing the framework always depends very much on your requirements. All of these three frameworks are quite popular, and users choose them based on what they want to do. But if we do so more specifically, then ReatJS is better.</span></p></blockquote><h3 id="6-is-this-reactjs-tutorial-for-beginners-or-for-advanced"><span>Is this ReactJS tutorial for beginners or for advanced</span></h3><blockquote><p dir="ltr"><span>As we said at the beginning of this article, this course is for beginners as well as for advanced. </span></p></blockquote> <div class='article_bottom_text'></div><br> <div id="video-tab-content" class="video-tab-content"> <div style="text-align: center; margin: 20px 0px;" id="GFG_AD_InContent_Desktop_728x280"></div> </div> <div class="article-meta-author-details"> <div class="article-meta-author-details-block"> <div class="article-meta-author-details-profile-display"> <div class="article-meta-author-details-profile-display-icon"> <a href="https://www.geeksforgeeks.org/user/shobhit__sharma/contributions/?itm_source=geeksforgeeks&itm_medium=article_author&itm_campaign=auth_user" style="text-decoration: none;"><div class="image-wrap" style="position: relative"><p class="profileCard-profile-picture" style="background-color:#B0DAFF; margin:0px;">S</p> <div style="position: absolute;top: -35px; left: -13px;"> <i class="gfg-badge-icon md scholar"></i> </div> </div> </a> </div> <div class="article-meta-author-details-profile-display-name" > <a aria-label="author profile" href="https://www.geeksforgeeks.org/user/shobhit__sharma/contributions/?itm_source=geeksforgeeks&itm_medium=article_author&itm_campaign=auth_user" style="display: block;overflow: hidden;width: 65px;text-decoration: none;text-overflow: ellipsis;color: var(--gfg-title-color);font-weight: bold;white-space: nowrap;">shobhit__sharma</a> </div> </div> <div class="article-meta-author-details-follow-button"> <div class="follow-container"> <div class="follow-btn hideIt" > <button id="followAuthor" type="button" onclick ="followOrUnfollowAuthor()" value="shobhit__sharma"> <span role="img" aria-label="plus" class="plus-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span> <span style="font-weight: bold;">Follow</span></button></div></div></div> </div> <div class="article_bottom_suggestion_wrapper"> <div class="article_bottom_suggestion" data-title="Follow"> <a href='https://news.google.com/publications/CAAqBwgKMLTrzwsw44bnAw?hl=en-IN&gl=IN&ceid=IN%3Aen' target="_blank"> <img class="gfg-icon_Gnews no-zoom-in-cursor" src=https://media.geeksforgeeks.org/auth-dashboard-uploads/Google-news.svg loading="lazy" alt="News"></img> </a> </div> <div class='discussion_panel' data-title='Comments'> <i class='discussion_button' data-gfg-action='loadComments'> </i> </div> <div pid="1107997" class="article--viewer_like tooltip tooltipBottom" data-title="Like Article">  <button id="likeButton" aria-label="like article" data-gfg-action="like-article" data-bookmark-value="0" data-liked="false" style="color: #5B5A5A !important; display: flex; align-items: center; background-color: unset; margin: 0px !important; padding: 5px 0px;"> <i class="author-badge-like-button"></i> <figure id="likeCount" style="margin-left: 3px; margin-top: 4px; color: var(--like-count-color); font-size: 14px; font-weight: 600;" class="favoriteText"></figure> </button> </div> <div class="article_bottom_suggestion" onclick="improveArticleCall()" data-title="Improve"> <span class="improveTooltipBottom">Improve</span> <i class="author-badge-improvement-button"></i> </div> </div> </div> <div class="d-row content-bw "style="margin-top: 20px;"> <div class="article-pgnavi_prev"> </div> <div class="article-pgnavi_next"> <a href="https://www.geeksforgeeks.org/reactjs-introduction/?ref=next_article" class="pg-head"> <span style="margin-right: 5px; margin-left: auto;">Next Article</span> <span class="gfg-icon gfg-icon_next"></span> </a>  <div class="pg-main"> <a href="https://www.geeksforgeeks.org/reactjs-introduction/?ref=next_article">React Introduction</a> </div> </div> </div> </div> </article> <div class="article--recommended article--recommended_wrapper" id="similar-reads"> <h3 class="new-top-bar top-bar-title">Similar Reads</h3> <div class="gfg-similar-reads-list"> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/create-an-activity-indicator-in-react-native-using-react-native-paper-library/?ref=oin_asr1"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Create an Activity Indicator in react-native using react-native-paper library</div> <div class="gfg-similar-read-item-subheading">React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Prerequisites: Basic</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/react-suite-icon-extension-react-icons/?ref=oin_asr2"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">React Suite Icon extension React Icons</div> <div class="gfg-similar-read-item-subheading">A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React Suite Icon extension React icons. React Icons, contains various popular</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-to-add-mui-react-button-icon-in-react-bootstrap/?ref=oin_asr3"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to Add MUI React Button Icon in React-Bootstrap ?</div> <div class="gfg-similar-read-item-subheading">In this article, we will learn how to add the mui react button icon in react-bootstrap. Icons can be added in the react-bootstrap by importing the MUI icon component and using it within your React-Bootstrap button. React-Bootstrap is a front-end framework that was designed keeping React in mind. Steps to Create React Application And Installing Modu</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <div id="GFG_AD_Desktop_BTF_336x280_3" style="margin : 0px auto 13px;"></div> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-to-import-from-react-select-cdn-with-react-and-babel/?ref=oin_asr4"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to import from React-Select CDN with React and Babel ?</div> <div class="gfg-similar-read-item-subheading">In ReactJS, import from React-Select CDN is not done in a simple way as we do with the npm packages. To use them we need to use directly them in the HTML file. It does not work with the project set-up by creating a react app. Prerequisites:React JSHTML, CSS, JavaScriptSteps to Import React-Select CDN with React and Babel:Step 1: Create index.html w</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/explain-new-features-of-react-memo-in-react-v16-6/?ref=oin_asr5"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Explain new features of React Memo in React v16.6 ?</div> <div class="gfg-similar-read-item-subheading">React memo is a Higher Order Component (HOC) introduced in React v16.6. As the name suggests, Memo API uses the memoization technique to optimize performance and make the application faster. The Memo API avoids unnecessary re-renders in functional components thereby optimizing the performance of the application. We will see two different examples m</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/what-is-the-difference-between-react-fetch-and-whatwg-fetch-in-react-js/?ref=oin_asr6"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">What is the difference between react-fetch and whatwg-fetch in React.js ?</div> <div class="gfg-similar-read-item-subheading">React-fetch and Whatwg-fetch are both libraries for making HTTP requests in a React application, but they are used for different purposes and have different features. Table of Content React-fetchWhatwg-fetchDifference between React-fetch and Whatwg-fetchReact-fetch: `react-fetch` is a library offering a higher-order component (HOC) for streamlined</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/plugin-react-was-conflicted-between-package-json-eslint-config-react-app/?ref=oin_asr7"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Plugin "react" was conflicted between "package.json 禄 eslint-config-react-app</div> <div class="gfg-similar-read-item-subheading">The error Plugin "react" was conflicted between package.json and eslint-config-react-app generally arises when there is a conflict in naming convention or package.json data. However, this is not the only reason for this conflict. Some of the other reasons can be due to a different version or conflict in project dependencies. Error image from Termin</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <div id="GFG_AD_Desktop_BTF_336x280_4" style="margin : 0px auto 13px;"></div> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-to-zoom-in-zoom-out-using-react-pdf-in-reactjs/?ref=oin_asr8"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to Zoom in/Zoom out using React-PDF in React JS ?</div> <div class="gfg-similar-read-item-subheading">Zooming in or out in React-PDF within a React JS application is achieved by using the 'scale' prop inside the `<Page />` component. The 'scale' prop accepts decimal values; values greater than 1 zoom in, while values less than 1 zoom out the page. Prerequisites:React JSReact Functional ComponentsSyntax: <page scale = {value} /> // When</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/why-to-use-react-hooks-instead-of-classes-in-reactjs/?ref=oin_asr9"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Why to use React Hooks Instead of Classes in React JS ?</div> <div class="gfg-similar-read-item-subheading">The introduction of React Hooks has changed the way we are managing states and lifecycle features. They offer more easy and functional way as compared to class based components. In this article, we will learn why to use React Hooks Instead of Classes in ReactJS, but lets first discuss about both React hooks and class based components. Table of Cont</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/what-are-react-hooks-and-why-were-they-added-to-react/?ref=oin_asr10"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">What are React Hooks, and why were they added to React?</div> <div class="gfg-similar-read-item-subheading">React Hooks are a way to add functionality to functional components in React. Before Hooks, functional components were more limited compared to class components in terms of what they could do. With Hooks, users can now use state, lifecycle methods, and other React features in functional components, making them more powerful and flexible. Hooks Addr</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/difference-between-react-memo-and-usememo-in-react/?ref=oin_asr11"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Difference between React.memo() and useMemo() in React.</div> <div class="gfg-similar-read-item-subheading">In React applications, optimizing performance is crucial for delivering a smooth user experience. Two key tools for achieving this are React.memo() and useMemo(). While both help improve performance, they serve different purposes and are used in distinct scenarios. Table of Content What is React.memo() ?What is useMemo() ?Difference Between React.m</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-does-react-memo-optimize-functional-components-in-react/?ref=oin_asr12"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How does React.memo() optimize functional components in React?</div> <div class="gfg-similar-read-item-subheading">React.memo() is a higher-order component provided by React that can help optimize functional components by reducing unnecessary re-renders. Let's explore how it works and how it optimizes functional components: Table of Content Optimizing with React.memo()When to use React.memo() ?Benefits of memoization using React.memo()How to use React.memo() ?C</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-to-add-a-divider-in-react-native-using-react-native-paper-library/?ref=oin_asr13"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to add a divider in react-native using react-native-paper library ?</div> <div class="gfg-similar-read-item-subheading">React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-does-react-router-handle-navigation-in-a-react-application/?ref=oin_asr14"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How does React Router handle navigation in a React application?</div> <div class="gfg-similar-read-item-subheading">React Router聽is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL. Let us create a simple application to React to understand how the React Router works React Router simplifies navigation in React applicat</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/what-is-the-use-of-react-context-in-react-redux/?ref=oin_asr15"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">What is the use of React Context in React-Redux?</div> <div class="gfg-similar-read-item-subheading">React Context is a feature that React provides us to manage states required in multiple components. Redux is also a state management library and solves the same problem that React Context does but in a different way. In this article, we will see in detail what is react context, why and how to use it, how it is related to and different from react-re</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">5 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/implementing-react-router-with-redux-in-react/?ref=oin_asr16"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Implementing React Router with Redux in React</div> <div class="gfg-similar-read-item-subheading">This article explores implementing React Router with Redux for enhanced state management and routing in React applications. Table of Content What is React Router and Redux?Approach to implement React Router in ReduxSteps to Setup the React AppWhat is React Router and Redux?React Router facilitates routing in React apps, managing component rendering</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/implementation-of-react-memo-and-usememo-in-react/?ref=oin_asr17"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Implementation of React.memo() and useMemo() in React</div> <div class="gfg-similar-read-item-subheading">React.memo allows functional component to have same optimization as Pure Component provides for class-based components. useMemo is for memoizing function's calls inside functional component. What is React.memo() ?React.memo()聽is a聽higher-order component (HOC)聽provided by React that memoizes functional components. It means that it caches the result</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/what-are-the-react-router-hooks-in-react-v5/?ref=oin_asr18"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">What are the React Router hooks in React v5?</div> <div class="gfg-similar-read-item-subheading">React Router hooks perform client-side single-page routing that provides a functional and streamlined approach to managing navigation in React applications. It provides a way to directly access the state of the router from functional components, this simplifies tasks like retrieving information about the desired URL and navigating through web pages</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">5 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-to-fix-react-useeffect-running-twice/?ref=oin_asr19"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to Fix React useEffect running twice in React 18 ?</div> <div class="gfg-similar-read-item-subheading">In React applications, the useEffect hook is commonly used for handling side effects, such as data fetching, subscriptions, or manually changing the DOM. However, encountering the issue of useEffect running twice can lead to unexpected behavior and impact the performance of your application. In this article, we'll explore various approaches to reso</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-to-create-chip-in-react-native-using-react-native-paper/?ref=oin_asr20"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to create Chip in react-native using react-native-paper ?</div> <div class="gfg-similar-read-item-subheading">React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/compare-react-testing-library-and-enzyme-for-testing-react-components/?ref=oin_asr21"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Compare React Testing Library and Enzyme for Testing React Components.</div> <div class="gfg-similar-read-item-subheading">React Testing Library and Enzyme are widely used testing utilities for React components. Although they serve the same purpose, their approaches and features differ. React Testing LibraryReact Testing Library is a lightweight testing utility for React. It emphasizes testing components from the user's perspective. This means focusing on how users int</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-to-use-react-select-in-react-application/?ref=oin_asr22"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to Use react-select in React Application?</div> <div class="gfg-similar-read-item-subheading">React Select is a flexible and handy dropdown library for React that handles multi-select, loading data asynchronously, custom options, and more in your components with ease. In this article, we will see how to use react-select in React Application. PrerequisiteNode.js installednpm or yarn package managerBasic knowledge of ReactApproachTo implement</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-to-install-react-bootstrap-in-react-application/?ref=oin_asr23"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to install React-Bootstrap in React Application ?</div> <div class="gfg-similar-read-item-subheading">React Bootstrap is a popular library that let us use the Bootstrap framework's power and flexibility to React.js applications. By combining the flexibility of React with the UI components provided by Bootstrap, you can create responsive and visually appealing user interfaces with ease. In this article, we'll see the process of installing React Boot</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-to-use-react-suspense-to-improve-your-react-projects/?ref=oin_asr24"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to Use React Suspense to Improve your React Projects ?</div> <div class="gfg-similar-read-item-subheading">Suspense is a React component used to suspend the rendering process to perform some asynchronous tasks like getting data from API or loading any other component lazily. In simple words, Suspense is like waiting for something to happen, where we are not sure when it will happen. Suspense is beneficial in code splitting and data fetching processes. W</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-to-use-react-context-with-react-redux/?ref=oin_asr25"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to use React Context with React-Redux ?</div> <div class="gfg-similar-read-item-subheading">React context with React-Redux is a popular state management library for React applications. Using React context with React-Redux is a powerful way to provide the Redux store to components deep within your component tree without manually passing it down through props. PrerequisitesNode.js and NPMReactReact-ReduxJavaScriptApproach:First, define a Re</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/create-a-new-react-app-npm-create-react-app/?ref=oin_asr26"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Create a New React App - npm create-react-app</div> <div class="gfg-similar-read-item-subheading">The create react app command allows us to create a development environment and install all necessary libraries for creating single-page applications using React. The CRA tool is used to set up a new React project quickly, providing a standard structure and configuration. It includes a development server, build scripts, and support for modern JavaSc</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/difference-between-react-component-and-react-purecomponent/?ref=oin_asr27"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Difference between React.Component and React.PureComponent?</div> <div class="gfg-similar-read-item-subheading">A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. But React has two types of Components: React.PureComponent: It is one of the most significant ways to optimize React applications. By using the pure component, there is no</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/how-to-use-react-window-module-in-reactjs/?ref=oin_asr28"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to use react-window Module in React JS?</div> <div class="gfg-similar-read-item-subheading">React window works by only rendering part of a large data set. This module is very easy to integrate and reduces the amount of time which generally takes a while to render. This module avoids the over-allocation of DOM nodes. We can use the react-window module in React JS using the following approach. Prerequisite:ReactMaterial UIApproach to use re</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/adding-spinners-using-react-spinners-kit-package-in-react-js/?ref=oin_asr29"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Adding spinners using react-spinners-kit package in React JS</div> <div class="gfg-similar-read-item-subheading">Discover how to elevate your React.js applications by seamlessly integrating and customizing dynamic spinners from the react-spinners-kit package. This article offers a concise, step-by-step guide to enhancing user experience through engaging loading indicators in your React projects. Prerequisites:Node JS or NPMReact JSReact useStateApproach: Impo</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a> <a class="gfg-similar-read-item" href="https://www.geeksforgeeks.org/building-a-react-boilerplate-from-scratch-without-using-create-react-app/?ref=oin_asr30"> <div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Building a react boilerplate from scratch without using create-react-app</div> <div class="gfg-similar-read-item-subheading">In this article, we are going to build a basic boilerplate for a React project from scratch without using the create-react-app or any other predefined boilerplate. This is a great experience for any react developer to look into what is happening behind the scenes. The file structure for our project will be looking like the following. You will under</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">7 min read</span> </div> </a> </div> </div> <div class="bottom-wrap" style="padding: 0px 20px;margin-bottom: 10px;"> <div class="improved"> <div class="t-head">Article Tags : </div> <ul> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/category/web-technologies/reactjs/?ref=article_category">ReactJS</a> </li> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/category/web-technologies/?ref=article_category">Web Technologies</a> </li> </ul> </div> </div> <div class="vote-wrap"> <div style="display:none;align-items:center;justify-content:center;width:100%;"> <button aria-label="like" data-type="like" class="vote-this" style="margin-right: 0; margin-left:0 ;"> <i class="gfg-icon gfg-icon_like favoriteIcon"></i> <span class="favoriteLike">Like</span> <figure class="favoriteText"></figure> </button> </div> </div> </div> <div class="article-meta"> <div class="bottom-wrap"> <div id="GFG_AD_InContent_Desktop_BTF_650x250" style="text-align:center;max-height: 300px;"></div> </div>  </div> </div> </div> </div> <div id="report_modal_content" class="report_modal_content" style="display:hidden;"></div> <div class="onopen-discussion-panel"> <div class="discussion-tab"> <div class="discussion_heading"> <div></div> <i class="gfg-icon close-tab-icon"></i> </div> <div class="discussion_content"> <div style="height:100%"> <div style="height:100%" id="comment-system"></div> </div> </div> </div> </div> <div class="rightBar" style="padding-right: 5px;"> <style> .article--container_content{ align-items: unset !important; } .sideBar { position: sticky !important; } .gfg-icon_switch::after { background-position: -40px -281px !important; } .gfg-icon_transaction::after { background-position: -40px -321px !important; } .header-main__profile.selected+.mega-dropdown{ width: 225px !important; } #courses-container .course-price{ display:none; } /* .side--container_wscard .card-content .content .meta:empty, .practiceBannerFromPlugin{ display:none !important; } */ .side--container_wscard .card-content .content .meta{ display:block !important; } .side--container_wscard .card-content .content .meta p{ background-color: rgba(254, 212, 91, 0.6); font-size: 10pt; font-weight: bold; display: inline-block; color: var(--color-black); margin-top: 15px; padding: 0px 5px; } #try-it{ display:initial !important; } #try-it .try-it-div{ line-height: 34px; } .gfg-icon_dark-mode::after { background-position: -40px -680px; } .side--container_wscard .head{ font-size: 14px !important; } .nineDot-menu, .gfg-icon_ndot{ display: none; } #text-15{ flex-direction: column; } .mtq_correct_marker, .mtq_wrong_marker{ display: none; } .sidebar_wrapper > :last-child{ margin: unset !important; margin-left: 5px !important; margin-top: 20px !important; top: 70px !important; } .darkMode-wrap{ bottom:1% !important; } #secondary .textwidget{ margin-left: auto; margin-right: 0; text-align: right; } #secondary .widget_text:last-child{ top: 70px !important; } @media(max-width:768px){ #scrollTopBtn{ display:none !important; } } .rightbar_loggedin_promo_cta{ display:flex; cursor:pointer; margin-bottom:20px; } </style> <div id="secondary" class="widget-area"> <div class='OINTechPromoRightBarBanner' id='rightBarSaleBanner' style='text-align:right; margin-bottom:5px;'><a href=https://www.geeksforgeeks.org/geeksforgeeks-premium-subscription?itm_source=geeksforgeeks&itm_medium=rightbar_oin&itm_campaign=premium><img src=https://media.geeksforgeeks.org/auth-dashboard-uploads/premium_oin_rbar_min.png alt='three90RightbarBannerImg' style='width:300px; height:250px;'></a></div>  <aside id="text-15" class="widget widget_text"> <div class="textwidget"> <div id="_GFG_ABP_Desktop_RightSideBar_ATF_300x600_2"></div> <div id="GFG_AD_Desktop_RightSideBar_ATF_300x250_2" style="min-width: 300px;margin-bottom:10px;"></div> <div id='GFG_AD_Desktop_RightSideBar_ATF_300x600' style='min-width: 300px; min-height: 600px;margin-bottom:10px;'></div> </div> </aside>  <aside id="text-16" class="widget widget_text"> <div class="textwidget"> <div id="_GFG_ABP_Desktop_RightSideBar_MTF_300x600"></div> <div id='GFG_AD_Desktop_RightSideBar_MTF_300x250' style='min-width: 300px;'></div> <div id="_GFG_ABP_Desktop_RightSideBar_BTF_300x600"></div> <div id="_GFG_ABP_Desktop_RightSideBar_BTF_300x600_3"></div> </div> </aside>  <style>.right-bar-explore-more{ visibility: hidden; min-height: 230px;text-align:left;min-width:300px;max-width:300px; padding-left: 19px; padding-right: 25px; margin-top: 20px;} .right-bar-explore-more .title{text-align:left;font-size:20px; font-weight: 600; line-height: 22px; color:var(--em-heading);padding:14px 0;font-family:var(--font-primary)} .right-bar-explore-more .rightbar-sticky-ul {list-style: disc outside; padding-left: 17px;} .right-bar-explore-more li{font-size: 14px !important;font-weight: 400;line-height: 18px !important;color: var(--em-text);margin: 14px 0;font-family:var(--font-primary);} .right-bar-explore-more li::marker{color: var(--em-text) !important;} .right-bar-explore-more .rightbar-sticky-ul a{text-align:left !important; color: var(--em-text); display: block !important;} .right-bar-explore-more .rightbar-sticky-ul a:hover{text-decoration:underline;color:var(--em-link)!important;} .right-bar-explore-more hr {margin: 0;background-color: var(--tn-hr);} @media (max-width: 991px){ .right-bar-explore-more{ width: 85%; margin: auto; margin-top: 20px; max-width: unset; display: none !important; } #text-18 .textwidget{ width: 100%; } }</style> <script> var rightBarExploreMoreList = `<li style="color:var(--color-black)"><a href="https://www.geeksforgeeks.org/javascript/?ref=rightbar_explore" target="_blank" style="font-family:var(--font-primary)">JavaScript Tutorial</a></li><li style="color:var(--color-black)"><a href="https://www.geeksforgeeks.org/react-interview-questions/?ref=rightbar_explore" target="_blank" style="font-family:var(--font-primary)">React Interview Questions and Answers</a></li><li style="color:var(--color-black)"><a href="https://www.geeksforgeeks.org/javascript-interview-questions-and-answers/?ref=rightbar_explore" target="_blank" style="font-family:var(--font-primary)">JavaScript Interview Questions and Answers</a></li><li style="color:var(--color-black)"><a href="https://www.geeksforgeeks.org/html-tutorial/?ref=rightbar_explore" target="_blank" style="font-family:var(--font-primary)">HTML Tutorial</a></li><li style="color:var(--color-black)"><a href="https://www.geeksforgeeks.org/rest-api-introduction/?ref=rightbar_explore" target="_blank" style="font-family:var(--font-primary)">REST API Introduction</a></li>` </script>  <aside id="text-18" class="widget widget_text"> <div class="textwidget"> <div class="right-bar-explore-more" style="display:none;visibility: unset;"> <div class="title">Explore More</div> <ul class="rightbar-sticky-ul"></ul> </div> <div id='GFG_AD_Desktop_RightSideBar_BTF_Sticky_300x250' style='min-width: 300px;margin-bottom:10px'></div> <div id='GFG_AD_Desktop_RightSideBar_Docked_160x600' style='min-width: 160px;'></div><div id='GFG_AD_Desktop_RightSideBar_BTFdocked_300x600' style='min-width: 300px;'></div> </aside>  <aside id="text-20" class="widget widget_text"> <div class="textwidget">  </div> </aside> </div> <div id="user-personal-note" style="display: none;"></div> </div> </div> <section class="disqus-section"> <div class="article-page_flex"> <div class="leftBar"> </div> </div> </section> </div> <div id="video-popup" style="display:none"></div> <link rel="stylesheet" href='https://www.geeksforgeeks.org/wp-content/themes/iconic-one/css/articleList.min.css?ver=1.7'> <script> $(document).ready(function() { var isfollowingApiCall = false; if ($('.follow-btn').length) { var articleRecommendedTop = $(".article--recommended").offset().top; var articleRecommendedBottom = articleRecommendedTop + $(".article--recommended").outerHeight(); $(window).scroll(function() { var top_of_element = $(".article--recommended").offset().top; var bottom_of_element = $(".article--recommended").offset().top + $(".article--recommended").outerHeight(); var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight(); var top_of_screen = $(window).scrollTop(); if ((bottom_of_screen > top_of_element && top_of_screen < bottom_of_element) || (bottom_of_screen > articleRecommendedTop && top_of_screen < articleRecommendedBottom) || (top_of_screen > articleRecommendedBottom)) { if (!isfollowingApiCall) { isfollowingApiCall = true; setTimeout(function(){ if (loginData && loginData.isLoggedIn) { if (loginData.userName !== $('#followAuthor').val()) { is_following(); } else { $('.profileCard-profile-picture').css('background-color', '#E7E7E7'); } } else { $('.follow-btn').removeClass('hideIt'); } }, 3000); } } }); } $(".accordion-header").click(function() { var arrowIcon = $(this).find('.bottom-arrow-icon'); arrowIcon.toggleClass('rotate180'); }); }); window.isReportArticle = false; function report_article(){ if (!loginData || !loginData.isLoggedIn) { const loginModalButton = $('.login-modal-btn') if (loginModalButton.length) { loginModalButton.click(); } return; } if(!window.isReportArticle){ //to add loader $('.report-loader').addClass('spinner'); jQuery('#report_modal_content').load(gfgSiteUrl+'wp-content/themes/iconic-one/report-modal.php', { PRACTICE_API_URL: practiceAPIURL, PRACTICE_URL:practiceURL },function(responseTxt, statusTxt, xhr){ if(statusTxt == "error"){ alert("Error: " + xhr.status + ": " + xhr.statusText); } }); }else{ window.scrollTo({ top: 0, behavior: 'smooth' }); $("#report_modal_content").show(); } } function closeShareModal() { const shareOption = document.querySelector('[data-gfg-action="share-article"]'); shareOption.classList.remove("hover_share_menu"); let shareModal = document.querySelector(".hover__share-modal-container"); shareModal && shareModal.remove(); } function openShareModal() { closeShareModal(); // Remove existing modal if any let shareModal = document.querySelector(".three_dot_dropdown_share"); shareModal.appendChild(Object.assign(document.createElement("div"), { className: "hover__share-modal-container" })); document.querySelector(".hover__share-modal-container").append( Object.assign(document.createElement('div'), { className: "share__modal" }), ); document.querySelector(".share__modal").append(Object.assign(document.createElement('h1'), { className: "share__modal-heading" }, { textContent: "Share to" })); const socialOptions = ["LinkedIn", "WhatsApp", "Copy Link"]; socialOptions.forEach((socialOption) => { const socialContainer = Object.assign(document.createElement('div'), { className: "social__container" }); const icon = Object.assign(document.createElement("div"), { className: `share__icon share__${socialOption.split(" ").join("")}-icon` }); const socialText = Object.assign(document.createElement("span"), { className: "share__option-text" }, { textContent: `${socialOption}` }); const shareLink = (socialOption === "Copy Link") ? Object.assign(document.createElement('div'), { role: "button", className: "link-container CopyLink" }) : Object.assign(document.createElement('a'), { className: "link-container" }); if (socialOption === "LinkedIn") { shareLink.setAttribute('href', `https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}`); shareLink.setAttribute('target', '_blank'); } if (socialOption === "WhatsApp") { shareLink.setAttribute('href', `https://api.whatsapp.com/send?text=${window.location.href}`); shareLink.setAttribute('target', "_blank"); } shareLink.append(icon, socialText); socialContainer.append(shareLink); document.querySelector(".share__modal").appendChild(socialContainer); //adding copy url functionality if(socialOption === "Copy Link") { shareLink.addEventListener("click", function() { var tempInput = document.createElement("input"); tempInput.value = window.location.href; document.body.appendChild(tempInput); tempInput.select(); tempInput.setSelectionRange(0, 99999); // For mobile devices document.execCommand('copy'); document.body.removeChild(tempInput); this.querySelector(".share__option-text").textContent = "Copied" }) } }); document.querySelector(".hover__share-modal-container").addEventListener("mouseover", () => document.querySelector('[data-gfg-action="share-article"]').classList.add("hover_share_menu")); } function toggleLikeElementVisibility(selector, show) { document.querySelector(`.${selector}`).style.display = show ? "block" : "none"; } function closeKebabMenu(){ document.getElementById("myDropdown").classList.toggle("show"); } </script>  <script> $(document).ready(function() { $("#showMoreTagsBtn").click(function() { $('.articles-hidden-tags').show(); $(this).hide(); }); $("#showMorePracticeTagsBtn").click(function() { $(".practice-tags li:nth-child(n+5)").show(); $(this).hide(); }); }); </script>  <style> .grecaptcha-badge { visibility: hidden !important; } .thank-you-message { height: 100%; display:flex; flex-direction: column; justify-content: center; align-items: center; } .thank-you-message-content { margin-top: 17px; font: 400 20px var(--font-secondary); color: var(--improve-modal-text); line-height: 180%; text-align: center; } .thank-you-message-content h2{ font-family: var(--font-secondary); } .all-footer-information{ width: 100% !important;; } .footer-wrapper_links-list{ margin-block-start: 0em !important; width: 16% !important; padding-inline-start: 18px !important; } .link-head{ margin-bottom: 0px; } @media only screen and (max-width:1340px) { .footer-wrapper_links-list{ overflow-wrap: break-word; } } @media screen and (min-width: 991px) { .all-footer-information{ padding-left:15px; } } @media only screen and (max-width:980px) { .footer-wrapper_branding-address{ padding-top: 10px; } } @media (max-width: 750px) { .thank-you-message-content{ font-size: 14px; line-height: 170%; } } /* CSS variable meant to handle the dark and light mode icon for three 90 event in header courses dropdown */ :root{ --three90headericon : url('https://media.geeksforgeeks.org/auth-dashboard-uploads/three90daylogocompressed.svg'); --three90headericonposition : 0px -40px; --three90leftbarimggrid : url('https://media.geeksforgeeks.org/auth-dashboard-uploads/three90leftbarspritecompressed.svg'); --three90leftbarimgposition : -5px -55px; --three90leftbarbgcolour : #b3abd0; } body[data-dark-mode="true"]{ --three90leftbarimgposition : -6px 1px; --three90headericonposition : 0px 0px; --three90leftbarbgcolour: #8c82b9; } .three90leftbarimg{ margin-left: -5px; height: 30px; background-image: var(--three90leftbarimggrid); background-repeat: no-repeat; background-position: var(--three90leftbarimgposition); background-size: 212px; } .courseTabShimmer{ position: absolute; height: 110%; width: 0; opacity: .7; -webkit-animation: courseShimmer 2s cubic-bezier(0,0,.07,.61) infinite; animation: courseShimmer 2s cubic-bezier(0,0,.07,.61) infinite; box-shadow: 0 0 25px 5px #dddcdc; -webkit-transform: rotate(90deg); transform: rotate(90deg); padding:0px !important; border:unset !important; } @keyframes courseShimmer{ 0% { left: 0; } 55% { left: 100%; } 99% { left: 110%; } } </style> </div> <div id="displayModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="error-message"></div>  <div class="modal-body" id="dmBody"> <div id="modal-dm-content"></div> <div class="modal-overlay" aria-hidden=true> <span class="loader__animation"></span> </div>  </div> </div> </div> </div> <div id="displayModalBackdrop" class="backdrop"></div>  <footer class="gfg-footer" id="gfg-footer"> <div class="footer-wrapper"> <div class="footer-wrapper_branding"> <a class="footer-wrapper_branding-anchor" aria-label="GeeksforGeeks Logo" href="https://www.geeksforgeeks.org/"> <img style="height: 32px; width: 230px; max-width: fit-content;" class="footer-wrapper_branding-nlogo" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/gfgFooterLogo.png" alt="geeksforgeeks-footer-logo"/> </a> <div class="footer-wrapper_branding-address"> <div class="address_section"> <div class="address-icon-wrapper"> <i class="gfg-icon gfg-icon_pin"></i> <div class="address_div"> <div class="footer-address"> Corporate & Communications Address:- A-143, 9th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305) | Registered Address:- K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305 </div> </div> </div> </div> </div> <div class="footer-wrapper_branding-social"> <a href="https://www.facebook.com/geeksforgeeks.org/" rel="noopener noreferrer" aria-label="GeeksforGeeks Facebook" target="_blank"> <div class="facebook"></div> </a> <a href="https://www.instagram.com/geeks_for_geeks/" rel="noopener noreferrer" aria-label="GeeksforGeeks Instagram" target="_blank"> <div class="instagram"></div> </a> <a href="https://in.linkedin.com/company/geeksforgeeks" rel="noopener noreferrer" aria-label="GeeksforGeeks LinkedIn" target="_blank"> <div class="linkedin"></div> </a> <a href="https://twitter.com/geeksforgeeks" rel="noopener noreferrer" aria-label="GeeksforGeeks Twitter" target="_blank"> <div class="twitter"></div> </a> <a href="https://www.youtube.com/geeksforgeeksvideos" rel="noopener noreferrer" aria-label="GeeksforGeeks YouTube" target="_blank"> <div class="youtube"></div> </a> </div> <div class="footer-wrapper_branding-app"> <a aria-label="GeeksforGeeks App Link" href="https://geeksforgeeksapp.page.link/gfg-app" target="_blank" ><img src="https://media.geeksforgeeks.org/auth-dashboard-uploads/googleplay.png" alt="GFG App on Play Store" id="gplay" loading="lazy"></a> <a aria-label="GeeksforGeeks App Link" href="https://geeksforgeeksapp.page.link/gfg-app" target="_blank"><img src="https://media.geeksforgeeks.org/auth-dashboard-uploads/appstore.png" alt="GFG App on App Store" id="appstore" loading="lazy"></a> </div> </div> <div class="all-footer-information"> <div class="footer-wrapper_links" style="justify-content: space-between; text-align: -webkit-left;"><ul class="footer-wrapper_links-list" ><li>Company</li><li><a href=https://www.geeksforgeeks.org/about/?ref=outindfooter>About Us</a></li><li><a href=https://www.geeksforgeeks.org/legal/?ref=outindfooter>Legal</a></li><li><a href=https://www.geeksforgeeks.org/press-release/?ref=outindfooter>In Media</a></li><li><a href=https://www.geeksforgeeks.org/about/contact-us/?ref=outindfooter>Contact Us</a></li><li><a href=https://www.geeksforgeeks.org/advertise-with-us/?ref=outindfooter>Advertise with us</a></li><li><a href=https://www.geeksforgeeks.org/gfg-corporate-solution/?ref=outindfooter>GFG Corporate Solution</a></li><li><a href=https://www.geeksforgeeks.org/campus-training-program/?ref=outindfooter>Placement Training Program</a></li><li><a href=https://www.geeksforgeeks.org/community/?ref=outindfooter>GeeksforGeeks Community</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/introduction-to-programming-languages/?ref=outindfooter>Languages</a></li><li><a href=https://www.geeksforgeeks.org/python-programming-language/?ref=outindfooter>Python</a></li><li><a href=https://www.geeksforgeeks.org/java/?ref=outindfooter>Java</a></li><li><a href=https://www.geeksforgeeks.org/c-plus-plus/?ref=outindfooter>C++</a></li><li><a href=https://www.geeksforgeeks.org/php-tutorials/?ref=outindfooter>PHP</a></li><li><a href=https://www.geeksforgeeks.org/golang/?ref=outindfooter>GoLang</a></li><li><a href=https://www.geeksforgeeks.org/sql-tutorial/?ref=outindfooter>SQL</a></li><li><a href=https://www.geeksforgeeks.org/r-tutorial/?ref=outindfooter>R Language</a></li><li><a href=https://www.geeksforgeeks.org/android-tutorial/?ref=outindfooter>Android Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/geeksforgeeks-online-tutorials-free/?ref=outindfooter>Tutorials Archive</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/learn-data-structures-and-algorithms-dsa-tutorial/?ref=outindfooter>DSA</a></li><li><a href=https://www.geeksforgeeks.org/data-structures/?ref=outindfooter>Data Structures</a></li><li><a href=https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=outindfooter>Algorithms</a></li><li><a href=https://www.geeksforgeeks.org/complete-guide-to-dsa-for-beginners/?ref=outindfooter>DSA for Beginners</a></li><li><a href=https://www.geeksforgeeks.org/basic-coding-problems-in-dsa-for-beginners/?ref=outindfooter>Basic DSA Problems</a></li><li><a href=https://www.geeksforgeeks.org/complete-roadmap-to-learn-dsa-from-scratch/?ref=outindfooter>DSA Roadmap</a></li><li><a href=https://www.geeksforgeeks.org/top-100-data-structure-and-algorithms-dsa-interview-questions-topic-wise/?ref=outindfooter>Top 100 DSA Interview Problems</a></li><li><a href=https://www.geeksforgeeks.org/dsa-roadmap-for-beginner-to-advanced-by-sandeep-jain/?ref=outindfooter>DSA Roadmap by Sandeep Jain</a></li><li><a href=https://www.geeksforgeeks.org/geeksforgeeks-master-sheet-list-of-all-cheat-sheets/?ref=outindfooter>All Cheat Sheets</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/ai-ml-ds/?ref=outindfooter>Data Science & ML</a></li><li><a href=https://www.geeksforgeeks.org/data-science-tutorial/?ref=outindfooter>Data Science With Python</a></li><li><a href=https://www.geeksforgeeks.org/data-science-for-beginners/?ref=outindfooter>Data Science For Beginner</a></li><li><a href=https://www.geeksforgeeks.org/machine-learning/?ref=outindfooter>Machine Learning</a></li><li><a href=https://www.geeksforgeeks.org/machine-learning-mathematics/?ref=outindfooter>ML Maths</a></li><li><a href=https://www.geeksforgeeks.org/python-data-visualization-tutorial/?ref=outindfooter>Data Visualisation</a></li><li><a href=https://www.geeksforgeeks.org/pandas-tutorial/?ref=outindfooter>Pandas</a></li><li><a href=https://www.geeksforgeeks.org/numpy-tutorial/?ref=outindfooter>NumPy</a></li><li><a href=https://www.geeksforgeeks.org/natural-language-processing-nlp-tutorial/?ref=outindfooter>NLP</a></li><li><a href=https://www.geeksforgeeks.org/deep-learning-tutorial/?ref=outindfooter>Deep Learning</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/web-technology/?ref=outindfooter>Web Technologies</a></li><li><a href=https://www.geeksforgeeks.org/html/?ref=outindfooter>HTML</a></li><li><a href=https://www.geeksforgeeks.org/css/?ref=outindfooter>CSS</a></li><li><a href=https://www.geeksforgeeks.org/javascript/?ref=outindfooter>JavaScript</a></li><li><a href=https://www.geeksforgeeks.org/typescript/?ref=outindfooter>TypeScript</a></li><li><a href=https://www.geeksforgeeks.org/learn-reactjs/?ref=outindfooter>ReactJS</a></li><li><a href=https://www.geeksforgeeks.org/nextjs/?ref=outindfooter>NextJS</a></li><li><a href=https://www.geeksforgeeks.org/bootstrap/?ref=outindfooter>Bootstrap</a></li><li><a href=https://www.geeksforgeeks.org/web-design/?ref=outindfooter>Web Design</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/python-programming-language/?ref=outindfooter>Python Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/python-programming-examples/?ref=outindfooter>Python Programming Examples</a></li><li><a href=https://www.geeksforgeeks.org/python-projects-beginner-to-advanced/?ref=outindfooter>Python Projects</a></li><li><a href=https://www.geeksforgeeks.org/python-tkinter-tutorial/?ref=outindfooter>Python Tkinter</a></li><li><a href=https://www.geeksforgeeks.org/python-web-scraping-tutorial/?ref=outindfooter>Web Scraping</a></li><li><a href=https://www.geeksforgeeks.org/opencv-python-tutorial/?ref=outindfooter>OpenCV Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/python-interview-questions/?ref=outindfooter>Python Interview Question</a></li><li><a href=https://www.geeksforgeeks.org/django-tutorial/?ref=outindfooter>Django</a></li></ul></div><div class="footer-wrapper_links" style="justify-content: space-between; text-align: -webkit-left;"><ul class="footer-wrapper_links-list" style="margin-block-start: 0em; width:16%; padding-inline-start: 18px;"><li>Computer Science</li><li><a href=https://www.geeksforgeeks.org/operating-systems/?ref=outindfooter>Operating Systems</a></li><li><a href=https://www.geeksforgeeks.org/computer-network-tutorials/?ref=outindfooter>Computer Network</a></li><li><a href=https://www.geeksforgeeks.org/dbms/?ref=outindfooter>Database Management System</a></li><li><a href=https://www.geeksforgeeks.org/software-engineering/?ref=outindfooter>Software Engineering</a></li><li><a href=https://www.geeksforgeeks.org/digital-electronics-logic-design-tutorials/?ref=outindfooter>Digital Logic Design</a></li><li><a href=https://www.geeksforgeeks.org/engineering-mathematics-tutorials/?ref=outindfooter>Engineering Maths</a></li><li><a href=https://www.geeksforgeeks.org/software-development/?ref=outindfooter>Software Development</a></li><li><a href=https://www.geeksforgeeks.org/software-testing-tutorial/?ref=outindfooter>Software Testing</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/devops-tutorial/?ref=outindfooter>DevOps</a></li><li><a href=https://www.geeksforgeeks.org/git-tutorial/?ref=outindfooter>Git</a></li><li><a href=https://www.geeksforgeeks.org/linux-tutorial/?ref=outindfooter>Linux</a></li><li><a href=https://www.geeksforgeeks.org/aws-tutorial/?ref=outindfooter>AWS</a></li><li><a href=https://www.geeksforgeeks.org/docker-tutorial/?ref=outindfooter>Docker</a></li><li><a href=https://www.geeksforgeeks.org/kubernetes-tutorial/?ref=outindfooter>Kubernetes</a></li><li><a href=https://www.geeksforgeeks.org/microsoft-azure/?ref=outindfooter>Azure</a></li><li><a href=https://www.geeksforgeeks.org/google-cloud-platform-tutorial/?ref=outindfooter>GCP</a></li><li><a href=https://www.geeksforgeeks.org/devops-roadmap/?ref=outindfooter>DevOps Roadmap</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/system-design-tutorial/?ref=outindfooter>System Design</a></li><li><a href=https://www.geeksforgeeks.org/what-is-high-level-design-learn-system-design/?ref=outindfooter>High Level Design</a></li><li><a href=https://www.geeksforgeeks.org/what-is-low-level-design-or-lld-learn-system-design/?ref=outindfooter>Low Level Design</a></li><li><a href=https://www.geeksforgeeks.org/unified-modeling-language-uml-introduction/?ref=outindfooter>UML Diagrams</a></li><li><a href=https://www.geeksforgeeks.org/system-design-interview-guide/?ref=outindfooter>Interview Guide</a></li><li><a href=https://www.geeksforgeeks.org/software-design-patterns/?ref=outindfooter>Design Patterns</a></li><li><a href=https://www.geeksforgeeks.org/object-oriented-analysis-and-design/?ref=outindfooter>OOAD</a></li><li><a href=https://www.geeksforgeeks.org/system-design-interview-bootcamp-guide/?ref=outindfooter>System Design Bootcamp</a></li><li><a href=https://www.geeksforgeeks.org/most-commonly-asked-system-design-interview-problems-questions/?ref=outindfooter>Interview Questions</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/technical-interview-preparation/?ref=outindfooter>Inteview Preparation</a></li><li><a href=https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=outindfooter>Competitive Programming</a></li><li><a href=https://www.geeksforgeeks.org/top-algorithms-and-data-structures-for-competitive-programming/?ref=outindfooter>Top DS or Algo for CP</a></li><li><a href=https://www.geeksforgeeks.org/company-wise-recruitment-process/?ref=outindfooter>Company-Wise Recruitment Process</a></li><li><a href=https://www.geeksforgeeks.org/company-preparation/?ref=outindfooter>Company-Wise Preparation</a></li><li><a href=https://www.geeksforgeeks.org/aptitude-questions-and-answers/?ref=outindfooter>Aptitude Preparation</a></li><li><a href=https://www.geeksforgeeks.org/puzzles/?ref=outindfooter>Puzzles</a></li></ul><ul class="footer-wrapper_links-list" ><li>School Subjects</li><li><a href=https://www.geeksforgeeks.org/maths/?ref=outindfooter>Mathematics</a></li><li><a href=https://www.geeksforgeeks.org/physics/?ref=outindfooter>Physics</a></li><li><a href=https://www.geeksforgeeks.org/chemistry/?ref=outindfooter>Chemistry</a></li><li><a href=https://www.geeksforgeeks.org/biology/?ref=outindfooter>Biology</a></li><li><a href=https://www.geeksforgeeks.org/social-science/?ref=outindfooter>Social Science</a></li><li><a href=https://www.geeksforgeeks.org/english-grammar/?ref=outindfooter>English Grammar</a></li><li><a href=https://www.geeksforgeeks.org/commerce/?ref=outindfooter>Commerce</a></li><li><a href=https://www.geeksforgeeks.org/tag/world-general-knowledge/?ref=outindfooter>World GK</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/videos/?ref=outindfooter>GeeksforGeeks Videos</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/sde-sheet/?ref=outindfooter>DSA</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/python/?ref=outindfooter>Python</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/java-w6y5f4/?ref=outindfooter>Java</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/c/?ref=outindfooter>C++</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/web-development/?ref=outindfooter>Web Development</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/data-science/?ref=outindfooter>Data Science</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/cs-subjects/?ref=outindfooter>CS Subjects</a></li></ul></div> </div> </div>  <style> :root{ --home-jobs-section-jf-logo: url('https://media.geeksforgeeks.org/auth-dashboard-uploads/JobFair2024Logo.svg'); } body[data-dark-mode="true"] { --home-jobs-section-jf-logo: url('https://media.geeksforgeeks.org/auth-dashboard-uploads/JobFair2024LogoDark.svg'); } .hp_job_section_jf_logo, .job-a-thon-jf-sticky-header-logo{ background: var(--home-jobs-section-jf-logo); height: 50px; background-repeat: no-repeat; width: 105px; background-size: 100px; } @keyframes challenge { 0%{ transform: scale(1); } 50%{ transform: scale(1.03); } 100%{ transform: scale(1); } } .job-a-thon-jf-sticky-header-logo{ height: 45px; } </style>  <div class="footer-strip" > <div class="copyright"> <a href="https://www.geeksforgeeks.org/" rel="noopener noreferrer" target="_blank">@GeeksforGeeks, Sanchhaya Education Private Limited</a><span>, <a href="https://www.geeksforgeeks.org/copyright-information/">All rights reserved</a></span> </div> <div class="social-links"> </div> </div> </footer> </div> <script type='text/javascript' src='https://www.geeksforgeeks.org/wp-includes/js/wp-embed.min.js?ver=4.9.8'></script>  <div class="cookie-consent hide-consent"> <span class="cookie-text"> We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our <a href="https://www.geeksforgeeks.org/cookie-policy/" target="_blank"><u>Cookie Policy</u></a> & <a href="https://www.geeksforgeeks.org/privacy-policy/" target="_blank"><u>Privacy Policy</u></a> </span> <button class="consent-btn"> Got It ! </button> </div>   <div class="lightbox-target"> <img id="lightbox-image" src="" alt="Lightbox"/> <span class="lightbox-close"></span> </div>   <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet"> <script> if(post_slug.includes('premium-plans-payment/') || post_slug.includes('premium-plans/')){ $('.darkMode-wrap').remove(); $('.toggle-darkMode').remove(); } function setGoogleRecaptcha() { var captchaSiteKey = '6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY'; grecaptcha.ready(function() { grecaptcha.execute(captchaSiteKey).then(function(token) { document.getElementById('g-recaptcha-response-suggestion-form').value = token; suggestionCall(); }); }); } </script> <div class="improve-modal--overlay" style="display: none;"> <div class="improve-modal--improvement" status="locked"> <div class="improve-modal--improve-header"> <div class="improve-header-fst-child">Improvement</div> <div class="improve-header-sec-child"> <i class="gfg-icon improve-cross-icon"></i> </div> </div> <div class="locked-status--impove-modal"> <div class="improve-modal--improve-content error-message"></div> <div class="improve-modal--improve-bottom"> <button class="improve-bottom-btn" type="button">Suggest changes</button> </div> </div> <div class="unlocked-status--improve-modal-content"> <div class="suggest-change_wrapper"> <div class="suggest-change-content_wrapper"> <div class="suggest-change">Suggest Changes</div> <div class="suggest-changes-about">Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.</div> </div> <div class="suggest-change-icon_wrapper"> <img class="suggest-change-icon" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/suggestChangeIcon.png" alt="geeksforgeeks-suggest-icon"/> </div> </div> <div class="create-improvement_wrapper"> <div class="create-improvement-content_wrapper"> <div class="create-improvement">Create Improvement</div> <div class="create-improvements-about">Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.</div> </div> <div class="create-improvement-icon_wrapper"> <img class="create-improvement-icon" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/createImprovementIcon.png" alt="geeksforgeeks-improvement-icon"/> </div> </div> <div class="error-status"></div> </div> </div> <div class="improve-modal--suggestion" style="display: none;">  <div class="improve-modal--improve-header"> <div class="left-arrow-icon_suggest_wrapper"> <div class="left-arrow-icon_wrapper"> <i class="gfg-icon improve-left-arrow-icon"></i> </div> <div class="improve-header-fst-child">Suggest Changes</div> </div> <div class="improve-header-sec-child"> <i class="gfg-icon improve-cross-icon"></i> </div> </div> <div class="suggestion-modal-section"> <form> <label for="suggestion-section">min 4 words, max CharLimit:2000</label> <textarea id="suggestion-section-textarea" name="suggestion-section" placeholder="Write your suggestions here"></textarea> <input type="hidden" name="g-recaptcha-suggestion-response" id="g-recaptcha-response-suggestion-form"> </form> </div>  <div class="improve-modal--improve-bottom suggestion-btn"> <p><span id="suggestion-modal-alert" style="display: none;"></span></p> <button class="suggest-bottom-btn" type="button"></button> </div> </div> <a href="#" style="visibility:hidden" class="create-improvement-redirection-to-write" target="_blank"></a> </div> <script> var lockedCasesHtml = `<span class="improve-modal--improve-content-modified"></span><span>You can suggest the changes for now and it will be under 'My Suggestions' Tab on Write.</span><br><br><span>You will be notified via email once the article is available for improvement. Thank you for your valuable feedback!</span>`; var badgesRequiredHtml = `<span>It seems that you do not meet the eligibility criteria to create improvements for this article, as only users who have earned specific badges are permitted to do so.</span><br><br><span>However, you can still create improvements through the <a href="https://write.geeksforgeeks.org/pick-improvements/pick" target='_blank'>Pick for Improvement</a> section.</span>`; jQuery('.improve-header-sec-child').on('click', function(){ jQuery('.improve-modal--overlay').hide(); $('.improve-modal--suggestion').hide(); }); $('.suggest-change_wrapper, .locked-status--impove-modal .improve-bottom-btn').on('click',function(){ // when suggest changes option is clicked $('#suggestion-section-textarea').val(""); $('.suggest-bottom-btn').html("Suggest changes"); $('.improve-modal--improvement').hide(); $('.improve-modal--suggestion').show(); }); $('.create-improvement_wrapper').on('click',function(){ // when create improvement option clicked then improvement reason will be shown if(loginData && loginData.isLoggedIn) { $('body').append('<div class="spinner-loading-overlay"></div>'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status) }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ } $('.improve-modal--improvement').show(); }); const showErrorMessage = (result,statusCode) => { if(!result) return; $('.spinner-loading-overlay:eq(0)').remove(); if(statusCode == 403) { $('.improve-modal--improve-content.error-message').html(result.message); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); return; } } function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `<p>${suggest_val}</p>`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = ` <div class="thank-you-message" style="text-align: center;"> <h2>Thank You!</h2> <div class="thank-you-message-content">Your suggestions are valuable to us.</div> </div> `; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('<div class="spinner-loading-overlay"></div>'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('<div class="spinner-loading-overlay"></div>'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status); }, }); }); </script> <script> var AdblockPlus = new function() { this.detect = function(px, callback) { var detected = false; var checksRemain = 2; var error1 = false; var error2 = false; if (typeof callback != "function") return; px += "?ch=*&rn=*"; function beforeCheck(callback, timeout) { if (checksRemain == 0 || timeout > 1E3) callback(checksRemain == 0 && detected); else setTimeout(function() { beforeCheck(callback, timeout * 2) }, timeout * 2) } function checkImages() { if (--checksRemain) return; detected = !error1 && error2 } var random = Math.random() * 11; var img1 = new Image; img1.onload = checkImages; img1.onerror = function() { error1 = true; checkImages() }; img1.src = px.replace(/\*/, 1).replace(/\*/, random); var img2 = new Image; img2.onload = checkImages; img2.onerror = function() { error2 = true; checkImages() }; img2.src = px.replace(/\*/, 2).replace(/\*/, random); beforeCheck(callback, 250) } }; /* AdblockPlus.detect("https://cdnads.geeksforgeeks.org/res/px.gif", function(abp){ window.googletag = window.googletag || {cmd: []}; window.abp=abp; var elms = [...document.querySelectorAll('div[id^=_GFG_ABP_]')]; const units=elms.map(elem=>elem.id) if(abp) { for(let curr_unit of units) { const iframe = document.createElement('iframe'); iframe.setAttribute('src',"https://aa.geeksforgeeks.org/iframe.html?code="+curr_unit.substr(1)) const elem = document.getElementById(curr_unit) const div = document.createElement('div'); div.setAttribute('id',curr_unit.substr(1)) let sizes = curr_unit.split("_"); sizes = sizes.filter(val => val.includes('x')); let [width, height] = sizes[0].split("x"); iframe.style.width = `${+width+20}px` iframe.style.height = `${+height+20}px` if(elem) { elem.appendChild(iframe); } } var gfgAdDivs = [...document.querySelectorAll('div[id^=GFG_AD_]')]; gfgAdDivs.forEach(gfgDiv => document.getElementById(gfgDiv.id).removeAttribute("style")); jQuery('#secondary .widget_text:last-child').css({"position": "unset"}); } });*/ AdblockPlus.detect("https://cdnads.geeksforgeeks.org/res/px.gif", function(abp){ window.googletag = window.googletag || {cmd: []}; window.abp=abp; var elms = [...document.querySelectorAll('div[id^=_GFG_ABP_]')]; //const units=elms.map(elem=>elem.id) const units = elms .filter(elem => !(window.innerWidth < 1500 && elem.id === "_GFG_ABP_Incontent_728x90")) .map(elem => elem.id); if(abp) { isAdBlockerPresent = true; for(let curr_unit of units) { const iframe = document.createElement('iframe'); iframe.addEventListener("load", () => { iframe.contentWindow.postMessage(JSON.stringify({host: window.location.host,category: window.arrPostCatName,parentWidth: window.innerWidth}),'https://aa.geeksforgeeks.org'); }); iframe.setAttribute('src',"https://aa.geeksforgeeks.org/iframe.html?code="+curr_unit.substr(1)) const elem = document.getElementById(curr_unit) const div = document.createElement('div'); div.setAttribute('id',curr_unit.substr(1)) let sizes = curr_unit.split("_"); sizes = sizes.filter(val => val.includes('x')); let [width, height] = sizes[0].split("x"); iframe.style.width = `${+width+20}px` iframe.style.height = `${+height+20}px` if(elem) { elem.appendChild(iframe); } } var gfgAdDivs = [...document.querySelectorAll('div[id^=GFG_AD_]')]; gfgAdDivs.forEach(gfgDiv => document.getElementById(gfgDiv.id).removeAttribute("style")); jQuery('#secondary .widget_text:last-child').css({"position": "unset"}); } else{ try { var isAdblockEnabled = t => fetch( new Request('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', { method: 'HEAD', mode: 'no-cors' }) ).catch(t); isAdblockEnabled(() => { // here goes modal pop-up code isAdBlockerPresent = true; }); } catch (err) {console.log(err);} } }); function closeAdBlockPopupModal(){ const modal = document.getElementById("adBlockerModal"); $('body').removeClass('body-for-ad-blocker'); $('#adBlockerModal').remove() localStorage.setItem('gfgAdBlockPopup',new Date()) } function showAdblockerModal(){ let randomNumberForButtonText = Math.round(Math.random()); let currTime = new Date(); let lastTime = new Date(localStorage.getItem('gfgAdBlockPopup')); if(((currTime-lastTime)/(1000*60*60))<1) { return; } const adBlockerModal = `<div id="adBlockerModal" class="ad-blocker-modal"> <div id="ad-blocker-modal-overlay"> <div id="ad-blocker-outer-div"> <div id="ad-blocker-div"> <p id="ad-blocker-div-warning" style="margin-bottom: 30px;">It seems that you are using an ad blocker.<br><span style="font-size: 22px;font-weight: normal;">Please disable it to support us!</span></p> <div id="ad-blocker-div-btns"> <button id="ad-blocker-div-button1" onclick="handleAdBlockerClick('disabled')"> I disabled my ad blocker </button> <a href="https://www.geeksforgeeks.org/geeksforgeeks-premium-subscription${randomNumberForButtonText === 1 ? "/?itm_source=geeksforgeeks&itm_medium=adblocker&itm_campaign=premium1" : "/?itm_source=geeksforgeeks&itm_medium=adblocker&itm_campaign=premium2"}" target="_blank"> <button id="ad-blocker-div-button2" style=" background: linear-gradient(45deg, #f0bd36, #bf873f); border: 1px solid transparent; color: white; " > ${randomNumberForButtonText === 1 ? "Go Ad-Free with Premium" : "Upgrade for No Ads"} </button> </a> </div> <div id="ad-blocker-div-continue-premium-promo-text"> "For an ad-free experience and exclusive features, subscribe to our Premium Plan!"<br> </div> <div id="ad-blocker-div-continue-btn-div"> <a id="ad-blocker-div-continue-btn" href="#" onclick="closeAdBlockPopupModal()">Continue without supporting</a> </div> </div> </div> </div> </div>`; $('body').append(adBlockerModal); $('body').addClass('body-for-ad-blocker'); const modal = document.getElementById("adBlockerModal"); modal.style.display = "block"; } function handleAdBlockerClick(type){ if(type == 'disabled'){ window.location.reload(); } else if(type == 'info'){ document.getElementById("ad-blocker-div").style.display = "none"; document.getElementById("ad-blocker-info-div").style.display = "flex"; handleAdBlockerIconClick(0); } } var lastSelected= null; //Mapping of name and video URL with the index. const adBlockerVideoMap = [ ['Ad Block Plus','https://media.geeksforgeeks.org/auth-dashboard-uploads/abp-blocker-min.mp4'], ['Ad Block','https://media.geeksforgeeks.org/auth-dashboard-uploads/Ad-block-min.mp4'], ['uBlock Origin','https://media.geeksforgeeks.org/auth-dashboard-uploads/ub-blocke-min.mp4'], ['uBlock','https://media.geeksforgeeks.org/auth-dashboard-uploads/U-blocker-min.mp4'], ] function handleAdBlockerIconClick(currSelected){ const videocontainer = document.getElementById('ad-blocker-info-div-gif'); const videosource = document.getElementById('ad-blocker-info-div-gif-src'); if(lastSelected != null){ document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.backgroundColor = "white"; document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.borderColor = "#D6D6D6"; } document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.backgroundColor = "#D9D9D9"; document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.borderColor = "#848484"; document.getElementById('ad-blocker-info-div-name-span').innerHTML = adBlockerVideoMap[currSelected][0] videocontainer.pause(); videosource.setAttribute('src', adBlockerVideoMap[currSelected][1]); videocontainer.load(); videocontainer.play(); lastSelected = currSelected; } </script>  <style> /* Temporary CSS for Three90 pop up modal (START)*/ .three90popup__container { width: 100vw; height: 100vh; position: fixed; top:0px; background: var(--job-tab-faded-background); z-index: 1024; display: flex; align-items: center; justify-content: center; } .three90modal__wrapper{ background-color: white; max-width: 350px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; } .three90modal__message-container { display: flex; flex-direction: column; align-items: center; font-family: var(--font-primary); } .three90modal__subheading { margin-top: 20px; font-size: 22px; font-weight: 600; } .three90modal__text-message { margin-top: 20px; font-size: 15px; font-weight: 400; text-align: center; padding: 0 5px; } .three90__modal__button-wrapper { width: 100%; padding: 20px 0px; display: flex; justify-content: space-evenly; } .three90__modal__button-wrapper > button { width: 105px; height: 35px; border-radius: 13px; border:none; font-weight: 600; cursor: pointer; } #three90__modal-close-btn:hover { background-color: #cacbcd; } #three90__modal-explore-btn { background-color: #0a0727; color: white } @media screen and (max-width: 441px) { .three90modal__wrapper { max-width: 300px; } } /* Temporary CSS for Three90 pop up modal (END)*/ </style> <script type="text/javascript" > const coursePromotionCities = JSON.parse(`{"NCR":{"LOCATIONS":["Noida","Greater Noida","Ghaziabad","Faridabad","Delhi","New Delhi"],"COURSES":[{"name":"GATE CS 2025 Classroom Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/gate-cs-self-paced"},{"name":"MERN Full Stack Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom"},{"name":"DSA For Interview Preparation","url":" https:\/\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom"},{"name":"JAVA Backend Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-java-backend-development-program"},{"name":"Data Analytics Programme","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program"},{"name":"AWS Solutions Architect Certification","url":"https:\/\/www.geeksforgeeks.org\/courses\/aws-solutions-architect-certification-classroom-training"},{"name":"Explore All","url":"https:\/\/www.geeksforgeeks.org\/courses\/offline-courses"}]},"NON_NCR":{"Bengaluru":[{"name":"Data Science Classroom Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/data-science-classroom-program"},{"name":"System Design Classroom Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/system-design-classroom-program"},{"name":"MERN Full Stack Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom"},{"name":"DSA For Interview Preparation","url":"https:\/\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom"},{"name":"JAVA Backend Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-java-backend-development-program"},{"name":"Data Analytics Programme","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program"},{"name":"AWS Solutions Architect Certification","url":"https:\/\/www.geeksforgeeks.org\/courses\/aws-solutions-architect-certification-classroom-training"},{"name":"Explore All","url":"https:\/\/www.geeksforgeeks.org\/courses\/offline-courses"}],"Pune":[{"name":"MERN Full Stack Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom"},{"name":"DSA For Interview Preparation","url":"https:\/\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom"},{"name":"Complete Data Analytics Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program"},{"name":"Explore All","url":"https:\/\/www.geeksforgeeks.org\/courses\/offline-courses"}]}}`); const offlineCourseTermMapper = JSON.parse(`{"ALL_TERMIDS":["2058","6263","2628","1745","1789","2601","2057","5037","2971","2023","2162","2795"],"COURSE_TERMID_MAP":{"JAVA":["2058"],"DATA_ANALYTICS":["1745","1789","2601","2057","5037","2971","2023","2162","2795"],"DSA":["6263"],"MERN":["2628"]}}`); </script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KDVRCT5');</script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-DWCCJLKX3X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); // gtag('config', 'AW-474915276'); gtag('config', 'G-DWCCJLKX3X'); gtag('config', 'AW-796001856'); </script>  <div id="GFG_AD_Desktop_Stickyunit_1x1"></div>   <style> :root { --com-extra-icons-mobile-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/Com-Extra-Icons13.svg); --write-experience-card-1: #ECF5F5; --write-experience-card-icon-1: #21898C; --write-experience-card-2: #EAF2F7; --write-experience-card-icon-2: #3079AC; --write-experience-card-3: #FDEFE6; --write-experience-card-icon-3: #F5A572; --write-experience-card-4: #F1F8F5; --write-experience-card-icon-4: #91C4AD; --write-experience-card-5: #EEE7FF; --write-experience-card-icon-5: #8B72C9; --write-experience-card-6: #F2F8E6; --write-experience-card-icon-6: #78C57F; --editor-button-text-color: #6E6E73; --write-modal-background: #fefefe; --experience-sidebar: #000; --left-bar-background: #FFFFFF; --write-redirect-container:#EAF2F7; --write-redirect-container-hover:#d6e7f2; } /* Dark Mode */ body[data-dark-mode="true"] { --write-modal-background: #161c23; --experience-sidebar: #000; --left-bar-background: #F0F3F5; } .popup-main { padding: 20px 18px 20px 18px; border-radius: 8px; } .popup-main .popup-heading { display: flex; align-items: center; color: #E9E9EA; margin-bottom: 10px; justify-content: space-between; } .popup-main .close-icon { background-image: var(--com-extra-icons-mobile-image);background-position: -15px -1651px;height: 22px;width: 22px;transform: scale(1); margin-bottom: 12px; cursor: pointer; } .popup-main .experience-card { color: #000; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; /* margin-bottom:10px; */ } .popup-main a:hover, .popup-main a:active, .popup-main a:visited { color: inherit; text-decoration: none; } .popup-main .exp-card1, .popup-main .exp-card2, .popup-main .exp-card3, .popup-main .exp-card4, .popup-main .exp-card5, .popup-main .exp-card6 { display: flex; align-items: center; border-radius: 10px; cursor: pointer; } .popup-main .exp-card1 .icon1, .popup-main .exp-card2 .icon2, .popup-main .exp-card3 .icon3, .popup-main .exp-card4 .icon4, .popup-main .exp-card5 .icon5, .popup-main .exp-card6 .icon6 { width: 80px; height: 80px; border-radius: 10px 0px 0px 10px; display: flex; align-items: center; justify-content: center; background: var(--write-experience-card-icon-1); } .popup-main .exp-card1 .icon1, .popup-main .exp-card2 .icon2, .popup-main .exp-card3 .icon3, .popup-main .exp-card4 .icon4, .popup-main .exp-card5 .icon5, .popup-main .exp-card6 .icon6 { width: 80px; height: 80px; border-radius: 10px 0px 0px 10px; display: flex; align-items: center; justify-content: center; } .popup-main .exp-card1 .icon1 { background: var(--write-experience-card-icon-1); } .popup-main .exp-card2 .icon2 { background: var(--write-experience-card-icon-2); } .popup-main .exp-card3 .icon3 { background: var(--write-experience-card-icon-3); } .popup-main .exp-card4 .icon4 { background: var(--write-experience-card-icon-4); } .popup-main .exp-card5 .icon5 { background: var(--write-experience-card-icon-5); } .popup-main .exp-card6 .icon6 { background: var(--write-experience-card-icon-6); } .popup-main .exp-card6 .icon6-image { background-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/compass.svg); width: 46px; height: 30px; background-size: 30px; background-repeat: no-repeat; background-position: center; } .popup-main .exp-card1 .icon1-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -812px; } .popup-main .exp-card2 .icon2-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -888px; } .popup-main .exp-card3 .icon3-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -848px; } .popup-main .exp-card4 .icon4-image { background-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/competitive.svg); width: 46px; height: 30px; background-size: 30px; background-repeat: no-repeat; background-position: center; } .popup-main .exp-card5 .icon5-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 33px; background-position: -4px -1217px; } .popup-main .exp-card1 .exp-card1-text, .popup-main .exp-card2 .exp-card2-text, .popup-main .exp-card3 .exp-card3-text, .popup-main .exp-card4 .exp-card4-text, .popup-main .exp-card5 .exp-card5-text, .popup-main .exp-card6 .exp-card6-text { display: flex; align-items: center; border-radius: 0px 10px 10px 0px; height: 80px; width: calc(100% - 80px); } .popup-main .exp-card1 { justify-content: flex-start; background: var(--write-experience-card-1); } .popup-main .exp-card2 { justify-content: flex-start; background: var(--write-experience-card-2); } .popup-main .exp-card3 { justify-content: flex-start; background: var(--write-experience-card-3); } .popup-main .exp-card4 { justify-content: flex-start; background: var(--write-experience-card-4); } .popup-main .exp-card5 { justify-content: flex-start; background: var(--write-experience-card-5); } .popup-main .exp-card6 { justify-content: flex-start; background: var(--write-experience-card-6); } .popup-main span { font-family: var(--font-primary); font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; padding-left: 5px; padding-right: 5px; } #popup { display: none; background-color: var(--write-modal-background); padding: 20px; text-align: center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1026; width: min(650px, calc(100% - 20px)); } .link-container-write{ display:flex; flex-direction:column; } .link-container-write > a { margin:7px 0px; } .phrase__container{ color:var(--color-gfg); border-radius: 6px; width: 100%; background-color:var(--write-redirect-container); padding: 15px; text-align: justify; font-size:14px; } .phrase__container:hover { color:var(--color-gfg) !important; background-color:var(--write-redirect-container-hover); } </style> <div class="popup-container"> <div id="popup" accesskey="" class="popup-main"> <div class="popup-heading"> <h2>What kind of Experience do you want to share?</h2> <div class="close-icon share-experience-modal-close"></div> </div>  <div class="experience-card"> <a class="exp-card5" href= "https://write.geeksforgeeks.org/posts-new?cid=e8fc46fe-75e7-4a4b-be3c-0c862d655ed0" target="_blank"> <div class="icon5"> <div class="icon5-image"></div> </div> <div class="exp-card5-text"> <span style="color: #000;">Interview Experiences</span> </div> </a> <a class="exp-card1" href="https://write.geeksforgeeks.org/posts-new?cid=82536bdb-84e6-4661-87c3-e77c3ac04ede" target="_blank"> <div class="icon1"> <div class="icon1-image"></div> </div> <div class="exp-card1-text"> <span style="color: #000;">Admission Experiences</span> </div> </a> <a class="exp-card6" href= "https://write.geeksforgeeks.org/posts-new?cid=5219b0b2-7671-40a0-9bda-503e28a61c31" target="_blank"> <div class="icon6"> <div class="icon6-image"></div> </div> <div class="exp-card6-text"> <span style="color: #000;">Career Journeys</span> </div> </a> <a class="exp-card2" href="https://write.geeksforgeeks.org/posts-new?cid=22ae3354-15b6-4dd4-a5b4-5c7a105b8a8f" target="_blank"> <div class="icon2"> <div class="icon2-image"></div> </div> <div class="exp-card2-text"> <span style="color: #000;">Work Experiences</span> </div> </a> <a class="exp-card3" href= "https://write.geeksforgeeks.org/posts-new?cid=c5e1ac90-9490-440a-a5fa-6180c87ab8ae" target="_blank"> <div class="icon3"> <div class="icon3-image"></div> </div> <div class="exp-card3-text"> <span style="color: #000;">Campus Experiences</span> </div> </a> <a class="exp-card4" href= "https://write.geeksforgeeks.org/posts-new?cid=5ebb8fe9-b980-4891-af07-f2d62a9735f2" target="_blank"> <div class="icon4"> <div class="icon4-image"></div> </div> <div class="exp-card4-text"> <span style="color: #000;">Competitive Exam Experiences</span> </div> </a> </div>  </div> <div id="overlay" onclick="toggleExperiencePopup()" style="display: block;min-height: 100vh;min-width: 100vw;position: fixed;top: 0;bottom: 0;right: 0;left: 0;display: none;justify-content: center;align-items: center;background: rgba(0,0,0,.702);z-index: 1025 !important;backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);word-break: keep-all;"></div> </div> <script> $('.share-experience-modal').click(function(e){ e.preventDefault(); var link = $(this).attr('href'); toggleExperiencePopup(link); }); function toggleExperiencePopup(link) { var popup = document.getElementById("popup"); var overlay = document.getElementById("overlay"); if (window.innerWidth < 992) { window.location.href = link; } else { popup.style.display = (popup.style.display === "block") ? "none" : "block"; overlay.style.display = (overlay.style.display === "block") ? "none" : "block"; } } $('.share-experience-modal-close').click(function(e){ var popup = document.getElementById("popup"); popup.style.display = 'none'; var overlay = document.getElementById("overlay"); overlay.style.display = 'none'; }); </script> </div><script type="text/javascript"> $(window).on('load', function() { (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "ayc7ypwwuk"); }); </script>  </body> </html>

CINXE.COM

React Tutorial - GeeksforGeeks