website/webdevelopment/reactfullstacksite/connecting.js

import { addBanner, addArticle, addTitle, addHeader, addParagraph, addClassParagraph, addSubHeader, addOrderedList, addUnorderedList, addBlockquote, addInset, addInsetList, addInsetCodeListing, addInsetBulletList, addImageWithCaption, addButtonGroup, addSidebar, addSyntax, menu, global_menu } from '/scripts/import.js';
import { local_menu } from '/scripts/webdev.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("React: Creating and Hosting a Full-Stack Site"));
heading.append(addParagraph("Shaun Wassell - LinkedIn Learning - September 2022"));
heading.append(addParagraph("Chapter 4 - Connecting the Front End and Back End"));

main.append(addHeader("THE AXIOS LIBRARY"));
main.append(addParagraph("You might have realised that VS Code only allows you to open one folder at a time. For me the blog folder and backend folders are in a folder called React, so rather than opening either my_blog or my_blog_backend, I can just open the React folder."));
main.append(addParagraph("This might sound obvious but I think it is intuitive if you have one of the folders open to try to just open the second and you can't do that. It is arguably less intuitive to think that you can achieve this by simply opening the parent folder. In any case, we will now be looking at both the frontend and backend together so having them both open in the same VS Code window is useful."));
main.append(addParagraph("We can do this by opening VS Code and selecting the parent folder and open it or by navigating to the React folder in the terminal (that is, the folder that contents both the frontend and backend)and running the command"));
main.append(addSyntax("code ."));
main.append(addParagraph("We can also navigate to the folder that contains the React folder and typing"));
main.append(addSyntax("code React"));
main.append(addParagraph("The code . option doesn't work for me but the other options do."));
main.append(addParagraph("That was a bit of a digression, so let's now think about what it means to connect the fronted and the backend."));
main.append(addParagraph("In the frontend, we were able to navigate to different artiles or different pages. We can even interact with the database but we still have a couple of problems. Since the front end cannot communicate directly with the backend, it can't perform tasks like upving an main or adding a comment. Also, the back end care send any data to frontend so the frontend is unable to display the votes that an main has or the comments. "));
main.append(addParagraph("We're going to be using axios to connect the frontend backend. This is a library that allows us to send network requests and we can install it either in the frontend or the backend. We will be using to allow our frontend to send requests to the backend."));
main.append(addParagraph("We can install in our frontend by navigating to the folder (my_blog) and running the command"));
main.append(addSyntax("npm install axios"));
main.append(addParagraph("Using axios is pretty simple . Once you have imported it, you can then send a request using axios followed by a dot and the method (get, put, post etc) and we would pass the URL as an argument. This is an sysnchronous call so we will need to use the await keyword. We can create a variable to hold the response."));
main.append(addParagraph("As an example lets say we want to GET the learn-react main and we will store the response in a const which we will call response. The code for this would be"));
main.append(addSyntax("const response = await axios.get(' http://localhost:8000/api/mains/learn-react')"));
main.append(addParagraph("The main data is in the JSON format so assuming the server is configured to send a JSON response, we can access this from the frontend with something like"));
main.append(addSyntax("const data = response.data"));
main.append(addParagraph("So that is getting the responses payload (its data) and storing it in a const called data. The axios requests also carry some data and we will see that shortly."));
main.append(addHeader("ADDING REACT HOOKS"));
main.append(addParagraph("The code that determines how a page will look is in the file, mainPage.js, so that's where we will load our data. One thing to note is that we want to provide some data to the mainPage, but at the moment, it doesn't really have any state. That is, it doesn't have any internal memory where this data can be stored."));
main.append(addParagraph("We will have to import useState from React. That allows us to store data we get in a response request and this is simply the React hook that makes it possible for our components to have state ."));
main.append(addParagraph("In our mainPage function, the function that returns the mainPage, we will create a const that is going to hold our data and we do it like this."));
main.append(addSyntax("const[main Into, setmainInfo] = useState({upvotes :0, comments: [] })"));
main.append(addParagraph("This gives us a reference we can use for the data as well as a method to set it. The state has an initial default value which is the upvotes and comments values shown above."));
main.append(addParagraph("To actually load the data, we will need another Reack hook, useEffect, so we will also import that. React components are basically used to render web page elements and useEffect essentially allows us to add some logic outside of that rendering process. For more info on React hooks, check out Eve Porcello's course, which is called <a href = 'https//www.linkedin.com/learning/react-hooks'>React Hooks</a>.  You migh also be interested in a course called <a href='https//www.linkedin.com/learning/react-state-management-22688323'>React State Management<a> by Sandy Ludosky."));
main.append(addParagraph("Before we import data, we want to make sure that all our logic is correct, so we are going to use useEffect to set some initial values, say 3 for upvotes and an empty array for comments."));
main.append(addInsetCodeListing(["useEffect(() => {", "    setmainInfo({ upvotes: 3, comments: [] });", "});"]));
main.append(addParagraph("Another advantage of using 'fake' data here is that it allows us to look at some of the pitfalls you might encounter with useEffect and we will come back to that."));
main.append(addParagraph("To add the upvotes to our page, we will put in a paragraph right after the header that holds the main's title."));
main.append(addSyntax("&lt;p&gt;This main has {mainInfo.upvotes} upvote(s)&lt;/p&gt;"));
main.append(addParagraph("We can now save this, make sure the server is running and then display the main in a browser as shown."));
main.append(addImageWithCaption("./images/upvotes1.jpg", "Displaying an main in a browser with the number of upvotes shown at the top."));
main.append(addParagraph("Next, we will look at using axios to get this data from the database."));
main.append(addHeader("Calling useEffect at the Right Time"));

addSidebar("webdev");