website/webdevelopment/buildingmodernprojectswithreact/scratch.js

import { addBanner, addArticle, addTitle, addHeader, addParagraph, addClassParagraph, addSubHeader, addOrderedList, addUnorderedList, addBlockquote, addInset, addInsetList, addInsetCodeListing, addInsetBulletList, addImageWithCaption, addButtonGroup, addSidebar, addSyntax } from '/scripts/import.js';

const heading = document.querySelector(".heading");
const global = document.querySelector(".global_menu");
const local = document.querySelector(".local_menu");
const sidebar = document.querySelector(".sidebar");
const main = document.querySelector(".main_content");

heading.append(addTitle("Building Modern Projects with React"));
heading.append(addParagraph("Shaun Wassell - LinkedIn Learning - November 2024"));
heading.append(addParagraph("Creating React Projects from Scratch"));

main.append(addSubHeader("Building a React Project form Scratch"));
main.append(addParagraph("In this section, we will build a project from scratch in order to get a better understangding of the process before moving on to building a project using some of the react tools."));
main.append(addParagraph("When you open up a React site in a browser, the first thing you get is typically an empty HTML page.  This isn't something peculiar to React.  For example, if you right-click anywhere inside this page, you will see that the HTML content consists of the menus and nothing else.  You won't, for example, see this paragraph.  The reason for this is that the content that you are reading is being generated by your browser using the code that the server has passed to the browser.  As far as this page is concerned, that content is generated by a simple JavaScript file (at time of writing) which is making calls to functions to create the headers, paragraphs, links and so on that you see in the page.  In fact, the whole point of those JavaScript functions is to generate the HTML elements that you see and this process is known as Rendering.  React is really just a more advanced way to do the same thing"));
main.append(addParagraph("The biggest difference between using JavaScript and React like that is that the browser can interpret the JavaScript directly whereas as React uses JSX to generate the HTML and the browser can't read that.  In order to convert the JSX to JavaScript, we need to use a transpiler which will convert one tyep of source code to another.  We will be using webpack (see links to the dcoumentation in the sidebar to the right)."));
main.append(addHeader("The React Entry Point"));
main.append(addParagraph("The first step in creating a React app from scratch is ti create an entry point for the project so this is where the browser starts when the page is loaded so this is the empty HTML file mentioned above."));
main.append(addParagraph("For this course, the various projects are stored in a folder called React with each project having itself own sub-folder so I will start ny navigating to that folder and creating a sub-folder called react-from-scratch.  Inside that folder, I will create two files:"));
main.append(addSyntax("index.html  =>  the project entry point"));
main.append(addSyntax("index.js  =>  the javascript entry point"));
main.append(addParagraph("The index.html is shown in figure 1 and notice that it is pretty much empty except for a header element which is there for test purposes."));
main.append(addImageWithCaption("./images/figure1.png", "Figure 1 - the index.html file."));
main.append(addParagraph("It's a pretty standard file so it has head and meta tags and a body tags.  There is also a little bit of styling in the meta tag."));
main.append(addParagraph("In the body, we have a div and we have given this an id of root so that we can reference it easily and unambiguously.  This is where the content generated by React will ultimately go when the HTML document is loaded so it is, in a sense, the entry point for the React app."));
main.append(addParagraph("We also have a script tag which will load and execute the React code."));
main.append(addParagraph("The index.js file is almost empty at this point.  We only have one line of code in the file and like the h1 element in our HTML file, this is for testing purposes."));
main.append(addParagraph("So that gives us a basic HTML page with an attached JavaScript file and we can access the page in a couple of ways.  We can use the live web server in VS Code to load the page into a browser.  Alternatively, we can right click on the HTML file in the VS Code file and select Copy Path.  This gives us the path to where the file is physically stored on the drive and we can paste that into a browser to open the page.  This is shown in figure 2."));
main.append(addImageWithCaption("./images/figure2.png", "Figure 2 - the app displayed in a browser."));
main.append(addParagraph("We can see that the h1 element is being displayed and there is a message being logged in the console.  This is the line of code we mentioned is in the index.js file so the fact that we can see that it was logged tells us that the index.js file has been loaded and executed."));
main.append(addParagraph("We haven't actually added any React code yet, so what you see in figure 2 is a static HTML file without any rendered elements, but we will fix that!"));
main.append(addSubHeader("Creating a React Script"));
main.append(addParagraph("Before we start writing React code, we need to install React in our project.  To start with, we will install a package.json file which we can do from the terminal.  This will be installed in the current directory so we will need to cd to react-from-scratch folder.  In theory, we could write the package.json file from scratch but that's beyond the scope of this course, so we will use the much easier method which is ti simply run the command"));
main.append(addInset("npn init -y"));
main.append(addParagraph("This will generate the package.json file shown in figure 3 with all the default values."));
main.append(addImageWithCaption("./images/figure3.png", "Figure 3 -"));
main.append(addParagraph("Next, we will install all the React libraries we will need with the command"));
main.append(addInset("npm install react react-dom"));
main.append(addParagraph("Now we cab start writing our React code and there are a couple of ways of doing that.  Possibly, we will only use one of those ways since that is using the more typically React type of syntax and is therefore taking advantage of React's capabilities,  However, the second method is interesting because it provides more of an insight into how the process works."));
main.append(addParagraph("We will start in the index.js fileby importing our React libraries like this."));
main.append(addInset("import React from 'react';"));
main.append(asddInset("import { createRoot } from 'react-dom/client';"));
main.append(addParagraph("Next, we will create our app and this is where we put the code to render HTML elements."));
main.append(addInsetCodeListing(["const App = () => {", "    return React."]));


addSidebar("webdev");
sidebar.append(addSubHeader("Some useful links:"));
sidebar.append(addParagraph("A link to <a href='https://www.linkedin.com/learning/building-modern-projects-with-react-24955170'>this course</a>."));
sidebar.append(addParagraph("<a href='https://www.dhiwise.com/post/react-build-tools-create-react-app-with-vite-vs-cra-tool'>React Build Tools: Create React App with Vite Vs. CRA</a>."));
sidebar.append(addSubHeader("Documentation and Guides"));
sidebar.append(addParagraph("<a href='https://webpack.js.org/concepts/'>Webpack Documentation</a>."));
sidebar.append(addParagraph("<a href='https://webpack.js.org/guides/'>Webpack Guides</a>."));
sidebar.append(addParagraph("<a href='https://devdocs.io/vite/'>Vite Documentation</a>."));
sidebar.append(addParagraph("<a href='https://www.tatvasoft.com/outsourcing/2024/07/vite-vs-create-react-app.html'>Getting Started with Vite</a>."));
sidebar.append(addParagraph("<a href='https://nextjs.org/docs'>Next.js Documentation</a>."));
sidebar.append(addParagraph("<a href='https://remix.run/docs/en/main'>Remix Documentation</a>."));
sidebar.append(addParagraph("<a href='https://remix.run/guides/templates'>Remix Templates</a>."));
sidebar.append(addSubHeader("Related Courses on LinkedIn"));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/databases-for-node-js-developers-2021'>Databases for node.js Developers</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/learning-node-js-2017'>Learning node.js</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/advanced-express'>Advanced Express</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/node-js-securing-restful-apis-2'>Securing Restfuk APIs</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/mongodb-essential-training'>MongoDB Essential Training</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/next-js-creating-and-hosting-a-full-stack-site'>Next.js: Creating and Hosting a Full-Stack Site</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/react-creating-and-hosting-a-full-stack-site-24928483'>React: Creating and Hosting a Full-Stack Site</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/remix-essential-training'>Remix Essential Training</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/emerging-web-frameworks'>Emerging Web Frameworks</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/react-js-building-an-interface-8551484'>React.js: Building an Interface</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/react-essential-training'>React Essential Training"));