{"id":1607,"date":"2018-03-01T08:05:55","date_gmt":"2018-03-01T13:05:55","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1607"},"modified":"2018-03-14T22:11:55","modified_gmt":"2018-03-15T03:11:55","slug":"react-js-create-simplest-app-using-atom","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/03\/01\/react-js-create-simplest-app-using-atom\/","title":{"rendered":"React: How to create the simplest app using Atom"},"content":{"rendered":"<p>This article is a continuation of the previous article where I created the simplest possible React app in Codepen:<span id=\"sample-permalink\"><\/span><span id=\"edit-slug-buttons\"><\/span><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"tqCaI3iCU5\"><p><a href=\"http:\/\/bluegalaxy.info\/codewalk\/2018\/03\/01\/react-js-create-simplest-app\/\">React: How to create the simplest app using Codepen<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"http:\/\/bluegalaxy.info\/codewalk\/2018\/03\/01\/react-js-create-simplest-app\/embed\/#?secret=tqCaI3iCU5\" data-secret=\"tqCaI3iCU5\" width=\"600\" height=\"338\" title=\"&#8220;React: How to create the simplest app using Codepen&#8221; &#8212; Chris Nielsen Code Walk\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p>A second way to create React apps is to use a text editor such as Atom, and reference the necessary resources via CDNs (content delivery networks).\u00a0 In this case, I will start with a blank index.html file that looks like this:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n    &lt;title&gt;Project Name&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h3>Step 1: Add CDNs to the &lt;head&gt;<\/h3>\n<p>For this React project to work, we need three resources:<\/p>\n<p>1. react.development.js<br \/>\n2. react-dom.development.js<br \/>\n3. babel.min.js<\/p>\n<p>These can either be downloaded and referrred to as local references, or we can refer to the outside CDNs. For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;script src=\"https:\/\/unpkg.com\/react\/umd\/react.development.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/unpkg.com\/react-dom\/umd\/react-dom.development.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"&gt;&lt;\/script&gt;<\/pre>\n<h3><\/h3>\n<h3>Step 2: Add div to the &lt;body&gt;<\/h3>\n<div class=\"wp-editor-tabs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div id=\"chris\"&gt;&lt;\/div&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h3>Step 3: Add &lt;script&gt; tags in the &lt;body&gt;<\/h3>\n<p>Since we are using Babel to transpile the React JSX code, we need to use type=&#8221;text\/babel&#8221; in the opening script tag:<\/p>\n<\/div>\n<div>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;script type=\"text\/babel\"&gt;\r\n&lt;\/script&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h3>Step 4: Add the React code in the &lt;script&gt; container<\/h3>\n<\/div>\n<div id=\"wp-content-editor-tools\" class=\"wp-editor-tools hide-if-no-js\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">      ReactDOM.render(\r\n        &lt;h1&gt;Simplest React App&lt;\/h1&gt;,\r\n        document.getElementById('chris')\r\n        );<\/pre>\n<h2><\/h2>\n<\/div>\n<p>Here is the complete code:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n    &lt;script src=\"https:\/\/unpkg.com\/react\/umd\/react.development.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/unpkg.com\/react-dom\/umd\/react-dom.development.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;title&gt;Simplest React&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"chris\"&gt;&lt;\/div&gt;\r\n\r\n    &lt;script type=\"text\/babel\"&gt;\r\n\r\n      ReactDOM.render(\r\n        &lt;h1&gt;Simplest React App&lt;\/h1&gt;,\r\n        document.getElementById('chris')\r\n      );\r\n\r\n    &lt;\/script&gt;\r\n\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Here is what it looks like in Atom:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1616\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/simlest-app-atom.png\" alt=\"\" width=\"745\" height=\"558\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/simlest-app-atom.png 745w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/simlest-app-atom-300x225.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/simlest-app-atom-676x506.png 676w\" sizes=\"auto, (max-width: 745px) 100vw, 745px\" \/><\/p>\n<div id=\"wp-content-editor-tools\" class=\"wp-editor-tools hide-if-no-js\">\n<p>When opening the index.html file, the result looks like this:<\/p>\n<h2>Simplest React App<\/h2>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This article is a continuation of the previous article where I created the simplest possible React app in Codepen: React: How to create the simplest app using Codepen A second way to create React apps is to use a text editor such as Atom, and reference the necessary resources via CDNs (content delivery networks).\u00a0 In &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/03\/01\/react-js-create-simplest-app-using-atom\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">React: How to create the simplest app using Atom<\/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-1607","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\/1607","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=1607"}],"version-history":[{"count":14,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1607\/revisions"}],"predecessor-version":[{"id":2559,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1607\/revisions\/2559"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}