![\"\"](\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/02\/codepen-react-js-settings.png\")
<\/p>\nOne easy way to create React apps is to use Codepen. Using Codepen to practice creating React apps requires you to first\u00a0 set some JS settings. The JavaScript Preprocessor should\u00a0 be set to Babel because we will be using JSX instead of pure JavaScript. The Quick-add select menu can be used to select both the react.development.js and react-dom.development.js resources. (These will be added to the head of the HTML as CDNs). For example:<\/p>\n
<\/p>\n
With these resources set, I will describe how to make the simplest possible React app.<\/p>\n
In the HTML, we simply need to create a div container for our app output. It can be named anything you want. In this case, I named my div “chris”. For example:<\/p>\n
<div id=\"chris\">\r\n<!-- React will render view data here -->\r\n<\/div><\/pre>\nThis div id will be referred to by React.<\/p>\n
<\/p>\n
Step 2: JavaScript<\/h3>\n
In the JavaScript portion of the code, we will be calling the ReactDOM\u00a0
render()<\/code>function. This function takes two arguments:<\/p>\n1. The HTML (or view) to be rendered.<\/p>\n
<h1>Simplest React<\/h1><\/code><\/p>\n2. The JavaScript for targeting our div id.<\/p>\n
document.getElementById('chris')<\/code><\/p>\nFor example:<\/p>\n
ReactDOM.render(\r\n <h1>Simplest React<\/h1>, \r\n document.getElementById('chris')\r\n);<\/pre>\nNotice the first argument to the render function looks like pure HTML and not JavaScript. This is possible because we are using JSX, which is transpiled by Babel, rather than pure JavaScript.<\/p>\n
Here is what the project looks like on codepen:<\/p>\n
\nSee the Pen Simplest React by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n
For more information about getting started with React, see:
\nhttps:\/\/reactjs.org\/docs\/hello-world.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"One easy way to create React apps is to use Codepen. Using Codepen to practice creating React apps requires you to first\u00a0 set some JS settings. The JavaScript Preprocessor should\u00a0 be set to Babel because we will be using JSX instead of pure JavaScript. The Quick-add select menu can be used to select both the … Continue reading React: How to create the simplest app using Codepen<\/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-1591","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\/1591","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=1591"}],"version-history":[{"count":16,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1591\/revisions"}],"predecessor-version":[{"id":2564,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1591\/revisions\/2564"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}