{"componentChunkName":"component---packages-blog-core-src-templates-post-js","path":"/reactjs-an-introduction/","result":{"data":{"post":{"__typename":"MdxArticleProxy","id":"af1abdd1-3bc9-531d-a990-9059fdde2eba","title":"React.js - An Introduction","slug":"/reactjs-an-introduction/","link":null,"excerpt":"React.js is Javascript library to build UI. React handles V part of MVC. Below are the pre-requisite…","timeToRead":4,"featured":null,"thumbnailText":null,"date":"October 08, 2018","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"React.js - An Introduction\",\n  \"category\": \"Programming\",\n  \"author\": \"Arvind Pandey\",\n  \"date\": \"2018-10-08T00:00:00.000Z\",\n  \"tags\": [\"#react\", \"#programming\", \"#javascript\"],\n  \"thumbnail\": \"cover.jpeg\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"React.js is Javascript library to build UI. React handles V part of MVC. Below are the pre-requisite to get started with React.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"HTML\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"CSS\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Javascript\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Node.js (Basics)\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Node package manager (npm)\")), mdx(\"p\", null, \"If you want to brush up those concepts, please learn it from another source. For Javascript, I can recommend reading it from the Mozilla site. They have one of best reference material on Javascript.\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.mozilla.org/bm/docs/Web/JavaScript\"\n  }), \"Mozilla Javascript Tutorial\")), mdx(\"p\", null, \"In fact, they have material for node.js as well. For React you don\\u2019t need in-depth knowledge of Node but knowing how to import a module is important. Once you have covered the basics of the above concepts. You need to install Node in your machine to have npm.\"), mdx(\"p\", null, \"Anyway, here is a bit about Node.\"), mdx(\"h3\", {\n    \"id\": \"what-is-node\"\n  }, \"What is Node?\"), mdx(\"p\", null, \"Node is the runtime environment for Javascript. With the help of Node, Javascript can perform server-side tasks like reading and writing to files, making operating system calls etc. Before 2009, Javascript was limited to browser-side only. Then one crazy person named \", mdx(\"a\", {\n    href: \"https://en.wikipedia.org/wiki/Ryan_Dahl\",\n    target: \"_blank\"\n  }, \"Ryan Dahl\"), \" didn\\u2019t like how the I/O was done in the current servers. He presented the new paradigm in JS conference 2009. After that Javascript was never the same. If you are interested to watch the conference here is the \", mdx(\"a\", {\n    href: \"https://www.youtube.com/watch?v=ztspvPYybIY\",\n    target: \"_blank\"\n  }, \"link.\"), \" I highly recommend watching at least for a few minutes so that you can appreciate his humility. His presentation was going to change the entire ecosystem of how I/O will be done and many people like us will be making living out of it.\"), mdx(\"h3\", {\n    \"id\": \"what-is-npm\"\n  }, \"What is npm?\"), mdx(\"p\", null, \"npm stands for node package manager. As I write this article there are more than 600,000 packages available to download. When you install Node, npm will be installed with it. Below is the link to download and install Node.\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://nodejs.org/en\"\n  }), \"nodejs.org\")), mdx(\"p\", null, \"We have already completed pre-requisite for React. Let\\u2019s do some interesting stuff. Run npm command on the terminal to check npm is installed correctly. You should see the output something like below.\"), mdx(\"p\", null, mdx(\"figure\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"944px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"48.7719298245614%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABv0lEQVQoz22Sx3LCUAxF+ZeEktASAwndYBvcbVwAm5o6mcn/728kYVhlIbDeezqSrlRSZy40I4DtrOEHGSaqjbnuw7IT8XUjhDr3YDkpWYKXvoZytYPa48u/VjKWK4zGJobjpZjtrjGbuxJ0DazUuoX1UH3o/Qu6npemqgOlo1JmHf2Bgd6rJtZoDcXuyoo8ZuB9RbnB+Zz9+0rnBuP/krFYwfU2yPdf2GbvSNcnLMwIq2hP7QZUrYdme4Ruby6tK10VT8rkIgXJNZqYArpVWKZsUXKA52/hkWYxfUfxXsyh9o/nHzljDTkZ62paMeL0KPf747eAuWoB1lsDCj7IULbZRxGQSNXhaoelGQt8acXyznFTTGcOwc8YT234YS7AW4UP9Veq4Ii3919pNYwuwQwzedIUsKDBsQTsMzSgO07iBVtKGKFGsAYVJhrWmwMKysQYJK37Gwlkn7W1qd0kPUkwQ1karoqTWYXPd/Vm/wrM5YCHwu2uN2d56Ba6cjWsWb77pD11kOUfkpDv9EVI518YDA08NgjIP5fFTqndnazPrFhkjRacF13TA4JvEFBiXqUWTb39PBYAbwD710n/AdAzZFQlSUh/AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"alt text\",\n    \"title\": \"alt text\",\n    \"src\": \"/static/945f3d9c39fc0ef1f5c1c5cde183aef2/19dcc/reactintro.png\",\n    \"srcSet\": [\"/static/945f3d9c39fc0ef1f5c1c5cde183aef2/02569/reactintro.png 285w\", \"/static/945f3d9c39fc0ef1f5c1c5cde183aef2/d4f70/reactintro.png 570w\", \"/static/945f3d9c39fc0ef1f5c1c5cde183aef2/19dcc/reactintro.png 944w\"],\n    \"sizes\": \"(max-width: 944px) 100vw, 944px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }), \"alt text\"), \"\\n  \")), mdx(\"p\", null, \"We are going to start with the boilerplate code provided by Facebook. By the way, did I tell you, React was invented at Facebook, from then it\\u2019s maintained by Facebook engineers. Thanks to them.\"), mdx(\"p\", null, \"Run below command in your terminal\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"npm i create-react-app\\n\")), mdx(\"p\", null, \"If the command executed successfully then the package is installed. Now we have to create a React app. To create the app with the name \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"sample_react_app\"), \", run below command. Navigate to the created folder. Run the command npm start.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"create-react-app sample_react_app\\ncd sample_react_app\\nnpm start\\n\")), mdx(\"p\", null, \"If you point your browser to http://localhost:3000, you should see below page. In that case, your installation and setup are working well. Congratulations.\"), mdx(\"p\", null, mdx(\"figure\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1140px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"49.82456140350877%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA20lEQVQoz5WSzwqCQBjEfRp3Lc31b4ooIlQSBHXqFl06Bt269QBeeoUuPef0uWJYmG6HHwvfDrOzO6tZToRx4gYxrtXY1MMYuiEkKlqNmz4GIdE0zGFGBRiZjukHDZnhQCx2yK8V0vMNVrIEm7j/G9bRuRmAcQF/e8CqeqC8P2EXGzmr95QNGzNaCZ0SGn6G6HhBsD+Bi1i+ZatrtUoJDSuAG2Zw/QRODTXohSnN0l6jt+F3S92Upj2H5SVw8zWcrJRfp551dcotfxxCJnwWQv9xzcGEvVCzEgXtCzhTOEYbL03BAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"alt text\",\n    \"title\": \"alt text\",\n    \"src\": \"/static/998936a43cbea5eb07d36f2efd34f880/99686/reactfirst.png\",\n    \"srcSet\": [\"/static/998936a43cbea5eb07d36f2efd34f880/02569/reactfirst.png 285w\", \"/static/998936a43cbea5eb07d36f2efd34f880/d4f70/reactfirst.png 570w\", \"/static/998936a43cbea5eb07d36f2efd34f880/99686/reactfirst.png 1140w\", \"/static/998936a43cbea5eb07d36f2efd34f880/72bf7/reactfirst.png 1710w\", \"/static/998936a43cbea5eb07d36f2efd34f880/31ea7/reactfirst.png 2280w\", \"/static/998936a43cbea5eb07d36f2efd34f880/919d8/reactfirst.png 2560w\"],\n    \"sizes\": \"(max-width: 1140px) 100vw, 1140px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }), \"alt text\"), \"\\n  \")), mdx(\"p\", null, \"Next, if you open the folder and see the folder structure, it will look like below.\"), mdx(\"p\", null, mdx(\"figure\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1140px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"45.96491228070175%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABWklEQVQoz52Q2U7CYBCFeQ4ggdZQum9/90Vq1AcwISaltFQ2kfj+t8dp1aZg9MKLk3+ZmW/OzOD4ekBe1XjOKzwtc5T1HkW5RVnW2NB/WVQ4HU94P51xPhzwttthX5VYLZdYrwoU+Qovmw12W6pb1xg44R3C9BGmk4CfGxAkBlfPYMkMgmphIigYTyWMOAnDqYjhRMSI3mNexpj+WtGbm+ngqL4FBvECttcANSi6j5DdI/YzRH4K045geBE0FkDWPZL7dV5K0lzodoyBnzzAZD4008PkRmoDDgUMl5qQa8YS6EEGw7+lggiKEUBUHcwVdiUbqhl+OrS8JtHtgDYVWgRS3QwKJSmG3yY39283IknqqYG2QNWKaGSCujF4QaPurHXQqenec3QR66kDNnOHyaKF8oIKQbYvRhKvID9HZVdAFsMJ026H/YTf3PztkHbFzZROzXL/C5Rp1x/+jyEk+RojKgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"alt text\",\n    \"title\": \"alt text\",\n    \"src\": \"/static/a9018a2a99e9d4c27bf85adaa3a8f280/99686/folder.png\",\n    \"srcSet\": [\"/static/a9018a2a99e9d4c27bf85adaa3a8f280/02569/folder.png 285w\", \"/static/a9018a2a99e9d4c27bf85adaa3a8f280/d4f70/folder.png 570w\", \"/static/a9018a2a99e9d4c27bf85adaa3a8f280/99686/folder.png 1140w\", \"/static/a9018a2a99e9d4c27bf85adaa3a8f280/72bf7/folder.png 1710w\", \"/static/a9018a2a99e9d4c27bf85adaa3a8f280/31ea7/folder.png 2280w\", \"/static/a9018a2a99e9d4c27bf85adaa3a8f280/919d8/folder.png 2560w\"],\n    \"sizes\": \"(max-width: 1140px) 100vw, 1140px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }), \"alt text\"), \"\\n  \")), mdx(\"p\", null, \"Few things to note down. There are three main folders here. First is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"node_modules\"), \", it contains all the dependencies that our app will use. Second is the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"public\"), \" folder, it contains public facing code and assets. Last is the most important one \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"src\"), \" folder. Most of the time you will be working inside this folder. Under the src folder, the file index.js is the entry point for our application. If you are a beginner, don\\u2019t focus on everything right now. It will be explained in the further tutorial. I would still want to talk about one line here.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"ReactDOM.render(<App />, document.getElementById('root'));\\n\")), mdx(\"p\", null, \"Here, ReactDOM is a reference for the module \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"react-dom\"), \" which has a method called render. This method has two arguments, the first argument is what do you want to render and the second argument is where do you want to render.\"), mdx(\"h3\", {\n    \"id\": \"lets-understand-few-core-concepts-in-react\"\n  }, \"Let\\u2019s understand few core concepts in React.\"), mdx(\"p\", null, \"My plan is not to introduce all the React concepts here. But there is one concept without which I feel we can\\u2019t proceed here. It\\u2019s called the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Components\"), \".\"), mdx(\"h3\", {\n    \"id\": \"what-is-a-component-in-react\"\n  }, \"What is a Component in React?\"), mdx(\"p\", null, \"Everything! Yes, everything you see in your browser elements they can be termed as a component. Take an example of any web application you have opened. It might have a header,side-bar, button, form etc. They can be called as components. Components can be further divided into components. This will be clear with below example. I took a screenshot of the homepage of Google. Observe the image.\"), mdx(\"p\", null, mdx(\"figure\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1140px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"50.526315789473685%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABuklEQVQoz32T62oaURSFfe6+QX+0NC9QaAn1RwuBFBIopK2WkGoNxegQ7UTjXOLMqKOOc9O5fT1nilbT0A2Lswf2XmedtfdUiqJAQsZBzv9jW6coCrVanWazKc4alccFMvJc5HlK5C/xXAff85jPF2zWMWmaCKS7WplvNhuSJClR2Ve1Xq8x7Sna8Jbzyzpvmzd8/NlG6beJQh/TcRnbDneGg25NKPLsH+V/CEuJOd9v76n3dc46V7y61jivvub0+TNeXrW5uGnQeIho2x6XmouzDJg4tnhNvrNK4kChqhn0DZ0vja+8aDxw9P4zR8dnHLc6jIwu4zBhMJvTE0odYcHcdXdebzkq20TelAl/pFcDpcO3apWTN1VO332gcfGJoaqiqr8YDgaYplnWZVl2oO6A0LIsul0FwzBwFwv8OGY6nbASA/H8gJlQM5vNSliWLcjv6PV6+L5/qHD7IRXKickC2XTdatEq8QNtNELXNWzbZrlcsFp5RFFU9kg8Sfh4DTTN5H5oCDJTqAwFUSC2ICUM1xj6+Mmd/DvlPQ/kzUEQCOJCNIudSwriOCOOUkGYiUH4JeH+z7B//gZ0U/UByCKJRQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"alt text\",\n    \"title\": \"alt text\",\n    \"src\": \"/static/87032240ae2ff282dfd49628bf28bf7f/99686/google.png\",\n    \"srcSet\": [\"/static/87032240ae2ff282dfd49628bf28bf7f/02569/google.png 285w\", \"/static/87032240ae2ff282dfd49628bf28bf7f/d4f70/google.png 570w\", \"/static/87032240ae2ff282dfd49628bf28bf7f/99686/google.png 1140w\", \"/static/87032240ae2ff282dfd49628bf28bf7f/72bf7/google.png 1710w\", \"/static/87032240ae2ff282dfd49628bf28bf7f/0783a/google.png 2063w\"],\n    \"sizes\": \"(max-width: 1140px) 100vw, 1140px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }), \"alt text\"), \"\\n  \")), mdx(\"p\", null, \"I have marked some HTML elements with the oval shape. They all can be components. Your obvious next question should be, any benefit of doing that? I\\u2019m glad that you asked. Yes, it has benefits. The major two are, code reuse and modularity. Deep down React components can be expressed as a Javascript function or Javascript class. For today\\u2019s class let\\u2019s only focus on Component as Javascript function.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"function Button(name){\\n    return(\\n        <div>\\n            <button type='button'>{name}</button>\\n        </div>\\n    );\\n}\\n\")), mdx(\"p\", null, \"Did you notice Google home has two buttons \\u201CGoogle Search\\u201D and \\u201CI\\u2019m Feeling Lucky\\u201D? If you have considered button as one component, you only have to write one method for the button and you can render it any number of times by passing required parameters. I parametrized only the name here but as we know the button has to perform a certain task when it\\u2019s clicked, we can pass that information in the parameter as well.\"), mdx(\"p\", null, \"Now coming back to our sample application.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"ReactDOM.render(<App />, document.getElementById('root'));\\n\")), mdx(\"p\", null, \"So, App is a React component which is rendered within the HTML element whose id is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"root\"), \". Where is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"App\"), \" and where is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"root\"), \" defined? App is imported in line 4.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"import App from './App';\\n\")), mdx(\"p\", null, \"Its location is under the same folder under file name App. Let\\u2019s look at what it contains.\"), mdx(\"p\", null, mdx(\"figure\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1140px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"48.7719298245614%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABmUlEQVQoz42S607bQBCF8xpcRBIC8XV9iXe967UTp0XiFQAhnNSJUQKCSLy/dDq7Qqh1oe2Po5Fmx9+cmfGg23W4b1rc3q9wc9dg1T6iWXfYbjp07RabHxu8Pr/g7fWAw36Pw26Hp22L5vYGm9Uaq4eG6lrsKb9ebzHgxTfo+hpRVmI8jeAGHGlQwrlkcFyGCeXOLgOcjD0cD10cnTk2no59nIxcq+Ohg/Mpo+8ZBpmsoRffEWcFLtwYfiQh1TUKfYVUlvCTHF4oKJ9bBe/yewpjiYA04KrGTCj4LMNw4sENOZK0wkLMCaoJqhCkgvIZXMbhBNmXcpkgh2oJoWui55g4EXzqYh4UAQWfI5cUyWkqSiQkjwnbtK8PYJBIqGpJQIER7crY9mgEKSvo5Rx8MUdINR7Lbd4CSV5PFmyALC2gyhrxTGFMQLND88hzDVUvEOWmwd9H/W1kNtOolnQAri3QODELFllFRRxT7734kzH/GJkijVzQyUMLsw4JxmKFsLerf0F/ASp73dGF/+Ewigok5nf4D1Af+BM7hUEfaW2x0AAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"alt text\",\n    \"title\": \"alt text\",\n    \"src\": \"/static/57cfa61327b7b7eb9549836dc3396e10/99686/snippet.png\",\n    \"srcSet\": [\"/static/57cfa61327b7b7eb9549836dc3396e10/02569/snippet.png 285w\", \"/static/57cfa61327b7b7eb9549836dc3396e10/d4f70/snippet.png 570w\", \"/static/57cfa61327b7b7eb9549836dc3396e10/99686/snippet.png 1140w\", \"/static/57cfa61327b7b7eb9549836dc3396e10/72bf7/snippet.png 1710w\", \"/static/57cfa61327b7b7eb9549836dc3396e10/31ea7/snippet.png 2280w\", \"/static/57cfa61327b7b7eb9549836dc3396e10/919d8/snippet.png 2560w\"],\n    \"sizes\": \"(max-width: 1140px) 100vw, 1140px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }), \"alt text\"), \"\\n  \")), mdx(\"p\", null, \"You can see here, they have defined App as a class component. We are going to modify it as a functional component. Delete all the content of App.js and replace it with below code.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"import React from \\\"react\\\";\\n\\nfunction App() {\\n  return (\\n    <div>\\n      <h2>Welcome to React</h2>\\n    </div>\\n  );\\n}\\n\\nexport default App;\\n\")), mdx(\"p\", null, \"Once you saved the code, the page will be reloaded and you should see below content in your browser.\"), mdx(\"p\", null, mdx(\"figure\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1140px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"16.49122807017544%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsTAAALEwEAmpwYAAAATElEQVQI16XMUQrAIAwDUO9/UUcRBKFO09lM/Rzsy8IjEEKDiDClxBgvllIIGGE/gM2mZg91bdGptfLubaYyrGc5583H4OmFb+HuR15/kuxWp6a0CAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"alt text\",\n    \"title\": \"alt text\",\n    \"src\": \"/static/ee6a37f130208d0ca2b621ed1b41bcbf/99686/welcome.png\",\n    \"srcSet\": [\"/static/ee6a37f130208d0ca2b621ed1b41bcbf/02569/welcome.png 285w\", \"/static/ee6a37f130208d0ca2b621ed1b41bcbf/d4f70/welcome.png 570w\", \"/static/ee6a37f130208d0ca2b621ed1b41bcbf/99686/welcome.png 1140w\", \"/static/ee6a37f130208d0ca2b621ed1b41bcbf/72bf7/welcome.png 1710w\", \"/static/ee6a37f130208d0ca2b621ed1b41bcbf/31ea7/welcome.png 2280w\", \"/static/ee6a37f130208d0ca2b621ed1b41bcbf/d3a2e/welcome.png 2516w\"],\n    \"sizes\": \"(max-width: 1140px) 100vw, 1140px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }), \"alt text\"), \"\\n  \")), mdx(\"p\", null, \"Now the last thing to clarify is where is the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"root\"), \"? Our application\\u2019s default landing page is index.html. Let\\u2019s look at what public/index.html looks like.\"), mdx(\"p\", null, mdx(\"figure\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1140px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.78947368421052%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB10lEQVQoz32SSW/bMBCF9TvaBHW8xNplSZRISlQ29FCgpwJd4ESS7cRxlvb/X1+HY7tO2qCHB0ojv2/ecOzcP9xj3i/xY97jy9c5usUa3WqDvl9hQfW+W+Lx4Qm/np7xc7PB8/oOt12L6+/f0F23aG9arBYL3N2ucdMu4Qh1Ad18xEwYDE8TTLwUZWHgBimOhj6OhwGOTnzWe9K7gcenrR8PD+fEn2FMXqdoPhPwErlsMHYTuFEBlVW4ahrIS5KqUJ4Z5KZGqjQSoRBlEnEuESQlPPq9H5eIU001A0effSJYTQlrjKYRA5OZRlEaAtQQZY3CNPwcZZpUIUwVgplkkJVHOvVThORzcho5K6hbnGMw9rhjmCjqaJPQmVNnQSo0g7yo3Kl4pWmQ0fcKTkBUoQwBJD6MtsCAgFG6TRNllCytdsk0JaN0iSRA/pcy9jkxGbQ5h6wvaCkBj+yTwdaTvGawBVmordkGIUHdUPzRHmqfnZhMhW7IUHJCXgptXNCdJjZVfBjvJWQPegNocDIJthr7mJJRiga1OqeEFSe0I0acKn9lfhNoR7DJBgSzcvdLyQ4wuwSXU243+hL2D1DoK3pJ+T84msZs8GPJlx/u7o9l33kh6r/A3xxZYVhSeCLUAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"alt text\",\n    \"title\": \"alt text\",\n    \"src\": \"/static/a48940617070c8f8e41a7dbccecb460f/99686/final.png\",\n    \"srcSet\": [\"/static/a48940617070c8f8e41a7dbccecb460f/02569/final.png 285w\", \"/static/a48940617070c8f8e41a7dbccecb460f/d4f70/final.png 570w\", \"/static/a48940617070c8f8e41a7dbccecb460f/99686/final.png 1140w\", \"/static/a48940617070c8f8e41a7dbccecb460f/72bf7/final.png 1710w\", \"/static/a48940617070c8f8e41a7dbccecb460f/31ea7/final.png 2280w\", \"/static/a48940617070c8f8e41a7dbccecb460f/919d8/final.png 2560w\"],\n    \"sizes\": \"(max-width: 1140px) 100vw, 1140px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }), \"alt text\"), \"\\n  \")), mdx(\"p\", null, \"Notice the line number 28\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"<div id=\\\"root\\\"></div>\\n\")), mdx(\"p\", null, \"This\\u2019s the place where all the application\\u2019s code gets rendered.\"), mdx(\"p\", null, \"That\\u2019s all guys. I hope you understood the basics of it.\"));\n}\n;\nMDXContent.isMDXComponent = true;","keywords":null,"tags":[{"id":"a5a96093-b9f0-5993-96fe-b6d5c39b5c4d","name":"#react","slug":"/tag/react/"},{"id":"5c60dbef-ef6f-5458-9c5c-d2c4a69cddd8","name":"#programming","slug":"/tag/programming/"},{"id":"49650093-ad63-56be-8c31-93d374ac6fe1","name":"#javascript","slug":"/tag/javascript/"}],"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/fd2f4d47546be0db7efe6f49e09f5842/8f7be/cover.jpg","srcSet":"/static/fd2f4d47546be0db7efe6f49e09f5842/8f7be/cover.jpg 1x,\n/static/fd2f4d47546be0db7efe6f49e09f5842/1af80/cover.jpg 1.5x,\n/static/fd2f4d47546be0db7efe6f49e09f5842/1acf6/cover.jpg 2x","srcWebp":"/static/fd2f4d47546be0db7efe6f49e09f5842/03323/cover.webp","srcSetWebp":"/static/fd2f4d47546be0db7efe6f49e09f5842/03323/cover.webp 1x,\n/static/fd2f4d47546be0db7efe6f49e09f5842/c8e9c/cover.webp 1.5x,\n/static/fd2f4d47546be0db7efe6f49e09f5842/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/fd2f4d47546be0db7efe6f49e09f5842/a8483/cover.jpg","srcSet":"/static/fd2f4d47546be0db7efe6f49e09f5842/a8483/cover.jpg 1x","srcWebp":"/static/fd2f4d47546be0db7efe6f49e09f5842/7330c/cover.webp","srcSetWebp":"/static/fd2f4d47546be0db7efe6f49e09f5842/7330c/cover.webp 1x","width":1600,"height":650}}},"tagCategoryPosts":{"nodes":[{"__typename":"MdxArticleProxy","id":"12a3aa7f-4fcb-5f67-bdaa-9706b05c938c","title":"Build Rest API from scratch in Node.js","slug":"/build-rest-api-from-scratch-in-nodejs/","link":null,"excerpt":"Scope of this tutorial Node.js setup Building REST API for a todo app using express.js Error…","timeToRead":4,"featured":null,"thumbnailText":null,"date":"July 24, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/c2e1140c0912270d2a20800e2b8aa88b/8f7be/cover.jpg","srcSet":"/static/c2e1140c0912270d2a20800e2b8aa88b/8f7be/cover.jpg 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/1af80/cover.jpg 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/1acf6/cover.jpg 2x","srcWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/03323/cover.webp","srcSetWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/03323/cover.webp 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/c8e9c/cover.webp 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/c2e1140c0912270d2a20800e2b8aa88b/a8483/cover.jpg","srcSet":"/static/c2e1140c0912270d2a20800e2b8aa88b/a8483/cover.jpg 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/fc0c4/cover.jpg 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/5497e/cover.jpg 2x","srcWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/7330c/cover.webp","srcSetWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/7330c/cover.webp 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/2b083/cover.webp 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"4b3d2c3c-ac76-5e72-9700-846002af0f68","title":"Data Structure Fundamentals in Java","slug":"/data-structure-fundamentals-in-java/","link":null,"excerpt":"What is the Data Structure? In the simplest term, a data structure is a container for the data.\nWe…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"July 18, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/86abdccaedf3f5c1d3552844eb70c440/8f7be/cover.jpg","srcSet":"/static/86abdccaedf3f5c1d3552844eb70c440/8f7be/cover.jpg 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/1af80/cover.jpg 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/1acf6/cover.jpg 2x","srcWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/03323/cover.webp","srcSetWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/03323/cover.webp 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/c8e9c/cover.webp 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/86abdccaedf3f5c1d3552844eb70c440/a8483/cover.jpg","srcSet":"/static/86abdccaedf3f5c1d3552844eb70c440/a8483/cover.jpg 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/fc0c4/cover.jpg 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/5497e/cover.jpg 2x","srcWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/7330c/cover.webp","srcSetWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/7330c/cover.webp 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/2b083/cover.webp 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"ec792d61-21ab-5a05-846d-412d6f9f818e","title":"Stack Fundamentals in Java","slug":"/stack-fundamentals-in-java/","link":null,"excerpt":"What is a Stack? Stack is one of the many data structures in programming.\nOne of the best example of…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 16, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/00e1055718af5913a29771adcff1d802/8f7be/cover.jpg","srcSet":"/static/00e1055718af5913a29771adcff1d802/8f7be/cover.jpg 1x,\n/static/00e1055718af5913a29771adcff1d802/1af80/cover.jpg 1.5x,\n/static/00e1055718af5913a29771adcff1d802/1acf6/cover.jpg 2x","srcWebp":"/static/00e1055718af5913a29771adcff1d802/03323/cover.webp","srcSetWebp":"/static/00e1055718af5913a29771adcff1d802/03323/cover.webp 1x,\n/static/00e1055718af5913a29771adcff1d802/c8e9c/cover.webp 1.5x,\n/static/00e1055718af5913a29771adcff1d802/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/00e1055718af5913a29771adcff1d802/a8483/cover.jpg","srcSet":"/static/00e1055718af5913a29771adcff1d802/a8483/cover.jpg 1x,\n/static/00e1055718af5913a29771adcff1d802/fc0c4/cover.jpg 1.5x,\n/static/00e1055718af5913a29771adcff1d802/5497e/cover.jpg 2x","srcWebp":"/static/00e1055718af5913a29771adcff1d802/7330c/cover.webp","srcSetWebp":"/static/00e1055718af5913a29771adcff1d802/7330c/cover.webp 1x,\n/static/00e1055718af5913a29771adcff1d802/2b083/cover.webp 1.5x,\n/static/00e1055718af5913a29771adcff1d802/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"4a5f3b2a-2528-5d24-a0af-02a95097f9bb","title":"Queue Fundamentals in Java","slug":"/queue-fundamentals-in-java/","link":null,"excerpt":"What is a Queue? Queue is one of the many data structures in programming.\nOne of the best example of…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 15, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/529b395cb975e6069b595efb03b9ce19/8f7be/cover.jpg","srcSet":"/static/529b395cb975e6069b595efb03b9ce19/8f7be/cover.jpg 1x,\n/static/529b395cb975e6069b595efb03b9ce19/1af80/cover.jpg 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/1acf6/cover.jpg 2x","srcWebp":"/static/529b395cb975e6069b595efb03b9ce19/03323/cover.webp","srcSetWebp":"/static/529b395cb975e6069b595efb03b9ce19/03323/cover.webp 1x,\n/static/529b395cb975e6069b595efb03b9ce19/c8e9c/cover.webp 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/529b395cb975e6069b595efb03b9ce19/a8483/cover.jpg","srcSet":"/static/529b395cb975e6069b595efb03b9ce19/a8483/cover.jpg 1x,\n/static/529b395cb975e6069b595efb03b9ce19/fc0c4/cover.jpg 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/5497e/cover.jpg 2x","srcWebp":"/static/529b395cb975e6069b595efb03b9ce19/7330c/cover.webp","srcSetWebp":"/static/529b395cb975e6069b595efb03b9ce19/7330c/cover.webp 1x,\n/static/529b395cb975e6069b595efb03b9ce19/2b083/cover.webp 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"2c5a14a8-48e7-5b97-aa82-1a6d9a7f87b6","title":"Graph Fundamentals in Java","slug":"/graph-fundamentals-in-java/","link":null,"excerpt":"What is a Graph? Graph is one of the data structures in computer programming.\nBelow is a sample…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 14, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/60409e3b1964a3d2a8389370f11366dc/8f7be/cover.jpg","srcSet":"/static/60409e3b1964a3d2a8389370f11366dc/8f7be/cover.jpg 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/1af80/cover.jpg 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/1acf6/cover.jpg 2x","srcWebp":"/static/60409e3b1964a3d2a8389370f11366dc/03323/cover.webp","srcSetWebp":"/static/60409e3b1964a3d2a8389370f11366dc/03323/cover.webp 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/c8e9c/cover.webp 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/60409e3b1964a3d2a8389370f11366dc/a8483/cover.jpg","srcSet":"/static/60409e3b1964a3d2a8389370f11366dc/a8483/cover.jpg 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/fc0c4/cover.jpg 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/5497e/cover.jpg 2x","srcWebp":"/static/60409e3b1964a3d2a8389370f11366dc/7330c/cover.webp","srcSetWebp":"/static/60409e3b1964a3d2a8389370f11366dc/7330c/cover.webp 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/2b083/cover.webp 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"1bb6ec1f-f692-5595-8d41-f893a7d3ff4a","title":"HashMap Fundamentals in Java","slug":"/hashmap-fundamentals-in-java/","link":null,"excerpt":"What is a HashMap HashMap is one many data structures in programming. It stores data in key-value…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 13, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/385f39f0ba5441d5fa9c9888825bf2d0/8f7be/cover.jpg","srcSet":"/static/385f39f0ba5441d5fa9c9888825bf2d0/8f7be/cover.jpg 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/1af80/cover.jpg 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/1acf6/cover.jpg 2x","srcWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/03323/cover.webp","srcSetWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/03323/cover.webp 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/c8e9c/cover.webp 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/385f39f0ba5441d5fa9c9888825bf2d0/a8483/cover.jpg","srcSet":"/static/385f39f0ba5441d5fa9c9888825bf2d0/a8483/cover.jpg 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/fc0c4/cover.jpg 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/5497e/cover.jpg 2x","srcWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/7330c/cover.webp","srcSetWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/7330c/cover.webp 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/2b083/cover.webp 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/c851e/cover.webp 2x","width":1600,"height":650}}}]},"tagPosts":{"nodes":[{"__typename":"MdxArticleProxy","id":"12a3aa7f-4fcb-5f67-bdaa-9706b05c938c","title":"Build Rest API from scratch in Node.js","slug":"/build-rest-api-from-scratch-in-nodejs/","link":null,"excerpt":"Scope of this tutorial Node.js setup Building REST API for a todo app using express.js Error…","timeToRead":4,"featured":null,"thumbnailText":null,"date":"July 24, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/c2e1140c0912270d2a20800e2b8aa88b/8f7be/cover.jpg","srcSet":"/static/c2e1140c0912270d2a20800e2b8aa88b/8f7be/cover.jpg 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/1af80/cover.jpg 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/1acf6/cover.jpg 2x","srcWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/03323/cover.webp","srcSetWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/03323/cover.webp 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/c8e9c/cover.webp 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/c2e1140c0912270d2a20800e2b8aa88b/a8483/cover.jpg","srcSet":"/static/c2e1140c0912270d2a20800e2b8aa88b/a8483/cover.jpg 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/fc0c4/cover.jpg 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/5497e/cover.jpg 2x","srcWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/7330c/cover.webp","srcSetWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/7330c/cover.webp 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/2b083/cover.webp 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"4b3d2c3c-ac76-5e72-9700-846002af0f68","title":"Data Structure Fundamentals in Java","slug":"/data-structure-fundamentals-in-java/","link":null,"excerpt":"What is the Data Structure? In the simplest term, a data structure is a container for the data.\nWe…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"July 18, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/86abdccaedf3f5c1d3552844eb70c440/8f7be/cover.jpg","srcSet":"/static/86abdccaedf3f5c1d3552844eb70c440/8f7be/cover.jpg 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/1af80/cover.jpg 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/1acf6/cover.jpg 2x","srcWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/03323/cover.webp","srcSetWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/03323/cover.webp 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/c8e9c/cover.webp 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/86abdccaedf3f5c1d3552844eb70c440/a8483/cover.jpg","srcSet":"/static/86abdccaedf3f5c1d3552844eb70c440/a8483/cover.jpg 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/fc0c4/cover.jpg 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/5497e/cover.jpg 2x","srcWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/7330c/cover.webp","srcSetWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/7330c/cover.webp 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/2b083/cover.webp 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"ec792d61-21ab-5a05-846d-412d6f9f818e","title":"Stack Fundamentals in Java","slug":"/stack-fundamentals-in-java/","link":null,"excerpt":"What is a Stack? Stack is one of the many data structures in programming.\nOne of the best example of…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 16, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/00e1055718af5913a29771adcff1d802/8f7be/cover.jpg","srcSet":"/static/00e1055718af5913a29771adcff1d802/8f7be/cover.jpg 1x,\n/static/00e1055718af5913a29771adcff1d802/1af80/cover.jpg 1.5x,\n/static/00e1055718af5913a29771adcff1d802/1acf6/cover.jpg 2x","srcWebp":"/static/00e1055718af5913a29771adcff1d802/03323/cover.webp","srcSetWebp":"/static/00e1055718af5913a29771adcff1d802/03323/cover.webp 1x,\n/static/00e1055718af5913a29771adcff1d802/c8e9c/cover.webp 1.5x,\n/static/00e1055718af5913a29771adcff1d802/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/00e1055718af5913a29771adcff1d802/a8483/cover.jpg","srcSet":"/static/00e1055718af5913a29771adcff1d802/a8483/cover.jpg 1x,\n/static/00e1055718af5913a29771adcff1d802/fc0c4/cover.jpg 1.5x,\n/static/00e1055718af5913a29771adcff1d802/5497e/cover.jpg 2x","srcWebp":"/static/00e1055718af5913a29771adcff1d802/7330c/cover.webp","srcSetWebp":"/static/00e1055718af5913a29771adcff1d802/7330c/cover.webp 1x,\n/static/00e1055718af5913a29771adcff1d802/2b083/cover.webp 1.5x,\n/static/00e1055718af5913a29771adcff1d802/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"4a5f3b2a-2528-5d24-a0af-02a95097f9bb","title":"Queue Fundamentals in Java","slug":"/queue-fundamentals-in-java/","link":null,"excerpt":"What is a Queue? Queue is one of the many data structures in programming.\nOne of the best example of…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 15, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/529b395cb975e6069b595efb03b9ce19/8f7be/cover.jpg","srcSet":"/static/529b395cb975e6069b595efb03b9ce19/8f7be/cover.jpg 1x,\n/static/529b395cb975e6069b595efb03b9ce19/1af80/cover.jpg 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/1acf6/cover.jpg 2x","srcWebp":"/static/529b395cb975e6069b595efb03b9ce19/03323/cover.webp","srcSetWebp":"/static/529b395cb975e6069b595efb03b9ce19/03323/cover.webp 1x,\n/static/529b395cb975e6069b595efb03b9ce19/c8e9c/cover.webp 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/529b395cb975e6069b595efb03b9ce19/a8483/cover.jpg","srcSet":"/static/529b395cb975e6069b595efb03b9ce19/a8483/cover.jpg 1x,\n/static/529b395cb975e6069b595efb03b9ce19/fc0c4/cover.jpg 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/5497e/cover.jpg 2x","srcWebp":"/static/529b395cb975e6069b595efb03b9ce19/7330c/cover.webp","srcSetWebp":"/static/529b395cb975e6069b595efb03b9ce19/7330c/cover.webp 1x,\n/static/529b395cb975e6069b595efb03b9ce19/2b083/cover.webp 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"2c5a14a8-48e7-5b97-aa82-1a6d9a7f87b6","title":"Graph Fundamentals in Java","slug":"/graph-fundamentals-in-java/","link":null,"excerpt":"What is a Graph? Graph is one of the data structures in computer programming.\nBelow is a sample…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 14, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/60409e3b1964a3d2a8389370f11366dc/8f7be/cover.jpg","srcSet":"/static/60409e3b1964a3d2a8389370f11366dc/8f7be/cover.jpg 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/1af80/cover.jpg 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/1acf6/cover.jpg 2x","srcWebp":"/static/60409e3b1964a3d2a8389370f11366dc/03323/cover.webp","srcSetWebp":"/static/60409e3b1964a3d2a8389370f11366dc/03323/cover.webp 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/c8e9c/cover.webp 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/60409e3b1964a3d2a8389370f11366dc/a8483/cover.jpg","srcSet":"/static/60409e3b1964a3d2a8389370f11366dc/a8483/cover.jpg 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/fc0c4/cover.jpg 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/5497e/cover.jpg 2x","srcWebp":"/static/60409e3b1964a3d2a8389370f11366dc/7330c/cover.webp","srcSetWebp":"/static/60409e3b1964a3d2a8389370f11366dc/7330c/cover.webp 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/2b083/cover.webp 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"1bb6ec1f-f692-5595-8d41-f893a7d3ff4a","title":"HashMap Fundamentals in Java","slug":"/hashmap-fundamentals-in-java/","link":null,"excerpt":"What is a HashMap HashMap is one many data structures in programming. It stores data in key-value…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 13, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/385f39f0ba5441d5fa9c9888825bf2d0/8f7be/cover.jpg","srcSet":"/static/385f39f0ba5441d5fa9c9888825bf2d0/8f7be/cover.jpg 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/1af80/cover.jpg 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/1acf6/cover.jpg 2x","srcWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/03323/cover.webp","srcSetWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/03323/cover.webp 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/c8e9c/cover.webp 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/385f39f0ba5441d5fa9c9888825bf2d0/a8483/cover.jpg","srcSet":"/static/385f39f0ba5441d5fa9c9888825bf2d0/a8483/cover.jpg 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/fc0c4/cover.jpg 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/5497e/cover.jpg 2x","srcWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/7330c/cover.webp","srcSetWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/7330c/cover.webp 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/2b083/cover.webp 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/c851e/cover.webp 2x","width":1600,"height":650}}}]},"categoryPosts":{"nodes":[{"__typename":"MdxArticleProxy","id":"12a3aa7f-4fcb-5f67-bdaa-9706b05c938c","title":"Build Rest API from scratch in Node.js","slug":"/build-rest-api-from-scratch-in-nodejs/","link":null,"excerpt":"Scope of this tutorial Node.js setup Building REST API for a todo app using express.js Error…","timeToRead":4,"featured":null,"thumbnailText":null,"date":"July 24, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/c2e1140c0912270d2a20800e2b8aa88b/8f7be/cover.jpg","srcSet":"/static/c2e1140c0912270d2a20800e2b8aa88b/8f7be/cover.jpg 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/1af80/cover.jpg 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/1acf6/cover.jpg 2x","srcWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/03323/cover.webp","srcSetWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/03323/cover.webp 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/c8e9c/cover.webp 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/c2e1140c0912270d2a20800e2b8aa88b/a8483/cover.jpg","srcSet":"/static/c2e1140c0912270d2a20800e2b8aa88b/a8483/cover.jpg 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/fc0c4/cover.jpg 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/5497e/cover.jpg 2x","srcWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/7330c/cover.webp","srcSetWebp":"/static/c2e1140c0912270d2a20800e2b8aa88b/7330c/cover.webp 1x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/2b083/cover.webp 1.5x,\n/static/c2e1140c0912270d2a20800e2b8aa88b/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"4b3d2c3c-ac76-5e72-9700-846002af0f68","title":"Data Structure Fundamentals in Java","slug":"/data-structure-fundamentals-in-java/","link":null,"excerpt":"What is the Data Structure? In the simplest term, a data structure is a container for the data.\nWe…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"July 18, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/86abdccaedf3f5c1d3552844eb70c440/8f7be/cover.jpg","srcSet":"/static/86abdccaedf3f5c1d3552844eb70c440/8f7be/cover.jpg 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/1af80/cover.jpg 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/1acf6/cover.jpg 2x","srcWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/03323/cover.webp","srcSetWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/03323/cover.webp 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/c8e9c/cover.webp 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/86abdccaedf3f5c1d3552844eb70c440/a8483/cover.jpg","srcSet":"/static/86abdccaedf3f5c1d3552844eb70c440/a8483/cover.jpg 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/fc0c4/cover.jpg 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/5497e/cover.jpg 2x","srcWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/7330c/cover.webp","srcSetWebp":"/static/86abdccaedf3f5c1d3552844eb70c440/7330c/cover.webp 1x,\n/static/86abdccaedf3f5c1d3552844eb70c440/2b083/cover.webp 1.5x,\n/static/86abdccaedf3f5c1d3552844eb70c440/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"ec792d61-21ab-5a05-846d-412d6f9f818e","title":"Stack Fundamentals in Java","slug":"/stack-fundamentals-in-java/","link":null,"excerpt":"What is a Stack? Stack is one of the many data structures in programming.\nOne of the best example of…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 16, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/00e1055718af5913a29771adcff1d802/8f7be/cover.jpg","srcSet":"/static/00e1055718af5913a29771adcff1d802/8f7be/cover.jpg 1x,\n/static/00e1055718af5913a29771adcff1d802/1af80/cover.jpg 1.5x,\n/static/00e1055718af5913a29771adcff1d802/1acf6/cover.jpg 2x","srcWebp":"/static/00e1055718af5913a29771adcff1d802/03323/cover.webp","srcSetWebp":"/static/00e1055718af5913a29771adcff1d802/03323/cover.webp 1x,\n/static/00e1055718af5913a29771adcff1d802/c8e9c/cover.webp 1.5x,\n/static/00e1055718af5913a29771adcff1d802/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/00e1055718af5913a29771adcff1d802/a8483/cover.jpg","srcSet":"/static/00e1055718af5913a29771adcff1d802/a8483/cover.jpg 1x,\n/static/00e1055718af5913a29771adcff1d802/fc0c4/cover.jpg 1.5x,\n/static/00e1055718af5913a29771adcff1d802/5497e/cover.jpg 2x","srcWebp":"/static/00e1055718af5913a29771adcff1d802/7330c/cover.webp","srcSetWebp":"/static/00e1055718af5913a29771adcff1d802/7330c/cover.webp 1x,\n/static/00e1055718af5913a29771adcff1d802/2b083/cover.webp 1.5x,\n/static/00e1055718af5913a29771adcff1d802/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"4a5f3b2a-2528-5d24-a0af-02a95097f9bb","title":"Queue Fundamentals in Java","slug":"/queue-fundamentals-in-java/","link":null,"excerpt":"What is a Queue? Queue is one of the many data structures in programming.\nOne of the best example of…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 15, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/529b395cb975e6069b595efb03b9ce19/8f7be/cover.jpg","srcSet":"/static/529b395cb975e6069b595efb03b9ce19/8f7be/cover.jpg 1x,\n/static/529b395cb975e6069b595efb03b9ce19/1af80/cover.jpg 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/1acf6/cover.jpg 2x","srcWebp":"/static/529b395cb975e6069b595efb03b9ce19/03323/cover.webp","srcSetWebp":"/static/529b395cb975e6069b595efb03b9ce19/03323/cover.webp 1x,\n/static/529b395cb975e6069b595efb03b9ce19/c8e9c/cover.webp 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/529b395cb975e6069b595efb03b9ce19/a8483/cover.jpg","srcSet":"/static/529b395cb975e6069b595efb03b9ce19/a8483/cover.jpg 1x,\n/static/529b395cb975e6069b595efb03b9ce19/fc0c4/cover.jpg 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/5497e/cover.jpg 2x","srcWebp":"/static/529b395cb975e6069b595efb03b9ce19/7330c/cover.webp","srcSetWebp":"/static/529b395cb975e6069b595efb03b9ce19/7330c/cover.webp 1x,\n/static/529b395cb975e6069b595efb03b9ce19/2b083/cover.webp 1.5x,\n/static/529b395cb975e6069b595efb03b9ce19/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"2c5a14a8-48e7-5b97-aa82-1a6d9a7f87b6","title":"Graph Fundamentals in Java","slug":"/graph-fundamentals-in-java/","link":null,"excerpt":"What is a Graph? Graph is one of the data structures in computer programming.\nBelow is a sample…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 14, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/60409e3b1964a3d2a8389370f11366dc/8f7be/cover.jpg","srcSet":"/static/60409e3b1964a3d2a8389370f11366dc/8f7be/cover.jpg 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/1af80/cover.jpg 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/1acf6/cover.jpg 2x","srcWebp":"/static/60409e3b1964a3d2a8389370f11366dc/03323/cover.webp","srcSetWebp":"/static/60409e3b1964a3d2a8389370f11366dc/03323/cover.webp 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/c8e9c/cover.webp 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/60409e3b1964a3d2a8389370f11366dc/a8483/cover.jpg","srcSet":"/static/60409e3b1964a3d2a8389370f11366dc/a8483/cover.jpg 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/fc0c4/cover.jpg 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/5497e/cover.jpg 2x","srcWebp":"/static/60409e3b1964a3d2a8389370f11366dc/7330c/cover.webp","srcSetWebp":"/static/60409e3b1964a3d2a8389370f11366dc/7330c/cover.webp 1x,\n/static/60409e3b1964a3d2a8389370f11366dc/2b083/cover.webp 1.5x,\n/static/60409e3b1964a3d2a8389370f11366dc/c851e/cover.webp 2x","width":1600,"height":650}}},{"__typename":"MdxArticleProxy","id":"1bb6ec1f-f692-5595-8d41-f893a7d3ff4a","title":"HashMap Fundamentals in Java","slug":"/hashmap-fundamentals-in-java/","link":null,"excerpt":"What is a HashMap HashMap is one many data structures in programming. It stores data in key-value…","timeToRead":1,"featured":null,"thumbnailText":null,"date":"May 13, 2020","category":{"__typename":"CategoriesJson","id":"9b34403c-9fbf-5755-b813-562840b22307","name":"Programming","slug":"/category/programming/","color":null,"icon":"/static/e4c25de42623633b3496afca3ce01e06/programming.svg"},"author":{"__typename":"AuthorsJson","id":"cb7eeca4-38c9-5674-90b7-7e96c482987b","name":"Arvind Pandey","slug":"/author/arvind-pandey/","title":"Software Engineer","description":"Specialized in Software Design, Development, and Engineering Leadership.","skills":["Javascript","React","Node.js"],"social":[{"name":"Github","url":"https://github.com/arvind3157"},{"name":"Twitter","url":"https://twitter.com/arvpande"},{"name":"Linkedin","url":"https://www.linkedin.com/in/arvpande/"}],"thumbnail":{"__typename":"ImageSharp","regular":{"width":150,"height":150,"src":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg","srcSet":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a9ab2/arvind-pandey.jpg 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3fb33/arvind-pandey.jpg 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/d7080/arvind-pandey.jpg 2x","srcWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp","srcSetWebp":"/static/1cf0ccf6c2ce94576dce6b324f5995d6/a3d54/arvind-pandey.webp 1x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/cc134/arvind-pandey.webp 1.5x,\n/static/1cf0ccf6c2ce94576dce6b324f5995d6/3cb0e/arvind-pandey.webp 2x"}}},"thumbnail":{"__typename":"ImageSharp","vertical":{"src":"/static/385f39f0ba5441d5fa9c9888825bf2d0/8f7be/cover.jpg","srcSet":"/static/385f39f0ba5441d5fa9c9888825bf2d0/8f7be/cover.jpg 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/1af80/cover.jpg 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/1acf6/cover.jpg 2x","srcWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/03323/cover.webp","srcSetWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/03323/cover.webp 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/c8e9c/cover.webp 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/e7f4c/cover.webp 2x","width":380,"height":290},"hero":{"src":"/static/385f39f0ba5441d5fa9c9888825bf2d0/a8483/cover.jpg","srcSet":"/static/385f39f0ba5441d5fa9c9888825bf2d0/a8483/cover.jpg 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/fc0c4/cover.jpg 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/5497e/cover.jpg 2x","srcWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/7330c/cover.webp","srcSetWebp":"/static/385f39f0ba5441d5fa9c9888825bf2d0/7330c/cover.webp 1x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/2b083/cover.webp 1.5x,\n/static/385f39f0ba5441d5fa9c9888825bf2d0/c851e/cover.webp 2x","width":1600,"height":650}}}]},"previous":{"__typename":"MdxArticleProxy","id":"5517d046-8ff1-5c5e-8910-cb2aa7a8addc","slug":"/rails-application-on-aws-cloud-using-elastic-beanstalk/","title":"Rails application on AWS cloud using elastic beanstalk"},"next":{"__typename":"MdxArticleProxy","id":"0921c915-90bb-5792-a52b-6cca97d3dc37","slug":"/demystifying-binary-search-tree/","title":"Demystifying Binary Search Tree"}},"pageContext":{"id":"af1abdd1-3bc9-531d-a990-9059fdde2eba","categoryId":"9b34403c-9fbf-5755-b813-562840b22307","tagsIds":["a5a96093-b9f0-5993-96fe-b6d5c39b5c4d","5c60dbef-ef6f-5458-9c5c-d2c4a69cddd8","49650093-ad63-56be-8c31-93d374ac6fe1"],"hasTags":true,"previousId":"5517d046-8ff1-5c5e-8910-cb2aa7a8addc","nextId":"0921c915-90bb-5792-a52b-6cca97d3dc37","paginatePostsPage":true,"basePath":"/","services":{"algolia":true,"mailchimp":true,"disqus":true},"siteUrl":"//arvindpandey.in/","mobileMenu":{"title":"Topics","items":[{"name":"Life & Productivity","slug":"/category/life-and-productivity/"},{"name":"Programming","slug":"/category/programming/"},{"name":"Running","slug":"/category/running/"}]},"darkMode":true}},"staticQueryHashes":["1992822086","2918496967","4235339838","4240507859","92822325"]}