DEV Community: JMcKeag-blip

Why using Components in React now will save you headaches in the future.

JMcKeag-blip — Fri, 02 Jun 2023 23:12:06 +0000

Introduction

In this blog post I will be going over the building blocks of React in the form of Components and Props. understanding how to use these building blocks are crucial to working inside of React to build out web applications.

What is React?

First I'll touch briefly on what React is and why it is a benefit to learn for front end development. When navigating web pages and interacting with them, think of all the different times you click a button and update the number of likes, comments or shares in social media apps, or even how a web application such as a countdown timer interacts with outside information such as a clock to update the information on the page that is displayed. These are commonly used fetch and post requests that anyone developing an interactable webpage application make use of, and React provides us with a front end framework to access these functions more quickly than building them out from scratch. While React functions as a framework to help JavaScript more smoothly interact with HTML and CSS elements, it is technically a library of functionality that we as developers have access to. To summarize, React is a tool for us as developers to more quickly and uniformly build out our JavaScript code.

What are Components?

Components are one of the key building blocks used when interacting with React. Components are one of the key ways in which we modularize both the functionality and presentation of our code. When you think of large scale websites and webpages with many different points of interaction for users, the code can get very complex, so it becomes increasingly important to keep that code clear and readable on the development side so we know how to fix bugs that may appear or where to add new functionality using the current components we have in our webpages. Components can do many things, but their end goal is always the same: they all must contain a snippet of code that describes what they should render to the DOM. By keeping our code organized with components we are able to keep the structure of our code consistent while abstracting the Boilerplate code.

Example of the importance of Components

Now I will move on to a detailed example of how Components can impact the quality of our coding in React. Take the following webpage into account:

This is a very simple webpage with a header and one paragraph tag below that. This is a very simple example to keep the organization of our code clear. Now there are many different ways to get such a simple message to appear on a webpage, I will go over two key examples of how to accomplish this to demonstrate organization through Components and one of the key benefits of using React over vanilla Javascript.

We will start with the vanilla JavaScript version of achieving this display. Here is some simple HTML to use along with the JavaScript code to help get your message to display if you would like to code along:

Now for the lines of code in our Scipt.js file that will make our messages appear:

This example is very simple and achieves out goal in just a few lines of code, but one of things it fails to do for us is properly organize our Components into a clear and concise format. This webpage may only be a few lines of code, but consider online platforms and websites that manage a far greater amount of information and ones that interact with much larger data structures. Trying to go in and edit code for your comment functionality or like button functionality can be very daunting if you do not even know where to begin looking.

React offers us an alternate way to organize our functionality that allows us more readily access specific portions of our code that we are looking to edit or troubleshoot. Without further ado I present Components:

This list of components shows us exactly where each portion of our webpage display is located. The HTML for this setup is slightly different as well. It looks something like this if you would like to code along:

Now we will dig deeper in to each component to show the structure of organization, starting with our Index.js file:

There is a lot going on here that is different from our original Index.js in Vanilla JavaScript, but we aren't going to be digging too deep in to how to set up a React app just yet. For now just know that this code is using JSX to render our other components that have been imported through our App.js component. Speaking of, our App.js components looks something like this:

This component imports our Article and Comment components to be exported on to our Index component in order to keep our Index component to as few lines as possible.

Now on to our Article component that contains our Header:

and the Comment component with our paragraph tag:

For such a small example our react code actually ends up being a few more lines of code, but the key takeaway from these two examples is that using components keeps our code organized in such a way that as our functionality increases, we are much better equipped to access what specific aspects of our functionality we want to be working on at any one specific time. This organization also helps us to pass on code that is much more readable for those that may access it after us.

How-To Guide on Communicating with Servers: GET Requests

JMcKeag-blip — Sun, 05 Feb 2023 02:34:57 +0000

Introduction

Today I will be talking about a key tool to use in one's JavaScript arsenal. As the title suggests, I will be showing you how to communicate with online or locally hosted servers using your JS code. More specifically I will be covering how to insert fetch GET requests and describing a bit of what they are used for compared to other types of fetch requests. If you do not define a specific type of fetch request in your code, JavaScript will default to a GET request instead of a fetch patch, post or delete method. Moving on in the post I will refer to our GET requests as fetch requests, as leaving it undefined in JavaScript will give us the functionality we desire in our output with this method.

First lets establish a little bit of basic information regarding server interaction and why you would want to use something like a fetch request. Communicating with online servers allows you to access raw data that's arranged in the form of objects and arrays online through API's (Application Programming Interface). I will also briefly cover what an API is as we will be using one in our example below to demonstrate how to use fetch requests.

What's an API?

API's are ways in which companies, organizations or even just enthusiasts on specific subjects, expose their data and/or functionality to the public. This allows us to add important data to our code and reference it without having to input lines upon lines of objects to use. They are already available to us, so it is better to make use of our resources, instead of repeating the work someone else has done for us. Just make sure to give credit to authors of API's in your README files when you use them. So in short, we are able to use our fetch requests to use JavaScript to send a web request to an API and receive a collection of JSON in return.

What's JSON?

JSON stands for Javascript Object Notation. JSON is a language-agnostic way of formatting data. In sending a request to one of the above mentioned API's it will return to us a JSON collection of data. With just one line of code, you are able to tell Javascript to treat the API data as a nested object. This method will allow us to use large and complicated amounts of data without overloading our code with hundreds of lines of objects and variable declarations.

Why use fetch requests over our other functionality?

Now the last question to answer is why you would want to use a fetch request specifically over our other server request commands that we have access to in Javascript such as patch, post or delete? The answer is that a fetch request will simply help your code communicate with an online or locally hosted server and provide you with reference points for your code to interact with. A patch request is going to update and change the information on the server, a delete request will do as it's namesake implies and get rid of it, and a post request is going to display information from the server. A fetch request can help you pick and choose what information you would like to display in your code.

Example

Let's show a simple example of how to accomplish linking our local client to an API server using a fetch request. For this example we'll use a Star Wars API provided at https://swapi.dev/api.

First we'll write out our basic command for fetch requests in Javascript:

Pretty quick and easy, but there's still a little more code to write. With this first initial line, all we have done is request the information from the API, but we haven't done anything with it yet.

So the next step is to use what is known as the json() method of the response interface to actually get our JavaScript code talking to the online server. That looks something like this:

This second and third line of code that we have added allows us to render the API's response into something readable to us as the user. We use arrow syntax here to make sure that the object (The API in this instance) is returned and passed to our next then() and the console.log() will print the object to our console.

This method of fetching our data from servers, regardless of where they are hosted, is known as the Response.json() method and according to developer.mozilla.org/ this method " ...takes a Response stream and reads it to completion. It returns a promise which resolves with the result of parsing the body text as JSON.

Note that despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object."

Conclusion

There you have it! We've successfully linked an online server to our JavaScript code using the fetch GET method. We are also able to use the json() method when we move on to other requests. This basic use of GET requests can stretch out into other, important methods of interacting with online and local servers.