{"id":51,"date":"2018-11-16T23:42:46","date_gmt":"2018-11-16T23:42:46","guid":{"rendered":"http:\/\/localhost\/sov03\/?p=51"},"modified":"2020-10-17T01:25:03","modified_gmt":"2020-10-17T01:25:03","slug":"react","status":"publish","type":"post","link":"https:\/\/s-oneill.com\/sov02\/react\/","title":{"rendered":"React"},"content":{"rendered":"<p>According to <a href=\"https:\/\/reactjs.org\/tutorial\/tutorial.html\">reactjs.org<\/a>\u00a0:<\/p>\n<p style=\"padding-left: 30px;\"><em>React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called \u201ccomponents\u201d.\u00a0<\/em><\/p>\n<p>React was among the most adopted JS frameworks in 2017, along with Angular 1 &amp; 2 and Vue (and those who use &#8220;no framework&#8221;) according to <a href=\"https:\/\/2017.stateofjs.com\/2017\/front-end\/results\/\">stateofjs.com<\/a>, and <a href=\"https:\/\/medium.com\/javascript-scene\/top-javascript-libraries-tech-to-learn-in-2018-c38028e028e6\">medium.com<\/a>.<\/p>\n<p>Each framework has very strong community support, and usage reports can be a bit subjective depending on which camp it comes from.\u00a0<\/p>\n<h4>Helpful References<\/h4>\n<p>When it&#8217;s been a while since I&#8217;ve worked in React, Pluralsight has some helpful go to references.<\/p>\n<ul>\n<li><a href=\"https:\/\/app.pluralsight.com\/library\/courses\/react-js-getting-started\/table-of-contents\" target=\"_blank\" rel=\"noopener noreferrer\">React: Getting Started<\/a><\/li>\n<li><a href=\"https:\/\/app.pluralsight.com\/library\/courses\/react-redux-react-router-es6\/table-of-contents\" target=\"_blank\" rel=\"noopener noreferrer\">Building Apps w\/React &amp; Redux<\/a><\/li>\n<li><a href=\"https:\/\/app.pluralsight.com\/library\/courses\/react-flux-building-applications\/table-of-contents\" target=\"_blank\" rel=\"noopener noreferrer\">Building Apps w\/React &amp; Flux<\/a><\/li>\n<li><a href=\"https:\/\/app.pluralsight.com\/library\/courses\/building-server-side-rendered-react-apps-beginners\/table-of-contents\" target=\"_blank\" rel=\"noopener noreferrer\">Building Server-side Rendered React Apps<\/a><\/li>\n<\/ul>\n<p>React and Angular have much in common, but getting components from one version to work well with another can be time consuming. And although two React apps are using Redux (or Flux), if the packages selected by each developer (or team) differ drastically, it may just be better to build from scratch.<\/p>\n<p>While Angular is a <strong>framework<\/strong> that attempts to cover a wide spectrum of client-side requirements, the React <strong>library<\/strong> focuses more narrowly on client side rendering and event handling. This allows greater freedom for developers to choose which other tools to use, a big advantage when incorporating React into existing applications.<\/p>\n<p>Although flexibility is usually desirable, using a variety of tools across different apps can make it difficult to merge applications or leverage modules among applications. If this is important in your enterprise, it should be considered when deciding on a library or framework. Will more flexibility, or more consistency be of greater value?<\/p>\n<p>Once the decision is made, you&#8217;ll want to support the decision and focus on the chosen library or framework, rather than fight to work with something else. While it&#8217;s good to have a broad understanding of tools, when your goal is to be an expert, it helps to focus. This may be why community members from each camp seem so zealous about their choice.<\/p>\n<h2>Getting Started<\/h2>\n<p>The <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener noreferrer\">Reactjs.org Getting Started page<\/a> provides an excellent introduction for getting familiar with React, including this sample <a href=\"https:\/\/raw.githubusercontent.com\/reactjs\/reactjs.org\/master\/static\/html\/single-file-example.html\" target=\"_blank\" rel=\"noopener noreferrer\">Hello World HTML example<\/a>.<\/p>\n<p>By importing these three files:<\/p>\n<ul>\n<li>https:\/\/unpkg.com\/react@16\/umd\/react.development.js<\/li>\n<li>https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js<\/li>\n<li>https:\/\/unpkg.com\/babel-standalone@6.15.0\/babel.min.js<\/li>\n<\/ul>\n<p style=\"padding-left: 30px; text-align: left;\">The sample page is able to process this small React instruction:<\/p>\n<div style=\"padding-left: 26px; font-size: 11px;\">&lt; div id=&#8221;root&#8221; &gt; &lt; \/div &gt;<br \/>&lt; script type=&#8221;text\/babel&#8221; &gt;<br \/>ReactDOM.render(<br \/>&lt; h1 &gt; Hello, world!&lt; \/h1 &gt; ,<br \/>document.getElementById(&#8216;root&#8217;)<br \/>);<br \/>&lt; \/script &gt;<\/div>\n<p style=\"padding-left: 30px;\">However, it clearly states this sample is for development purposes only with this comment:<\/p>\n<div style=\"padding-left: 26px; font-size: 11px;\">&lt; !&#8211;<br \/>Note: this page is a great way to try React but it&#8217;s not suitable for production.<br \/>It slowly compiles JSX with Babel in the browser and uses a large development build of React.<br \/>Read this section for a production-ready setup with JSX:<br \/>https:\/\/reactjs.org\/docs\/add-react-to-a-website.html#add-jsx-to-a-project<br \/>In a larger project, you can use an integrated toolchain that includes JSX instead:<br \/>https:\/\/reactjs.org\/docs\/create-a-new-react-app.html<br \/>You can also use React without JSX, in which case you can remove Babel:<br \/>https:\/\/reactjs.org\/docs\/react-without-jsx.html<br \/>&#8212; &gt;<\/div>\n<p style=\"padding-left: 30px;\">The page offers recommendations for the proper way to use React, which will be explored in future discussions.<\/p>\n<p>\u00a0<\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>According to reactjs.org\u00a0: React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called \u201ccomponents\u201d.\u00a0 React was among the most adopted JS frameworks in 2017, along with Angular 1 &amp; 2 and Vue (and those who use &#8220;no framework&#8221;) [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[35,6],"tags":[21,24,26],"class_list":["post-51","post","type-post","status-publish","format-standard","hentry","category-developer","category-react","tag-javascript","tag-react","tag-single-page"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React - s-oneill.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/s-oneill.com\/sov02\/react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React - s-oneill.com\" \/>\n<meta property=\"og:description\" content=\"According to reactjs.org\u00a0: React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called \u201ccomponents\u201d.\u00a0 React was among the most adopted JS frameworks in 2017, along with Angular 1 &amp; 2 and Vue (and those who use &#8220;no framework&#8221;) [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/s-oneill.com\/sov02\/react\/\" \/>\n<meta property=\"og:site_name\" content=\"s-oneill.com\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-16T23:42:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-17T01:25:03+00:00\" \/>\n<meta name=\"author\" content=\"sean o\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"sean o\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/react\/\"},\"author\":{\"name\":\"sean o\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\"},\"headline\":\"React\",\"datePublished\":\"2018-11-16T23:42:46+00:00\",\"dateModified\":\"2020-10-17T01:25:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/react\/\"},\"wordCount\":555,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\"},\"keywords\":[\"Javascript\",\"React\",\"single-page\"],\"articleSection\":[\"Developer\",\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/s-oneill.com\/sov02\/react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/react\/\",\"url\":\"https:\/\/s-oneill.com\/sov02\/react\/\",\"name\":\"React - s-oneill.com\",\"isPartOf\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#website\"},\"datePublished\":\"2018-11-16T23:42:46+00:00\",\"dateModified\":\"2020-10-17T01:25:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/s-oneill.com\/sov02\/react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/s-oneill.com\/sov02\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/#website\",\"url\":\"https:\/\/s-oneill.com\/sov02\/\",\"name\":\"s-oneill.com\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/s-oneill.com\/sov02\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\",\"name\":\"sean o\",\"logo\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/image\/\"},\"description\":\"Web dev over 15 years.\",\"sameAs\":[\"http:\/\/s-oneill.com\"],\"url\":\"https:\/\/s-oneill.com\/sov02\/author\/s-oneill\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React - s-oneill.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/s-oneill.com\/sov02\/react\/","og_locale":"en_US","og_type":"article","og_title":"React - s-oneill.com","og_description":"According to reactjs.org\u00a0: React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called \u201ccomponents\u201d.\u00a0 React was among the most adopted JS frameworks in 2017, along with Angular 1 &amp; 2 and Vue (and those who use &#8220;no framework&#8221;) [&hellip;]","og_url":"https:\/\/s-oneill.com\/sov02\/react\/","og_site_name":"s-oneill.com","article_published_time":"2018-11-16T23:42:46+00:00","article_modified_time":"2020-10-17T01:25:03+00:00","author":"sean o","twitter_card":"summary_large_image","twitter_misc":{"Written by":"sean o","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/s-oneill.com\/sov02\/react\/#article","isPartOf":{"@id":"https:\/\/s-oneill.com\/sov02\/react\/"},"author":{"name":"sean o","@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a"},"headline":"React","datePublished":"2018-11-16T23:42:46+00:00","dateModified":"2020-10-17T01:25:03+00:00","mainEntityOfPage":{"@id":"https:\/\/s-oneill.com\/sov02\/react\/"},"wordCount":555,"commentCount":0,"publisher":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a"},"keywords":["Javascript","React","single-page"],"articleSection":["Developer","React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/s-oneill.com\/sov02\/react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/s-oneill.com\/sov02\/react\/","url":"https:\/\/s-oneill.com\/sov02\/react\/","name":"React - s-oneill.com","isPartOf":{"@id":"https:\/\/s-oneill.com\/sov02\/#website"},"datePublished":"2018-11-16T23:42:46+00:00","dateModified":"2020-10-17T01:25:03+00:00","breadcrumb":{"@id":"https:\/\/s-oneill.com\/sov02\/react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/s-oneill.com\/sov02\/react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/s-oneill.com\/sov02\/react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/s-oneill.com\/sov02\/"},{"@type":"ListItem","position":2,"name":"React"}]},{"@type":"WebSite","@id":"https:\/\/s-oneill.com\/sov02\/#website","url":"https:\/\/s-oneill.com\/sov02\/","name":"s-oneill.com","description":"","publisher":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/s-oneill.com\/sov02\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a","name":"sean o","logo":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/image\/"},"description":"Web dev over 15 years.","sameAs":["http:\/\/s-oneill.com"],"url":"https:\/\/s-oneill.com\/sov02\/author\/s-oneill\/"}]}},"_links":{"self":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":15,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":680,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/51\/revisions\/680"}],"wp:attachment":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}