{"id":5402,"date":"2018-10-10T11:29:00","date_gmt":"2018-10-10T05:59:00","guid":{"rendered":"\/?p=5402"},"modified":"2019-12-31T16:09:02","modified_gmt":"2019-12-31T10:39:02","slug":"beginners-guide-to-react-js","status":"publish","type":"post","link":"https:\/\/www.argildx.us\/miscellaneous\/beginners-guide-to-react-js\/","title":{"rendered":"Beginners&#8217; Guide to React JS"},"content":{"rendered":"<p><em>React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes.<\/em><\/p>\n<p><em>&#8211; Official React Documentation<\/em><\/p>\n<h6><b>Glossary:<\/b><\/h6>\n<p>React JS and React have been used interchangeably throughout the blog and mean the same thing.<\/p>\n<p>React Native:\u00a0React code that\u00a0is usable across\u00a0the web\u00a0and\u00a0 mobile.<\/p>\n<p>Angular: MVC framework for UI.<\/p>\n<p>Transpiler: A type of compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source code in another programming language.\u00a0Transpiler\u00a0and compiler can be used\u00a0interchangeably.<\/p>\n<p><strong>DOM:<\/strong> Document Object Model is a tree of HTML objects.<\/p>\n<p><strong>Note:<\/strong> This blog\u00a0has been written entirely from my perspective and is what I feel as a newbie to the world of React.<\/p>\n<p>Let&#8217;s get started.<\/p>\n<p>There&#8217;s a lot of good buzz about React out there.<\/p>\n<p>It seems like React JS has become a library many want to try out but somehow, it&#8217;s always out of reach. This blog is aimed towards the audience who is looking for a perfect mix of theory and hands-on.<\/p>\n<h5><b>What is React?<\/b><\/h5>\n<p>React\u00a0provides\u00a0you a templating\u00a0language and some function holders\u00a0to\u00a0primarily\u00a0render\u00a0HTML. That&#8217;s all React\u00a0yields, HTML. React is mainly the view layer. React is\u00a0listed\u00a0in\u00a0the same verticals as other JavaScript\u00a0frameworks but &#8216;React vs Angular&#8217; doesn&#8217;t make sense\u00a0at all\u00a0because they aren&#8217;t directly comparable. Angular is a complete framework (including the view layer).<\/p>\n<h6><b>Is it worth the hype? Why is it getting so popular?<\/b><\/h6>\n<p>These are some of the benefits which make React JS standout among its contemporaries:<\/p>\n<ul>\n<li style=\"text-align: left;\"><strong>Easy to learn and easy to use<\/strong>:\u00a0\u00a0Being able to do awesome things is great, but only if you don\u2019t have to spend the rest of your life becoming perfect in a new technology. React is easy to learn and easy to use and comes with a good supply of\u00a0<a href=\"https:\/\/reactjs.org\/docs\/hello-world.html\">documentation<\/a>\u00a0and an exponentially growing community.\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5424\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/github-stars.jpg\" alt=\"\" width=\"876\" height=\"489\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/github-stars.jpg 876w, https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/github-stars-300x167.jpg 300w, https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/github-stars-768x429.jpg 768w\" sizes=\"(max-width: 876px) 100vw, 876px\" \/><br \/>\n<span class=\"TextRun SCXW187965216\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW187965216\">A\u00a0<\/span><\/span><span class=\"TextRun SCXW187965216\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"SpellingError SCXW187965216\">Github<\/span><\/span><span class=\"TextRun SCXW187965216\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW187965216\">\u00a0Stars History for Angular, React &amp; Vue (<\/span><\/span><a class=\"Hyperlink SCXW187965216\" href=\"http:\/\/www.timqian.com\/star-history\/#facebook\/react&amp;angular\/angular&amp;vuejs\/vue\" target=\"_blank\" rel=\"noopener noreferrer\"><span class=\"TextRun Underlined SCXW187965216\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW187965216\">Source<\/span><\/span><\/a><span class=\"TextRun SCXW187965216\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW187965216\">)<\/span><\/span><\/p>\n<\/li>\n<li><strong>Components:<\/strong> Everything in React is a component (will be explained\u00a0later on).\u00a0They are like the basic building blocks for your\u00a0application\u00a0.\u00a0Components\u00a0help you break your design into smaller parts\u00a0that can\u00a0be worked upon.<\/li>\n<li><strong>The Virtual DOM:<\/strong> One of the\u00a0really cool\u00a0parts of React is the virtual DOM.\u00a0Usually,\u00a0when you develop an app that has a lot of user interaction and data\u00a0changes, you\u00a0have to\u00a0carefully\u00a0notice\u00a0how your app\u2019\u00a0design\u00a0is going to influence\u00a0performance. Even with\u00a0quick\u00a0client\u00a0side\u00a0browsers, extensive DOM manipulation can be a performance\u00a0deteriorator\u00a0and result in an annoying user experience. Worse, because the DOM is tree-structured, simple changes at the top level can cause huge problems. React\u00a0caters\u00a0this by using a virtual DOM. This is, as the name implies, a virtual representation of the DOM. Any new view changes are first performed on the virtual DOM, which lives in memory and not on your screen.<img decoding=\"async\" class=\"alignnone wp-image-5423 size-full\" src=\"\/wp-content\/uploads\/2018\/10\/virtual-dom-e1539150801710.jpg\" alt=\"\" width=\"1364\" height=\"782\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/virtual-dom-e1539150801710.jpg 1364w, https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/virtual-dom-e1539150801710-300x172.jpg 300w, https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/virtual-dom-e1539150801710-768x440.jpg 768w, https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/virtual-dom-e1539150801710-1024x587.jpg 1024w, https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/virtual-dom-e1539150801710-1080x619.jpg 1080w\" sizes=\"(max-width: 1364px) 100vw, 1364px\" \/><\/li>\n<\/ul>\n<p>An efficient algorithm then determines the changes made to the virtual DOM to identify the changes that need to be made to the real DOM. It then determines the most\u00a0suitable\u00a0way to make these changes and then applies only those changes to the real DOM. This\u00a0ensures\u00a0a minimum update time to the real DOM, providing higher performance and a cleaner user experience all around.<\/p>\n<h6><b>All that is fine but\u00a0<\/b><b>what&#8217;s<\/b><b>\u00a0up<\/b><b>\u00a0with all that\u00a0<\/b><b>jargon ?<\/b><\/h6>\n<ul>\n<li><strong>Component:<\/strong> A React app comprises of components. A component is a reusable piece of code which defines how\u00a0some\u00a0features should look. All the parts you see in the below picture can be broken down into different components like the button, the display panel, all clubbed as a single component.<img decoding=\"async\" class=\"alignnone size-full wp-image-5425\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/calculator-component.jpg\" alt=\"\" width=\"607\" height=\"312\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/calculator-component.jpg 607w, https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/calculator-component-300x154.jpg 300w\" sizes=\"(max-width: 607px) 100vw, 607px\" \/><\/li>\n<li><strong>Properties\u00a0(props):<\/strong> We can pass data to our components that remain unchanged throughout the lifecycle of that component. We can even pass methods as data in our props.<\/li>\n<li><strong><span class=\"TextRun Underlined SCXW214555430\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW214555430\">State<\/span><\/span><span class=\"TextRun SCXW214555430\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW214555430\">:<\/span><\/span><\/strong><span class=\"TextRun SCXW214555430\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW214555430\"><strong>\u00a0<\/strong>A\u00a0<\/span><\/span><span class=\"TextRun SCXW214555430\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW214555430\">state, as<\/span><\/span><span class=\"TextRun SCXW214555430\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW214555430\">\u00a0the name suggests, defines the state of a component. Unlike props, they can change on\u00a0<\/span><\/span><span class=\"TextRun SCXW214555430\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW214555430\">user-based<\/span><\/span><span class=\"TextRun SCXW214555430\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW214555430\">\u00a0interactions and internal calculations. Think of them as observable data that control the\u00a0<\/span><\/span><span class=\"TextRun SCXW214555430\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW214555430\">behaviour<\/span><\/span><span class=\"TextRun SCXW214555430\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW214555430\">\u00a0of the component.\u00a0<\/span><\/span><\/li>\n<li><strong><span class=\"TextRun Underlined SCXW78451302\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW78451302\">JSX:<\/span><\/span><\/strong><span class=\"TextRun SCXW78451302\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW78451302\"><strong>\u00a0<\/strong>It is basically a\u00a0<\/span><\/span><span class=\"TextRun SCXW78451302\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"SpellingError SCXW78451302\">flavour<\/span><\/span><span class=\"TextRun SCXW78451302\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW78451302\">\u00a0of JS that can constitute HTML as well. It is highly\u00a0<\/span><\/span><span class=\"TextRun SCXW78451302\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW78451302\">intelligible<\/span><\/span><span class=\"TextRun SCXW78451302\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW78451302\">. JSX (JavaScript Extended) is not understood by the browser. So, the browser doesn&#8217;t freak out, we use a\u00a0<\/span><\/span><span class=\"TextRun SCXW78451302\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"SpellingError SCXW78451302\">transpiler<\/span><\/span><span class=\"TextRun SCXW78451302\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"TextRun SCXW78451302\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"TextRun SCXW78451302\" lang=\"EN-US\" xml:lang=\"EN-US\"><span class=\"NormalTextRun SCXW78451302\">\u00a0like Babel which converts JSX into regular JS and renders HTML out of it.<\/span><\/span><\/span><\/span><img decoding=\"async\" class=\"alignnone wp-image-5426 size-full\" src=\"\/wp-content\/uploads\/2018\/10\/jsx-flow-e1539150962884.jpg\" alt=\"\" width=\"1572\" height=\"701\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/jsx-flow-e1539150962884.jpg 1440w, https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/jsx-flow-e1539150962884-300x134.jpg 300w, https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/jsx-flow-e1539150962884-768x342.jpg 768w, https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/jsx-flow-e1539150962884-1024x457.jpg 1024w, https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/jsx-flow-e1539150962884-1080x482.jpg 1080w\" sizes=\"(max-width: 1572px) 100vw, 1572px\" \/><\/li>\n<\/ul>\n<p>We will take up something to code on React in the next part of this blog&#8230;<\/p>\n<h5><b>My view about React Js\u00a0<\/b><\/h5>\n<p>Coming from JAVA background and having\u00a0noob level knowledge\u00a0about fronted (JS, CSS, HTML)\u00a0lingo, React JS didn&#8217;t feel like something that couldn&#8217;t be done. A basic syntax of JS (maybe ECMA\u00a06) is what you need to know to get started.<\/p>\n<p>Effort required is a lot less as compared to other JS libraries and frameworks\u00a0( Angular\u00a0for example).<br \/>\nAlso\u00a0when you know that you are getting into something that is largely industry friendly and has a great developer community, it just feels the right thing to do.<br \/>\nReact JS when combined with react-router and react-bootstrap, serves as a complete package.<\/p>\n<p>When I first encountered JSX as HTML being written inside JS, the idea itself sounded crazy. I thought why\u00a0would anybody\u00a0want that. But<br \/>\nafter spending some time with it, everything made a lot of sense. The ability to re-render components based on state changes in the most efficient way is what makes React stand apart.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes. &#8211; Official React Documentation Glossary: React JS and React have been used interchangeably throughout the blog and mean the &#8230; <a title=\"Beginners&#8217; Guide to React JS\" class=\"read-more\" href=\"https:\/\/www.argildx.us\/miscellaneous\/beginners-guide-to-react-js\/\">Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":7281,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","content-type":"","footnotes":""},"categories":[317],"tags":[104,105,106,107],"yst_prominent_words":[868,856,864,834,865,867,857,855,863,862,854,859,852,861,858,721,739,860,866,853],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v14.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React JS and its Uses and Functionalities | Beginners&#039; Guide by Argil DX<\/title>\n<meta name=\"description\" content=\"Discover the functionality and uses of React JS from the perspective of an enthusiastic developer. See how it compares to other languages like Angular.\" \/>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.argildx.us\/miscellaneous\/beginners-guide-to-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React JS and its Uses and Functionalities | Beginners&#039; Guide by Argil DX\" \/>\n<meta property=\"og:description\" content=\"Discover the functionality and uses of React JS from the perspective of an enthusiastic developer. See how it compares to other languages like Angular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.argildx.us\/miscellaneous\/beginners-guide-to-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Argil DX\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-10T05:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-31T10:39:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/beginner-guide-to-react-js.png\" \/>\n\t<meta property=\"og:image:width\" content=\"431\" \/>\n\t<meta property=\"og:image:height\" content=\"233\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.argildx.us\/#website\",\"url\":\"https:\/\/www.argildx.us\/\",\"name\":\"Argil DX\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.argildx.us\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.argildx.us\/miscellaneous\/beginners-guide-to-react-js\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/beginner-guide-to-react-js.png\",\"width\":431,\"height\":233,\"caption\":\"A person working on a laptop with a neutron ring floating ahead of him with the words react beginner\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.argildx.us\/miscellaneous\/beginners-guide-to-react-js\/#webpage\",\"url\":\"https:\/\/www.argildx.us\/miscellaneous\/beginners-guide-to-react-js\/\",\"name\":\"React JS and its Uses and Functionalities | Beginners' Guide by Argil DX\",\"isPartOf\":{\"@id\":\"https:\/\/www.argildx.us\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.argildx.us\/miscellaneous\/beginners-guide-to-react-js\/#primaryimage\"},\"datePublished\":\"2018-10-10T05:59:00+00:00\",\"dateModified\":\"2019-12-31T10:39:02+00:00\",\"author\":{\"@id\":\"https:\/\/www.argildx.us\/#\/schema\/person\/969a377a8d70cf16bc97973f2e4b29f9\"},\"description\":\"Discover the functionality and uses of React JS from the perspective of an enthusiastic developer. See how it compares to other languages like Angular.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.argildx.us\/miscellaneous\/beginners-guide-to-react-js\/\"]}]},{\"@type\":[\"Person\"],\"@id\":\"https:\/\/www.argildx.us\/#\/schema\/person\/969a377a8d70cf16bc97973f2e4b29f9\",\"name\":\"Ankur Mittal\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.argildx.us\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b53770858509aaced3853b72ddcab92c?s=96&d=mm&r=g\",\"caption\":\"Ankur Mittal\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts\/5402"}],"collection":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/comments?post=5402"}],"version-history":[{"count":0,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts\/5402\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/media\/7281"}],"wp:attachment":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/media?parent=5402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/categories?post=5402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/tags?post=5402"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/yst_prominent_words?post=5402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}