{"componentChunkName":"component---src-templates-post-post-jsx","path":"/blog/react–the-future-of-web-frontend","result":{"data":{"markdownRemark":{"html":"<p>Hello guys! In this article, I would love to talk about my experience working with React.js a frontend open source library developed at Facebook. I have been working with react over a couple of months and for my amazement, it’s a fantastic library. In this post, I would like to discuss some of the advantages and a few disadvantages of using React.</p>\n<p>I have worked with other frontend frameworks like angularJS and angular 2, 4 &#x26; 5. Even though Angular gives us some out of box features than React and the learning curve of Angular is more simple when compared to React, React has some awesome benefits over Angular.</p>\n<h2>The following are some of the awesome benefits of React.</h2>\n<ol>\n<li>\n<h3>React is a library not a framework</h3>\n<p>Yes, React is a library, not a framework! This makes React more lighter than Angular. This is a major advantage as well as a slightly minor disadvantage. The advantage is that you get the flexibility to use React in the way you want. You can use React with other frameworks like Angular or Vue.js. There are also many state management libraries like Redux and MobX that can be used with React. But for beginners, this becomes a bit difficult because you may end up messing the code without providing a proper file structure to your project, also you need to add other additional libraries like react-router which react does not provide by default.</p>\n</li>\n<li>\n<h3>React is the View of MVC</h3>\n<p>When React was designed the Facebook community designed it in such a way that they provided us only the view. Hence while using React we do the processing and displaying both in the same file. We use JSX syntax to write HTML code. This makes development a bit fast. But also some developers find it weird to write code in JSX and also JSX syntax is a bit different from the normal way of writing HTML code. Suppose we want to provide a flux architecture to React we can use a state management library like Redux or MobX, Which provides a flux architecture to the application.</p>\n</li>\n<li>\n<h3>React makes use of the Virtual DOM</h3>\n<p>React doesn’t manipulate the actual DOM. It manipulates the virtual DOM. That is the javascript representation of the actual DOM in memory. Hence when we change the state only that particular value updates in the DOM without affecting the rest of the DOM that has not changed. This makes React faster.</p>\n</li>\n<li>\n<h3>React components are reusable</h3>\n<p>In react we make use of components and these components can be reused in other projects once developed. It is very easy to build components in React and make them loosely coupled so that they can be used anywhere.</p>\n</li>\n<li>\n<h3>React has great community support</h3>\n<p>The community support behind react is very good. It is also maintained by Facebook as an open source project with regular updates. Currently, version 16.6 is the updated version as of Jan 3rd, 2019.</p>\n</li>\n</ol>","timeToRead":2,"frontmatter":{"title":"React – The Future Of Web Frontend","date":"07 Jan 2019","tags":["reactjs","javascript","typescript","html","css"],"path":"blog/react–the-future-of-web-frontend","excerpt":"Working with ReactJS - A library by facebook was a great experience for me. React has made building web apps easy by making use of reusable components. This is clearly my viewpoint about the library.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m66-36c-3%203-3%206-3%2015l1%207-5%202c-11%203-15%2011-11%2017%202%203%2012%208%2014%208%201%200%202%202%201%209-1%2017%207%2020%2021%2010l5-4%204%203c5%205%2012%207%2015%206%206-2%207-7%206-21%200-2%200-2%205-4%207-3%2012-8%2012-12s-6-10-13-12l-5-2%201-6c2-12-2-19-10-18l-15%208c-1%201-2%201-4-1-7-7-15-9-19-5m2%203v17h6c4%200%205-1%208-5%204-5%204-5-3-10-5-3-9-4-11-2m32%201l-5%204-3%203%203%204c2%204%203%204%2010%205%204%201%205%201%206-7%201-9-4-13-11-9m50%207c-1%202-2%203-2%2025%200%2025%200%2027%206%2027%205%200%206-1%206-12v-9h8c9%200%2012%202%2012%209%200%209%204%2014%2010%2012%203-1%203-2%202-11-2-12-2-12-5-13l-2-2%202-1c9-5%208-20-2-24-6-3-31-3-35-1m183%204l-1%205c0%203%200%204-3%205-4%201-4%205%200%206h3v13c0%2017%201%2019%2011%2019%205%200%208-1%208-4%200-2-3-4-6-4h-2v-24h3l4-1c1-3%200-5-4-5-3%200-3%200-3-4%200-6-1-8-5-8-3%200-4%201-5%202m-173%2011l1%208%208-1c10%200%2012-1%2012-7-1-6-3-7-13-7h-8v7m-83%203l-3%207%203%205c4%208%205%208%2013%208h6l4-7%203-7-3-6-4-5-7-1h-8l-4%206m140-5c-6%201-7%201-11%204-9%209-8%2027%203%2033s32-1%2026-9c-2-3-3-3-7%201-5%203-12%203-15-1-5-6-4-6%209-6%2014%200%2016%200%2017-4%202-9-11-20-22-18m42%200c-8%201-14%208-11%2012%202%201%205%201%207-1%204-5%2015-5%2015%200%200%204-2%205-9%205-12%202-16%205-16%2013%200%2010%2013%2014%2023%207l3-2%201%203c1%202%207%203%209%201%201-1%200-31-2-33-2-4-11-6-20-5m44%200c-16%203-21%2029-6%2037%208%205%2021%202%2025-5%204-6-3-10-8-4-3%204-8%204-12%201s-4-15%200-19c4-3%208-3%2012%201%207%206%2013%201%207-6-4-4-10-6-18-5m-246%205c-10%205-9%2011%203%2015l6%202%202-5c2-5%202-5%200-10-3-6-4-6-11-2m53%202c-2%205-2%206%200%2010%202%206%203%206%2010%202%2010-5%209-10-1-15-7-3-7-3-9%203m-26%200c-3%203-3%207%201%2010%203%203%206%203%209%200s3-6%200-9c-3-4-7-4-10-1m131%201l-4%204c-2%204-1%204%2010%204%207%200%207-1%207-2-1-5-9-9-13-6m49%2015c-9%201-12%205-6%209%205%203%2013-2%2012-8v-2l-6%201m-196%206c-2%205-1%2014%201%2015%202%203%204%202%209-1%208-5%208-6%204-11-5-5-13-7-14-3m33-1c-3%200-9%206-9%209l10%208c7%203%2010-2%208-13-1-5-1-5-9-4'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7730496453900708,"src":"/static/ca31f74a20da556b69057d20ff6abaf2/31987/preview.png","srcSet":"/static/ca31f74a20da556b69057d20ff6abaf2/e1953/preview.png 250w,\n/static/ca31f74a20da556b69057d20ff6abaf2/46604/preview.png 500w,\n/static/ca31f74a20da556b69057d20ff6abaf2/31987/preview.png 1000w,\n/static/ca31f74a20da556b69057d20ff6abaf2/0dadc/preview.png 1500w,\n/static/ca31f74a20da556b69057d20ff6abaf2/eeb1b/preview.png 1920w","sizes":"(max-width: 1000px) 100vw, 1000px"}}}}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"path":"blog/why-i-migrated-my-website-from-wordpress-to-gatsby","title":"Why I migrated my website from wordpress to gatsby? (gatsby vs wordpress)","tags":["javascript","gatsby","typescript"],"excerpt":"While building a CMS for blogging, worpdress is the most commonly used platform. Gatsby has also topped the list recently. This article talk which one to go for and why I shifted from wordpress to gatsby. Is gatsby better than wordpress is the question I would be answering.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m170-45c-4%203-5%208-5%2020l1%209-6%202c-11%205-19%2013-18%2019%202%206%209%2012%2019%2016l5%201v12c-1%2013%201%2017%207%2020h8c4-1%2017-9%2019-11l7%204c14%2011%2025%2010%2028-3%201-5%201-13-1-19l8-6c21-10%2021-22%200-32l-8-3%201-5c4-26-9-35-29-19l-6%204-5-4c-11-8-19-10-25-5m3%204c-3%203-4%2021-1%2023l8-1c7-1%207-1%2012-7l4-6-3-3c-3-3-14-8-16-8l-4%202m44%200c-5%202-12%208-12%209l5%207c4%205%204%205%2011%206l8%201%201-10c0-14-3-17-13-13M64%2074c-11%204-21%2013-26%2024-5%2010-5%2026%200%2036%2019%2037%2072%2029%2080-12%204-20-10-41-30-47-6-2-18-2-24-1m248%201c-15%203-30%2016-33%2031-9%2041%2041%2069%2070%2040s3-78-37-71m2%204c-7%201-14%205-20%2010-6%206-6%207%202%206l6%201-2%202c-4%200-4-1%203%2019%208%2024%207%2023%2012%2010%203-11%203-12%202-16-2-9-5-13-8-13l-2-1c1-2%2023-2%2024-1l-1%202h-3c-2%201-1%205%205%2021l7%2019%203-11c4-13%204-18-1-25-3-5-3-9%200-12l3-3-3-2c-7-5-17-7-27-6M66%2084c-7%202-14%208-18%2014-6%2010-7%208%2015%2029l20%2020c3%201%2011-3%2017-9%205-5%209-13%209-20v-3H99l-10%201-1%202v3h7l8%201c0%205-12%2019-17%2019l-19-18-17-17%202-3c9-16%2029-20%2042-8%205%204%205%204%207%202s2-2-2-5c-8-9-22-12-33-8m128%2014c-5%200-4%200-11%2011l-4%207%203%205%205%2010%203%204h10c11%200%2011%200%2016-10%206-9%206-9%200-18l-5-8-6-1h-11m159%206l-13%2042c-3%207%2010-5%2014-14%203-7%204-24%201-29l-2-3v4m-191%200c-18%207-18%2016-2%2023%207%204%207%204%2010-4l3-7-3-7-2-7-6%202m68%205l-2%208%202%206c2%207%203%207%205%206%208-1%2018-9%2018-13%200-2-6-8-12-11-9-4-8-4-11%204m54-4c-5%2012%200%2029%2011%2039%206%206%209%207%207%202a3395%203395%200%2001-16-44l-2%203m-88%202c-6%203-8%208-5%2013%204%2011%2020%208%2020-4%200-4-4-10-7-10l-3-1-5%202M43%20121c2%209%209%2019%2018%2024%203%202%2013%204%2013%203l-29-30c-2-1-2-1-2%203m277-1a644%20644%200%2001-10%2031c0%203%2017%204%2021%201%201%200%200-4-4-14l-7-18m-149%2018c-1%203-1%2018%201%2021%203%205%2012%203%2021-4l3-4-5-6c-5-5-5-6-10-6l-7-2-3%201m50%200c-6%202-8%202-10%205l-5%206-2%202%205%205c10%207%2018%208%2020%202%202-4%201-21-1-21l-7%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/245aecc3e8c42b31f1e4796cebebd2ce/4fe8c/gatsby-wordpress.jpg","srcSet":"/static/245aecc3e8c42b31f1e4796cebebd2ce/aabdf/gatsby-wordpress.jpg 150w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/9dc27/gatsby-wordpress.jpg 300w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/4fe8c/gatsby-wordpress.jpg 600w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/f9913/gatsby-wordpress.jpg 750w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/promises-in-javascript","title":"Working with promises in Javascript","tags":["javascript","typescript","nodejs","reactjs"],"excerpt":"Let's talk about promises in javascript. What exactly is a promise in javascript and how to handle promises. This article will talk about the different methods to resolve promises.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='244'%20viewBox='0%200%20400%20244'%20preserveAspectRatio='none'%3e%3cpath%20d='M187%2010c-16%204-29%2017-33%2034l-1%205h-8c-9%200-10%201-11%208l-2%208-1%205h-6c-14%200-24%2013-28%2038-3%2020-1%2029%206%2029l2%201-13%2043c-13%2040-15%2048-12%2051%202%202%20235%202%20237-1%203-2%202-8-6-33l-8-25%205-1c8%200%2010-1%2011-3%204-5%203-7-1-13-12-14-16-26-17-50-1-20-2-24-12-33l-5-5h-41v-2c9-33-23-65-56-56m-46%2051c-1%206-4%2014-6%2016l-8%201c-7%200-8%200-11%203-7%206-12%2022-12%2039v9h8l7%202-8%2033-9%2033%202%207%202%207h11l-6-1-3-1c3%200%203%200%202-3l-1-3a214%20214%200%200136%201l-4%203-2%202h48l-25%201-25%201h23a281%20281%200%200127%200c-1-1%200-1%201-1h24l4-1c5-2%2010-2%2024-1l32%203h20l1-7%202-7-4-16-4-16%2014-1%2013-1-3-4a87%2087%200%2001-18-53c-1-18-2-23-9-28l-4-3h-64l3%207%203%209%201%203-7-1c-9%200-15%202-16%206l-1%203-15-1h-14l1-4c2-13%206-17%2014-13l3%202%201-2c3-4%204-13%204-21v-6l-26-1h-26v5m85%2042c0%2010%201%2013%204%2014l3%201h2l2-1h2l1%201%201-2%201%201v1l1-1h3l2-1%203-1%203-1%201-1h3l1-1h-1c-1%200-1-1%201-2v-2h-2c0-2-2-4-4-3l-2-1c-1-1%200-1%203-1l-6-1-14-1c-3-1-4-1-4%201l-2%202c-2-1-1-4%201-4%201-1%201-1-1-1-2-1-2-1-2%204m-85%2062l-3%2011c-2%201-6%201-8-1h-5l-4%203c0%204%2016%205%2022%202%204-2%205-4%207-14%201-12%202-11-3-11h-5l-1%2010m20-8c-7%204-3%2010%207%2013l8%203c2%204-8%205-13%202-3-2-11%200-9%203%205%206%2027%205%2030-1%203-5%200-9-10-12-7-2-8-3-7-5h13l3-2-3-1c-4-3-15-3-19%200m48%2031c-4%202-9%206-9%208l3-1c5-5%2010-5%2023-4l15%202c8%202%205%200-5-2-12-4-22-5-27-3'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.6483516483516483,"src":"/static/c2e2602606aecbaead43ebcb31d5fc22/2a4de/javascript.png","srcSet":"/static/c2e2602606aecbaead43ebcb31d5fc22/6d161/javascript.png 150w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/630fb/javascript.png 300w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/2a4de/javascript.png 600w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/5e6f2/javascript.png 789w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/center-align-things-with-css","title":"Center aligning content with CSS and flex-box","tags":["html","css","reactjs"],"excerpt":"Many a time I noticed that people find it very difficult to align content to the center either vertically or horizontally using CSS. So let's see few ways in how you can align content with css.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20134v133h401V0H0v134m41-69v12h154V52H41v13m167-1v11h72V52h-72v12m81%203v14h73V52h-73v15m-46%2014c-40%200-36-1-35%2010v5h72v-8l-1-7h-36M41%20109v26h72V83H41v26m82-25v82c0%202%203%202%2036%202h36V83h-36l-36%201m166%2012v10h73V86h-73v10m-82%206v13l1%2012h72v-26h-36l-37%201m83%2015c-1%2010-5%209%2036%209h35v-15h-71v6m-82%2033v18h153v-36H208v18m-167%203v14h36l36%201v-29H41v14m10%2032c-15%203-14%2026%200%2030%207%202%2017-4%2017-9%200-4-5-4-9%200-6%206-15-4-9-11%203-4%206-4%209-1l6%203c3%200%203%200%203-3-2-7-10-11-17-9m30%201c-9%206-4%2018%206%2018%203%200%205%201%205%203-1%202-7%201-8%200l-5-2c-7%200-1%2010%207%2011s13-3%2013-11c0-5-2-7-9-8-6-1-6-1-6-3%201-2%205-2%207-1l4%202c3%200%203-1%203-3-1-7-10-10-17-6m31-1c-5%203-7%2011-3%2015%201%201%204%203%207%203l6%203c0%203-7%203-7%201-1-3-8-3-8%200%200%207%209%2011%2017%208%209-4%208-16-2-18-6-1-7-1-7-3s5-3%206%200c1%202%208%202%208-1%200-7-9-11-17-8m74%200l-3%201v29h18v-7h-10v-11c0-12%200-13-5-12m123%201c-14%207-9%2030%207%2030l6-2c14-7%209-30-6-30l-7%202m-154%2014v15h8v-9h4c4%200%205-1%205-4v-4h-4c-5%200-5%200-5-3s0-3%205-3h5v-7h-18v15m55-12v28l9-1h9v-7h-5c-6%200-6%200-6-2%200-3%200-3%205-3h5v-3c0-4%200-4-5-4-7-1-6-3%201-4h5v-7h-18v3m26-3l4%207%204%207-4%207c-6%209-6%209-1%209%204%200%205%200%207-4l2-4%202%202%203%204c0%202%209%203%209%201l-4-8-5-7%204-6c5-8%205-8%200-8-4%200-4%200-6%204l-2%203-2-3c-2-4-3-4-7-4h-4m34%2015v15h9c8%200%209%200%2011-2%203-3%204-8%202-11-2-2-2-3-1-5v-6c-2-5-4-6-13-6h-8v15m69-11c6%2010%206%2010%201%2017-5%208-5%209%200%209%204%200%204%200%206-4%203-5%204-5%206%200%201%203%202%204%206%204%205%200%205%200%200-9l-5-7%204-6c5-8%205-8%200-8-3%200-4%200-6%204l-2%203-2-3c-2-4-2-4-7-4h-4l3%204m-27%205c-6%204-2%2014%204%2014%203%200%206-4%206-8s-3-8-6-8l-4%202'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.5,"src":"/static/1c65e8062d6b8d416bbfb2c1b729e891/4fe8c/flexbox-css.jpg","srcSet":"/static/1c65e8062d6b8d416bbfb2c1b729e891/aabdf/flexbox-css.jpg 150w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/9dc27/flexbox-css.jpg 300w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/4fe8c/flexbox-css.jpg 600w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/9842e/flexbox-css.jpg 900w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/8e2a4/flexbox-css.jpg 1140w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}}]}},"pageContext":{"postPath":"blog/react–the-future-of-web-frontend","translations":[{"hreflang":"en","path":"/blog/react–the-future-of-web-frontend"}]}}}