{"id":4369,"date":"2018-08-18T19:34:58","date_gmt":"2018-08-18T19:34:58","guid":{"rendered":"https:\/\/max-drake.cc\/?p=4369"},"modified":"2018-08-18T19:38:33","modified_gmt":"2018-08-18T19:38:33","slug":"starting-with-npm-and-react-js","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=4369","title":{"rendered":"Starting with npm and React JS"},"content":{"rendered":"<p>I have been going along to\u00a0 <a href=\"https:\/\/www.meetup.com\/WellingtonJS\/\" target=\"_blank\" rel=\"noopener\">Wellington JS<\/a> meetups.\u00a0 The last one was <a href=\"https:\/\/www.meetup.com\/WellingtonJS\/events\/251639180\/\" target=\"_blank\" rel=\"noopener\">Konstantin Raev &#8220;Using Open Source responsibly: why Yarn was created<\/a>&#8220;. His talk was focused on React Native and Yarn as a download\u00a0 of packages versus npm. He gave some interesting statistics of how popular npm was compared to other package managers and issues with open source. &#8220;<span class=\"near-white f4 fw2 lh-copy\"><em>npm is the package manager for JavaScript and the world\u2019s largest software registry<\/em>&#8220;.<\/span><\/p>\n<p>I had come across <strong>npm<\/strong> before but didn&#8217;t know much about it apart from it being a download process.I have done a little bit of linux where you upload packages but was a bit unsure where they came from. I am used to windows download zip, msi or exe and installing in windows. I only became a bit more confident with downloading packages with python and the pip install process (although I have had a reasonable amount of packages get a bit miffy and not load). So I thought I&#8217;d give the npm process a go. I also had heard of <strong>React<\/strong> but didn&#8217;t know too much about that either. So I thought I&#8217;d try setting it up to see what it is and how it works.<\/p>\n<p>So, as far as I can tell, there is ReactJS and ReactNative. React Native is more focused on Mobile and React JS is more general. Also there are packages such as Angular &amp; Vue that are in the same space as well. Apparently Angular is a whole Framework whereas React JS is a view library, so smaller. Also React JS only focuses on the user interface.<\/p>\n<p>So, on trying to understand what ReactJS is I\u00a0 found this video and started to follow it:<\/p>\n<p><iframe title=\"JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/W6NZfCO5SIk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/p>\n<p>In the video he is working on a mac.\u00a0 Initially he sets up using Visual Studio Code. So I decided to try this out. I had used it previously but uninstalled it. This time, I found accessing files in a specific directory and editing them quite easy, so I may use it some more in the future.<\/p>\n<p>About 9 minutes in he goes to terminal and starts typing in npm commands. Also the browser popped up and ended with a url of localhost:3000. There was a presumption that you knew all this stuff. So I stopped the video there and tried different sources.<\/p>\n<p>I then had to search around for how to make &#8221; the Mac Terminal&#8221; equivalent work in windows.\u00a0 After looking around on the interwongle it suggested <a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener\"><strong>downloading node.js<\/strong> <\/a>which I did. The install adds node.js to your path automatically, so you can type it from anywhere.<\/p>\n<p>I also looked at a number of sites, including www.tutorialspoint.com on <a href=\"https:\/\/www.tutorialspoint.com\/reactjs\/reactjs_environment_setup.htm\" target=\"_blank\" rel=\"noopener\"><strong>setting up the react environment<\/strong><\/a>, with no success. I finally came across these videos that I could follow:<\/p>\n<p><iframe title=\"React JS Introduction and Setup for Absolute Beginners\" width=\"678\" height=\"509\" data-src=\"https:\/\/www.youtube.com\/embed\/bUTsVY6VUQA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/p>\n<p>I find his steps are smaller but easier to follow. The loading of react to get it up and running was easier and far fewer packages were loaded. On earlier steps I got a lot of errors from the package load process (maybe they were older versions of the packages that had since been superseded and were not compatible with the environment I was trying to set-up).<\/p>\n<h2>Process<\/h2>\n<p>After downloading and installing node.js you then need to open a command prompt window. Best if its in the directory where you are going to be creating a react APP. So I created a react directory in Downloads (my junk space for working) and opened a command window in there.<\/p>\n<p>C:\\Users\\drake\\Downloads\\react&gt;npm install -g create-react-app<\/p>\n<p>The: <em>npm install -g create-react-app <\/em>downloads all the packages required to make a react-app<\/p>\n<p>After this has loaded these packages once to this directory, you then need to only use:<\/p>\n<p>C:\\Users\\drake\\Downloads\\react&gt;create-react-app\u00a0\u00a0 <strong>test-app<\/strong><\/p>\n<p>The: <strong>test-app<\/strong>\u00a0 is a directory and name of the app that I want , so it created the sub-directory C:\\Users\\drake\\Downloads\\react\\<strong>test-app<\/strong>\u00a0 and installs all the packages and files there.<\/p>\n<p>Then it asks you to change directory into the sub-directory you have created (item 9) then to run :<\/p>\n<p>C:\\Users\\drake\\Downloads\\react\\test-app&gt;npm start\u00a0 (item 10)<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4371 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im10-1-942x1024.jpg\" alt=\"\" width=\"1562\" height=\"1698\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im10-1-942x1024.jpg 942w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im10-1-276x300.jpg 276w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im10-1-768x835.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im10-1.jpg 1350w\" data-sizes=\"(max-width: 1562px) 100vw, 1562px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1562px; --smush-placeholder-aspect-ratio: 1562\/1698;\" \/><\/p>\n<p>This opens your browser in\u00a0\u00a0\u00a0 http:\/\/localhost:3000\/<\/p>\n<p>And displays the screen below: <img decoding=\"async\" class=\"alignnone wp-image-4372 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im13-1-1024x261.jpg\" alt=\"\" width=\"1485\" height=\"379\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im13-1-1024x261.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im13-1-300x77.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im13-1-768x196.jpg 768w\" data-sizes=\"(max-width: 1485px) 100vw, 1485px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1485px; --smush-placeholder-aspect-ratio: 1485\/379;\" \/><\/p>\n<p>If we just go and look at the file structure, in the new sub-directory that has been created:<\/p>\n<p>C:\\Users\\drake\\Downloads\\react\\test-app&gt;<\/p>\n<p>3 sub-directories have been created under this and populated with files:<\/p>\n<ol>\n<li>react\\test-app\\node_modules<\/li>\n<li>react\\test-app\\public<\/li>\n<li>react\\test-app\\src<\/li>\n<\/ol>\n<p>In\u00a0 react\\test-app\\public you will see the index.html and within that file there is a &lt;div&gt; tag:<\/p>\n<div>\n<div>&lt;div id=&#8221;root&#8221;&gt;&lt;\/div&gt;\u00a0 This id=&#8221;root&#8221; is the name of your app , you can change the name, but make sure you change it in the react\\test-app\\src\\index.js file too<\/div>\n<\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-4374 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im11-1024x641.jpg\" alt=\"\" width=\"1570\" height=\"982\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im11-1024x641.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im11-300x188.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im11-768x481.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im11-200x125.jpg 200w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im11.jpg 1513w\" data-sizes=\"(max-width: 1570px) 100vw, 1570px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1570px; --smush-placeholder-aspect-ratio: 1570\/982;\" \/><\/p>\n<p>So in the index.js it calls the\u00a0 <em>document.getElementById(<strong>&#8216;root<\/strong>&#8216;)\u00a0<\/em>\u00a0 where the root is the id in the intex.html file.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-4375 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im14-1-1024x633.jpg\" alt=\"\" width=\"1469\" height=\"908\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im14-1-1024x633.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im14-1-300x186.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im14-1-768x475.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im14-1-200x125.jpg 200w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im14-1.jpg 1513w\" data-sizes=\"(max-width: 1469px) 100vw, 1469px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1469px; --smush-placeholder-aspect-ratio: 1469\/908;\" \/><\/p>\n<p>It then assigns this to &lt;App\/&gt; tag in the Apps.js which is where the browser tells you to go to to alter what is displayed on the web page.<\/p>\n<p>Both index.js &amp; Apps.js\u00a0 both, at the top of the page, have import commands like Python, where they are calling certain code in from specific files.<\/p>\n<p>In index.js\u00a0 it is calling, note the last 2 files, they use the .\/ to indicate they are in the same directory as the ndex.js, and also note that for the .css file it has to explicitly tell you the file type, but for a javascript file you do not need the file extension &#8216;.\/App&#8217; :<\/p>\n<div>\n<ul>\n<li>import React from &#8216;react&#8217;;<\/li>\n<li>import ReactDOM from &#8216;react-dom&#8217;;<\/li>\n<li>import &#8216;.\/index.css&#8217;;<\/li>\n<li>import App from &#8216;.\/App&#8217;;<\/li>\n<\/ul>\n<\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-4373 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im12-1-1024x646.jpg\" alt=\"\" width=\"1487\" height=\"939\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im12-1-1024x646.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im12-1-300x189.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im12-1-768x485.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im12-1-200x125.jpg 200w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im12-1.jpg 1521w\" data-sizes=\"(max-width: 1487px) 100vw, 1487px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1487px; --smush-placeholder-aspect-ratio: 1487\/939;\" \/><\/p>\n<p>In Apps.js it imports { Component } from &#8216;react&#8217;, a logo (that spins on the web page, and App.css&#8217;:<\/p>\n<ol>\n<li>import React, { Component } from &#8216;react&#8217;;<\/li>\n<li>import logo from &#8216;.\/logo.svg&#8217;;<\/li>\n<li>import &#8216;.\/App.css&#8217;;<\/li>\n<\/ol>\n<p>In the App.css&#8217;\u00a0 there is:<em> .App-logo {a<strong>nimation<\/strong>: App-logo-spin infinite<strong> 20s<\/strong> linear;<\/em> for the animation of the logo.<\/p>\n<p>In Apps.js , all the elements in Red\/Bold can be removed to leave a boilerplate for starting your own app:<\/p>\n<div>\n<div><em>import React, { Component } from &#8216;react&#8217;;<\/em><\/div>\n<div><em><strong><span style=\"color: #ff0000;\">import logo from &#8216;.\/logo.svg&#8217;;<\/span><\/strong><\/em><\/div>\n<div><em>import &#8216;.\/App.css&#8217;;<\/em><\/div>\n<div><em>class App extends Component {<\/em><\/div>\n<div><em>render() {<\/em><\/div>\n<div><em>return (<\/em><\/div>\n<div><em>&lt;divclassName=&#8221;App&#8221;&gt;<\/em><\/div>\n<div><em><span style=\"color: #ff0000;\"><strong>&lt;headerclassName=&#8221;App-header&#8221;&gt;<\/strong><\/span><\/em><\/div>\n<div><em><span style=\"color: #ff0000;\"><strong>&lt;imgsrc={logo}className=&#8221;App-logo&#8221;alt=&#8221;logo&#8221;\/&gt;<\/strong><\/span><\/em><\/div>\n<div><em><span style=\"color: #ff0000;\"><strong>&lt;h1className=&#8221;App-title&#8221;&gt;Welcome to React&lt;\/h1&gt;<\/strong><\/span><\/em><\/div>\n<div><em><span style=\"color: #ff0000;\"><strong>&lt;\/header&gt;<\/strong><\/span><\/em><\/div>\n<div><em><span style=\"color: #ff0000;\"><strong>&lt;pclassName=&#8221;App-intro&#8221;&gt;<\/strong><\/span><\/em><\/div>\n<div><em><span style=\"color: #ff0000;\"><strong>To get started, edit &lt;code&gt;src\/App.js&lt;\/code&gt; and save to reload.<\/strong><\/span><\/em><\/div>\n<div><em><span style=\"color: #ff0000;\"><strong>&lt;\/p&gt;<\/strong><\/span><\/em><\/div>\n<div><em>&lt;\/div&gt;<\/em><\/div>\n<div><em>);<\/em><\/div>\n<div><em>}<\/em><\/div>\n<div><em>}<\/em><\/div>\n<p><em>export default App;<\/em><\/p>\n<\/div>\n<div>In the App.js there is:<\/div>\n<div>\n<div><strong><em>class App extends Component {<\/em><\/strong><\/div>\n<div><strong><em>render() {<\/em><\/strong><\/div>\n<div><strong><em>return (<\/em><\/strong><\/div>\n<\/div>\n<p>This says, that for this class App Component, render this thing and return&#8230;&#8230; something<\/p>\n<p>and at the bottom you have to :<strong> <em>export default App;<\/em><\/strong><\/p>\n<p>So this pushes it out, to display, I presume.\u00a0 So\u00a0 you create something, render it and export it.<\/p>\n<h2>JSX (Jaxva Script XML &#8211; where XML=extensible Markup Language)<\/h2>\n<p>Now, the code is a mixture of stuff, it has bits of HTML tags in the JavaScript type code. Its JSX. The first place I found some JSX syntax was <a href=\"https:\/\/www.tutorialspoint.com\/reactjs\/reactjs_jsx.htm\" target=\"_blank\" rel=\"noopener\">TutorialPoint ReactJS &#8211; JSX.<\/a><\/p>\n<p>If you go to:<\/p>\n<p>https:\/\/babeljs.io\/repl<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4376 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im16-1-1024x366.jpg\" alt=\"\" width=\"1701\" height=\"607\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im16-1-1024x366.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im16-1-300x107.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im16-1-768x275.jpg 768w\" data-sizes=\"(max-width: 1701px) 100vw, 1701px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1701px; --smush-placeholder-aspect-ratio: 1701\/607;\" \/><\/p>\n<p>So you are writing in a different script and Babel compiles your code into JavaScript. So React seems to be a compiled code (I haven&#8217;t come across one of those for a while). I was wondering how that was compiled but I just noticed at the end on the first screenshot , where we used npm in the command window, item 16 says :<\/p>\n<p><em>Note that the development build is not optimized.<\/em><br \/>\n<em>To create a production build, use npm run build.<\/em><\/p>\n<h2><strong>Build &amp; Execute<\/strong><\/h2>\n<p>I decided to try it , based on what is in the\u00a0<strong> test-app<\/strong> folder at the moment<\/p>\n<p>C:\\Users\\drake\\Downloads\\react\\test-app&gt;<em>npm run build<\/em><\/p>\n<p>sometimes you run an npm command and it executes but the command prompt does not come back (presumably as its running the server and showing in the browser. You ne3ed to quit out of this if you need to run anothert command by using <strong>Ctrl+C<\/strong>. Then the command prompt comes back. [<em>It may be obvious but not explained anywhere, I shut a few command windows down and started them again because i didn&#8217;t know what to do initially<\/em>]\n<p><img decoding=\"async\" class=\"wp-image-4379 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im17-1-962x1024.jpg\" alt=\"\" width=\"1530\" height=\"1629\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im17-1-962x1024.jpg 962w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im17-1-282x300.jpg 282w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im17-1-768x818.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im17-1.jpg 1358w\" data-sizes=\"(max-width: 1530px) 100vw, 1530px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1530px; --smush-placeholder-aspect-ratio: 1530\/1629;\" \/><\/p>\n<p>Anyway, a new sub-directory is created (Just above item 5 on screenshot above) called build and if you go into that folder there is an index.html file you can run. I ran it from the directory using the browser (not from a server) and got this error in the console:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-4380 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im19-1-1024x437.jpg\" alt=\"\" width=\"1452\" height=\"619\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im19-1-1024x437.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im19-1-300x128.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im19-1-768x328.jpg 768w\" data-sizes=\"(max-width: 1452px) 100vw, 1452px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1452px; --smush-placeholder-aspect-ratio: 1452\/619;\" \/><\/p>\n<p>It couldn&#8217;t find the js file. When I looked at the file index.html the code had been minified, butt all the links eg&lt;link href=&#8221;\/static\/css\/main.c17080f1.css&#8221; rel=&#8221;stylesheet&#8221;&gt; did not have a &#8220;.&#8221; before the leading \/ so it Console error was not using a relative path to find the file. Once I added these<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4378 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im18-1024x271.jpg\" alt=\"\" width=\"1761\" height=\"465\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im18-1024x271.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im18-300x79.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im18-768x203.jpg 768w\" data-sizes=\"(max-width: 1761px) 100vw, 1761px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1761px; --smush-placeholder-aspect-ratio: 1761\/465;\" \/><\/p>\n<p><img decoding=\"async\" class=\"wp-image-4377 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im21-1-1024x499.jpg\" alt=\"\" width=\"1469\" height=\"715\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im21-1-1024x499.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im21-1-300x146.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im21-1-768x374.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im21-1.jpg 1811w\" data-sizes=\"(max-width: 1469px) 100vw, 1469px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1469px; --smush-placeholder-aspect-ratio: 1469\/715;\" \/><\/p>\n<p>But it still wasn&#8217;t finding the logo. But the page came up.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4382 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im22-1-1024x432.jpg\" alt=\"\" width=\"1605\" height=\"677\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im22-1-1024x432.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im22-1-300x126.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im22-1-768x324.jpg 768w\" data-sizes=\"(max-width: 1605px) 100vw, 1605px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1605px; --smush-placeholder-aspect-ratio: 1605\/677;\" \/><\/p>\n<p>When I ran Items 5 &amp; 6 in the screenshot below, then cut\/pasted the url (item 7) in a browser<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4379 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im17-1-962x1024.jpg\" alt=\"\" width=\"1530\" height=\"1629\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im17-1-962x1024.jpg 962w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im17-1-282x300.jpg 282w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im17-1-768x818.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im17-1.jpg 1358w\" data-sizes=\"(max-width: 1530px) 100vw, 1530px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1530px; --smush-placeholder-aspect-ratio: 1530\/1629;\" \/><\/p>\n<p>Then the page showed correctly.See below:<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4381 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im20-1-1024x208.jpg\" alt=\"\" width=\"1479\" height=\"301\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im20-1-1024x208.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im20-1-300x61.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im20-1-768x156.jpg 768w\" data-sizes=\"(max-width: 1479px) 100vw, 1479px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1479px; --smush-placeholder-aspect-ratio: 1479\/301;\" \/><\/p>\n<p>To test it on a server I loaded the build directory to my hosted server and tried again. Initially there was no &#8220;.&#8221; in the relative paths in index.html , and I got:<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4384 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im23-1-1024x206.jpg\" alt=\"\" width=\"1805\" height=\"362\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im23-1-1024x206.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im23-1-300x60.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im23-1-768x154.jpg 768w\" data-sizes=\"(max-width: 1805px) 100vw, 1805px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1805px; --smush-placeholder-aspect-ratio: 1805\/362;\" \/><\/p>\n<p>The same error as when I just tried to open the file in the browser. when I added the &#8220;.&#8221; to the relative paths I got:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-4383 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im24-1-1024x319.jpg\" alt=\"\" width=\"1517\" height=\"472\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im24-1-1024x319.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im24-1-300x94.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im24-1-768x239.jpg 768w\" data-sizes=\"(max-width: 1517px) 100vw, 1517px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1517px; --smush-placeholder-aspect-ratio: 1517\/472;\" \/><\/p>\n<p>The image still did not come up, but looking at the console error it is looking in the wrong place for it. It looks like its being called from the CSS or JS directory.<\/p>\n<p>Anyway, looks like the code is supposed to run from a server.<\/p>\n<h2>Tutorial<\/h2>\n<p>Based on this video tutorial:<\/p>\n<p><iframe title=\"React Class vs Functional Component | ReactJS tutorial Series Part 3\" width=\"678\" height=\"509\" data-src=\"https:\/\/www.youtube.com\/embed\/uGgPINlKqBs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/p>\n<p>I did get a bit of code to display, rather than what comes setup with the create-react-app. Which is nice, but not too advanced. I took the code from the githumb and played with it a little. The fact that I could get it running on my machine was nice.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4385 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im25-1-1024x189.jpg\" alt=\"\" width=\"1768\" height=\"326\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im25-1-1024x189.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im25-1-300x55.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im25-1-768x142.jpg 768w\" data-sizes=\"(max-width: 1768px) 100vw, 1768px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1768px; --smush-placeholder-aspect-ratio: 1768\/326;\" \/><\/p>\n<h2>End comment<\/h2>\n<p>After having a play with React JS I feel that I have the fundamental bits of having the environment setup to try and use it. I can see the idea of it, and I quite like the JSX coding. The mix of HTML and JS is good. Plus the extensible nature of the XML to extend it to add different elements.<\/p>\n<p>I also had a quick overview of Redux, you often come across it when reading about React. I&#8217;m not sure that I have a use for this at the moment, but it was good to get my head around the npm and react JS. In fact, as I was working through <a href=\"https:\/\/learn.freecodecamp.org\/\" target=\"_blank\" rel=\"noopener\"><strong>Free CodeCamp\u00a0<\/strong><\/a> there is a whole area on React &amp; Redux. I cannot see a direct link of React with the AM\/FM visualisation ideas that I am exploring at the moment. It is good to understand what it is about, especially at the next WellingtonJS meetup that I go to, I may even understand 10% of what people are talking about.<\/p>\n<p>I have a better feel for Visual Studio Code, that is something useful I think I will use more.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have been going along to\u00a0 Wellington JS meetups.\u00a0 The last one was Konstantin Raev &#8220;Using Open Source responsibly: why Yarn was created&#8220;. His talk was focused on React Native and Yarn as a download\u00a0 of packages versus npm. He gave some interesting statistics of how popular npm was compared to other package managers and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4381,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43,29],"tags":[],"class_list":["post-4369","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im20-1.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im20-1.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/4369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4369"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/4369\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/4381"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}