{"id":1580,"date":"2018-03-01T08:03:26","date_gmt":"2018-03-01T13:03:26","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1580"},"modified":"2018-03-14T22:12:24","modified_gmt":"2018-03-15T03:12:24","slug":"react-js-introduction-main-concepts","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/03\/01\/react-js-introduction-main-concepts\/","title":{"rendered":"React: Introduction to the main concepts"},"content":{"rendered":"<p>React is a JavaScript library for building user interfaces, specifically, single page applications (SPAs). It is more of a library than a framework. In the MVC (<strong>M<\/strong>odel <strong>V<\/strong>iew <strong>C<\/strong>ontroller) paradigm, React takes care of the View. It is in charge of rendering a new view (either by rendering new HTML or changing CSS) in response to a change in application state.<\/p>\n<p>The React-DOM is a virtual\u00a0 DOM that is used for rapidly updating a web page. React uses a diffing algorithm to check it\u2019s virtual DOM compared to the real DOM when some action occurs. It starts at the top of the document tree and as soon as a change (difference) is found, React will substitute the node from its virtual DOM into the real DOM node. In other words, React uses a virtual DOM to generate a real DOM patch. This is shown in the graphic below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1581 size-full\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/reactdom.png\" alt=\"\" width=\"2670\" height=\"1876\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/reactdom.png 2670w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/reactdom-300x211.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/reactdom-768x540.png 768w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/reactdom-1024x719.png 1024w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/reactdom-676x475.png 676w\" sizes=\"auto, (max-width: 2670px) 100vw, 2670px\" \/><\/p>\n<p>For more background information about DOMs, see the informative article here:<br \/>\n<a href=\"https:\/\/auth0.com\/blog\/face-off-virtual-dom-vs-incremental-dom-vs-glimmer\/\">https:\/\/auth0.com\/blog\/face-off-virtual-dom-vs-incremental-dom-vs-glimmer\/<\/a><\/p>\n<p>Some benefits of React include:<\/p>\n<ul>\n<li>Fast and efficient &#8220;diffing&#8221; algorithm compared to dirty-check. (Update of sub-tree only)<\/li>\n<li>Multiple frontends (JSX, hyperscript). Can use JSX\/Babel, but can also use pure JavaScript.<\/li>\n<li>Not tied to a specific framework (like Ember Glimmer). Can be used without React i.e. as an independent engine<\/li>\n<\/ul>\n<p>Here is what a virtual DOM expert named Matt Esch <a href=\"https:\/\/stackoverflow.com\/questions\/21109361\/why-is-reacts-concept-of-virtual-dom-said-to-be-more-performant-than-dirty-mode\">wrote<\/a> about the React virtual DOM:<\/p>\n<blockquote><p>There are in fact 2 problems that need to be solved here:<\/p>\n<p>1. When do I re-render? Answer: When I observe that the data is dirty.<br \/>\n2. How do I re-render efficiently? Answer: Using a virtual DOM to generate a real DOM patch<\/p>\n<p>In React, each of your components have a state. This state is like an observable you might find in knockout or other MVVM style libraries. Essentially, React knows when to re-render the scene because it is able to observe when this data changes. Dirty checking is slower than observables because you must poll the data at a regular interval and check all of the values in the data structure recursively. By comparison, setting a value on the state will signal to a listener that some state has changed, so React can simply listen for change events on the state and queue up re-rendering.<\/p>\n<p>The virtual DOM is used for efficient re-rendering of the DOM. This isn&#8217;t really related to dirty checking your data. You could re-render using a virtual DOM with or without dirty checking. You&#8217;re right in that there is some overhead in computing the diff between two virtual trees, but the virtual DOM diff is about understanding what needs updating in the DOM and not whether or not your data has changed. In fact, the diff algorithm is a dirty checker itself but it is used to see if the DOM is dirty instead.<br \/>\nWe aim to re-render the virtual tree only when the state changes. So using an observable to check if the state has changed is an efficient way to prevent unnecessary re-renders, which would cause lots of unnecessary tree diffs. If nothing has changed, we do nothing.<\/p>\n<p>A virtual DOM is nice because it lets us write our code as if we were re-rendering the entire scene. Behind the scenes we want to compute a patch operation that updates the DOM to look how we expect. So while the virtual DOM diff\/patch algorithm is probably not the optimal solution, it gives us a very nice way to express our applications. We just declare exactly what we want and React\/virtual-dom will work out how to make your scene look like this. We don&#8217;t have to do manual DOM manipulation or get confused about previous DOM state. We don&#8217;t have to re-render the entire scene either, which could be much less efficient than patching it.<\/p><\/blockquote>\n<p>Here are some of the things the official React.js website says about React:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1587 size-full\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/react-pros.png\" alt=\"\" width=\"1252\" height=\"328\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/react-pros.png 1252w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/react-pros-300x79.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/react-pros-768x201.png 768w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/react-pros-1024x268.png 1024w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/react-pros-676x177.png 676w\" sizes=\"auto, (max-width: 1252px) 100vw, 1252px\" \/><\/p>\n<p>For more information about React, see the official website here:<br \/>\n<a href=\"https:\/\/reactjs.org\/\">https:\/\/reactjs.org\/<\/a><br \/>\n<a href=\"https:\/\/reactjs.org\/docs\/hello-world.html\">https:\/\/reactjs.org\/docs\/hello-world.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React is a JavaScript library for building user interfaces, specifically, single page applications (SPAs). It is more of a library than a framework. In the MVC (Model View Controller) paradigm, React takes care of the View. It is in charge of rendering a new view (either by rendering new HTML or changing CSS) in response &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/03\/01\/react-js-introduction-main-concepts\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">React: Introduction to the main concepts<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,111],"tags":[45,110],"class_list":["post-1580","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-react-js","tag-javascript","tag-react-js"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1580"}],"version-history":[{"count":7,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1580\/revisions"}],"predecessor-version":[{"id":1726,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1580\/revisions\/1726"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}