main.append(addParagraph("The most common ways to build a React application are with one of the following toolkits:"));
main.append(addInsetBulletList(["Create React App - for learning or for a single page application.","Next.js - if you want to build a server rendered site with Node.","Gatsby - if you want to build a static, content-oriented site."]));
main.append(addParagraph("Since we are learning, we will start with create react app. This will give us a React project structure, the ability to use the latest JavaScript features and tools for optimising the app for production."));
main.append(addParagraph("Note that at this stage, I haven’t installed anything, I am assuming that everything that required is already installed or that I will be directed to install any that is needed."));
main.append(addParagraph("I have downloaded the exercise files to my Raspberry Pi so I will be doing any testing or development practice there. The directory containing the files is"));
main.append(addParagraph("Within this directory, we have five directories, one corresponding to each chapter and these are called Ch01 to Ch05. In each chapter directory, there are directories for some of the examples in the chapter directories and they have both start and finished directories."));
main.append(addParagraph("We are going to start by navigating to the directory, Ch01 and then to 01_02 and finally to the start directory. Note that the minimum version numbers are 8.10 for node and 5.6 for npm so I will check these before we start anything else."));
main.append(addImageWithCaption("./images/figure1.png","Figure 1 - version numbers for both node and npm"));
main.append(addParagraph("There are a couple of points we should make here. Notice that we have given our app the name hello-react and we have used the option, --use-npm. This means that we will use npm to build the app. If this is not specified, the project would be built with yarn, assuming that it is installed. In my case, it doesn't seem to be."));
main.append(addParagraph("Building the project produces a lot of output and this is, in part, shown in figure 2."));
main.append(addImageWithCaption("./images/image2.png","Figure 2 - the output from the command npx create-react-app hello-react --use-npm"));
main.append(addParagraph("As we can see from the output, there is a suggestion that we cd into the hello-start directory created by the command we just ran and then run the command"));
main.append(addSyntax("[npm start"));
main.append(addParagraph("This compiles the application."));
main.append(addParagraph("When I do this, I am seeing some warnings that the version of node I am running (which is much older than the version in the course video) may not work with npm. We also saw some warnings when executing the npx command which suggest that the version of node we have is not compatible with the version of npm. The versions I have should have worked, but just to be on the safe side, I will upgrade to the latest version of node."));
main.append(addSubHeader("Upgrading the Version of Node"));
main.append(addParagraph("The procedure for this is as follows."));
main.append(addSyntax("[sudo -i"));
main.append(addParagraph("This switches us to the root user."));
main.append(addParagraph("These commands remove the existing node installation. We can then exit from root back to the previous logged in user. We can then install the latest version of node with the command"));
main.append(addParagraph("We then need to restart the shell and we can then check the versions of both node and npm again."));
main.append(addImageWithCaption("./images/figure3.png","Figure 3 - version numbers for both node and npm after upgrading"));
main.append(addParagraph("When we run the npx command again, the end part of the output is shown in figure 4."));
main.append(addImageWithCaption("./images/image2.png","Figure 4 - the output from the command npx create-react-app hello-react --use-npm after upgrading node and npm"));
main.append(addParagraph("We can still see some warnings, but fewer than we saw in figure 2. Now, when I cd into the hello-react directory and execute the command"));
main.append(addSyntax("[npm start"));
main.append(addParagraph(" I don’t see any errors or warnings. The output from the command is shown in figure 5."));
main.append(addImageWithCaption("./images/figure5.png","Figure 5 - the output from npm start"));
main.append(addParagraph("Notice that the output includes instructions on how to view the app in a browser. I didn't try to do this when I first compiled so I can’t say for sure if it would have worked in spite of the errors, but it does work now so if I go to 192.168.0.11:3000 in a browser, I see the result as shown in figure 6."));
main.append(addImageWithCaption("./images/figure6.png","Figure 6 - the result we see when we view our app in a browser"));
main.append(addParagraph("As a matter of interest, clicking the <a href=\"https://reactjs.org/\">Learn React</a> link takes you to the homepage for React which you can also reach with the link in this sentence."));
main.append(addParagraph("Before we go on to the next section where we will discuss what these commands were doing, I want to take a moment to examine the files that have been created and their purpose."));
main.append(addParagraph("Firstly, running the tree command tells me that inside the hello-react direct, which itself was created by create react app there are 4817 subdirectories and 40,663 files. Within the directory, we see 3 files and 3 directories which are listed in figure 7."));
main.append(addImageWithCaption("./images/figure7.png","Figure 7 - the contents of the hello-react directory"));
main.append(addImageWithCaption("./images/figure8.png","Figure 8 - the package.json file"));
main.append(addParagraph("There is some information here about the dependencies and of particular interest is the version number of react. There is also some information about the app itself including the name and the version number and some information which I assume relates to browser compatibility at the end."));
main.append(addParagraph("Next, I will cd into the public folder. There are 6 files here relating to, as you may have guessed, the apps public interface so we have our index.html file. We also have a manifest file, manifest.json, and this manages the resources. This is shown in figure 9."));
main.append(addImageWithCaption("./images/figure9.png","Figure 9 - the manifest.json file which is in the public folder"));
main.append(addParagraph("Note that on line 20, we have a start_url directive which presumably sets the starting point for the app. By that, I mean the webpage a user will see first when invoking the app. In this case, the page we saw (see figure 6) when we went to 192.168.0.11:3000 in a web browser."));
main.append(addParagraph("This is mostly speculation on my part, in the next section, we will look at the anatomy of a project created by create-react-app."));
main.append(addSubHeader("Touring a create-react-app Project"));
main.append(addParagraph("The main point of create-react-app is that it makes it easier to set up a project and gives that project a structure."));
main.append(addParagraph("This contains the project dependencies. This includes several libraries for testing and react itself, we have everything needed to work with the react library. React-dom allows us render our react to the browser the react scripts help us to bundle and serve our code."));
main.append(addParagraph("The files we use to write our app are stored in the src folder. For instance, if we view the app in a browser by going to localhost:3000, for example (see figure 6 and the text preceding that for more info), we are seeing the basic app template that has been generated and the code for this is in the file, App.js. For reference, this file is shown in figure 10."));
main.append(addImageWithCaption("./images/figure10.png","Figure 10 - the code from the App.js file which is located in the src folder"));
main.append(addParagraph("We can see the link to reactjs.org (on line 14) and the text associated with the link (on line 18). We can change the code here and if we then reload the app in a browser, we will see the changes there. As an example, I changed Line 18 to "));
main.append(addSyntax("[Learn React by Doing"));
main.append(addParagraph("Figure 11 shows the revised app with this change."));
main.append(addImageWithCaption("./images/figure11.png","Figure 11 - the hello app created with create-react-app and showing my own edit"));
main.append(addParagraph("Note that in order to view the app (this may have been something I missed in the course video) you have to have it running. So, for example, I can navigate to the app directory (I think this will work for any directory within the hello-react - or whatever you called the app - directory) and execute the command "));
main.append(addSyntax("[npm start"));
main.append(addParagraph("The app should then be viewable by going to localhost:3000. You can leave it running and edit the app files in another shell and that seems to work well enough. You can edit the App.js file, for example, and then refresh the browser window to see the changes. However, be aware that if you try to view the app when it is not running, you will get an error message."));
main.append(addParagraph("A useful tool for experimenting with React is <a href=\"https://codesandbox.io/\">https://codesandbox.io/</a> which allows you to create projects online for free."));
main.append(addParagraph("You can sign in with either a Google account or a GitHub account which would allow you to save any work you might do. The screen displays the code for your project and an output (browser) window so when you make any changes to your code, you can see the change take effect straight away."));
main.append(addParagraph("Figure 12 shows a screenshot of this."));
main.append(addImageWithCaption("./images/figure12.png","Figure 12 - https://codesandbox.io/, here, I have created a simple create-react-app project"));
main.append(addSubHeader("Setting Up React Developer Tools for Chrome"));
main.append(addParagraph("In Chrome, we need to search for Chrome web store react developer tools. This should take us to the page shown in figure 13."));
main.append(addImageWithCaption("./images/figure13.png","Figure 13 - the React Developer Tools in the Chrome Web Store"));
main.append(addParagraph("From here, click on Add to Chrome and then Add extension. I noticed that the icon is not visible by default so you will want to pin it to the menu bar which you can do by clicking the extensions icon and then the pin icon next to the extension for React Developer Tools. Alternatively, you can click on Settings and then Extensions and click the slider to pin it. Both of these methods are toggles so you can also use them to unpin it if required."));
main.append(addParagraph("Once the Developer Tools are pinned, we will see its icon on the extensions tool bar. The icon may or may not be highlighted, depending on whether the page is using React or not."));
main.append(addParagraph("For example, figure 14 show the React homepage, which not surprisingly uses React and we can see that the React Developer Icons tool is highlighted."));
main.append(addImageWithCaption("./images/figure14.png","Figure 14 - the React home page with the React Developer Tools icon highlighted on the extensions toolbar"));
main.append(addParagraph("We can open the Developer Tools with Control + Shift + J and then click on the carat next to Performance (depending on how much of the toolbar is visible) to show additional options. The React Developer Tools will display the React icon so we can choose, for example, Components."));
main.append(addParagraph("When we do this with our sample app, we can see that it has just a single component but on the React homepage, there are a lot of them."));
main.append(addSubHeader("Installing React Developer Tools for Firefox"));
main.append(addParagraph("Similarly, when installing the Tools in Firefox, we can search for React Developer Tools Firefox. The first result should be React Developer Tools or you can click on the link provided here and then click on Add to Firefox and Add. In Firefox, the icon is displayed by default. "));
main.append(addParagraph("Again, the React Developer Tools icon is greyed out when the page you are viewing does not use React and is highlighted when it does, so we can tell whether the page uses React (or is built with React). "));
main.append(addParagraph("As a matter of interest, I tried this with a couple of pages and found that on the Britbox home page, the icon is black showing that this page is using an outdated version of React. In Netflix, for comparison, it is blue. "));
main.append(addParagraph("We can invoke the Developer Tools by right-clicking on an element in the page and selecting Inspect Element. Again, we may have to search for the React icons but again, we can look at the Components in a page. "));
addSidebar("webdev");
main.append(addParagraph("As a matter of interest, I tried this with a couple of pages and found that on the Britbox home page, the icon is black showing that this page is using an outdated version of React. In Netflix, for comparison, it is blue. "));
main.append(addParagraph("We can invoke the Developer Tools by right-clicking on an element in the page and selecting Inspect Element. Again, we may have to search for the React icons but again, we can look at the Components in a page. "));
main.append(addParagraph("As a matter of interest, I tried this with a couple of pages and found that on the Britbox home page, the icon is black showing that this page is using an outdated version of React. In Netflix, for comparison, it is blue. "));
main.append(addParagraph("We can invoke the Developer Tools by right-clicking on an element in the page and selecting Inspect Element. Again, we may have to search for the React icons but again, we can look at the Components in a page. "));
