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

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.