What you want to know about react
Published: 2022-07-12 21:06:27

To think that there are so many languages in the software engineering industry is hard to believe but there are some that are vital in learning, a front-end language by the name of React is just one of those.  However, I would like to touch on the benefits of React and how this language is able to simply and make life easier. A few things that I found to be vital when working with React are being able to truly understand the different elements required to make it function.  Such as components, having your basic html set up as well as css but mainly knowing and understanding JSX. 

With having those elements, I find being able to know what each element does and why they all link together are vital. But let’s not forget that the vital link to make it all work is to make sure that in each component you are doing your import and export. What this does for us in an importing variable is let us define variables in one file and access those variables in other files throughout our project. This becomes increasingly important as we build out larger applications. This differs with the exporting variable because when exporting any variable — whether that variable is an object, string, number, function, or React component — allows us to access that exported variable in other files. There are two ways to export code in JavaScript: we can use the default export syntax, or the named export syntax. You will always export default (component name) and always import (component name) from the file you accessing that information.  Such as the example below. 


import React from "react";
import NavBar from "./NavBar";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <div>
      <NavBar />
      <Home />
      <About />
    </div>
  );
}
export default App;

Components are the files that are storing the information of what is being contained inside it. Such as the image above we can identify three components. These 3 components will all hold information for different parts of the webpage you are building. Such as the name of the components Navbar will focus of holding all the information for the navigation bar and it will be the link for other components on the webpage allowing for the nav bar to most commonly have the class or id being returned so that you are able to access that information. As you are providing the links for access points in the webpage. However your about component would have the soul purpose of providing information about your webpage and this can be detailed with images, a bio and as well as links anything you want the public or people viewing your webpage could be accessed in the about components and looking at your home component you are able to see that would provide the most information as it is the for front of your webpage and would need to provide everything and more that you are trying to execute in showing or allowing the webpage to do. 

What is also vital to know is css is much easier to access as you don’t need to hard code anything in html, but you can call each thing you wanting to add any form of design to by accessing the id or the class and that is what will allow for the page to be separate.  Through this explanation I want you to know that you can name a component anything you want it will always need a Capital to start and to end in .js  that being said it is dependent on you to establish what you name it and the information you put in that component. 

Being able to access information such as an API or hard coding your data in a db.json file in order to access this information you would need to be able to create a fetch request and what this is doing is, allowing us to make an HTTP request to the backend. With this method you can perform different types of operations such as GET, POST, PATCH, DELETE. 

A typical fetch request looks like the image below. What this is showing is a fetch request and a method that is being placed with it what the method is doing is ensuring that sit will be posting new information that is being formulated.  In a fetch request you are also required to have a promise. A promise is a .then what this does is it creates a promise to the code you are writing that will make the code work and ensure that once it gets all the information or everything it needs it will then produce it this prevents the code for stopping or crashing or giving you an error. Cause it is informing the rest of the code that this will promise has been made and it will deliver soon. 

fetch("http://localhost:3000/data", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newTeam),
    })
      .then((r) => r.json())
      .then(onAddTeam);

With a fetch request we can also have a useEffect which is creating a function which grabs the information only once and is also this needs to end in an array []  and is displayed in the image below. 


useEffect(() => {
    fetch("http://localhost:3000/data")
      .then((response) => response.json())
      .then((response) => setTeam(response));
  }, []);



These are a few basics that I found to be the must know essentials before diving into the more complex understanding if you are able to practice these more  and at an earlier stage it will definitely help as you will know how they link and the use of what each thing we have discussed today does.