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.
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.
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:
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:
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:
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.