Basic React — Components and Props
React is an incredibly powerful tool, which makes building a website’s front-end quite easy. When I first started learning React, one of the concepts I struggled with was understanding React props (properties). It is a relatively straightforward concept, but for some reason, it took some time for me to understand it. If you are like me, struggling to understand props, this article is perfect for you.
Before we jump into the details let’s take a step back and think about components, the fundamental building blocks of React. Components are independent sections of reusable code. You can think of each component as a file, or module responsible for a specific feature/function of an application. Props are what allows these components to communicate with each other. This is why React is so powerful because it gives programmers the ability to scale an application infinity faster than vanilla JavaScript (JS). It also makes debugging easier too! As mentioned before, components communicate via props, a props’ value can be anything (strings, objects, arrays, functions, etc.). However, this communication is one-directional because props can only be passed from the parent to the child component. There are a few ways to workarounds this limitation but that is outside the scope of this article.
Now let’s walk through a simple example of how props work. For simplicity, we will only be using class components for our example. There are other types of components, but the class component is the only one we need for now. Creating a class component in Visual Studio Code is extremely easy. All you have to do is type “rcc” into any blank JS file, and an option to create a class component will appear. If you don’t have this feature, here is what an empty class component looks like (see below).
In our example, we will be creating two class components, a parent, and a child. Let’s call the parent component “App”, it will render the “child” component and pass it a string via props (see below).
Notice that on line 3 we imported the child component, which enables us to use it. Then on line 10, we are passing props to the child component by adding it as an attribute called “name”, with a value of “Francisco”. Now if we want to use the value of “Francisco” in the child component we simply type “.this.props.name” in the return section of the child component (see below).
The combination of these two components will result in a web page that looks like this:
See that wasn’t so bad? I hope this article helped you better understand the basics of React components and how they communicate via props. React is an amazing tool which makes building large application easier. I highly encourage you to continue learning about props and react components. They are extremely powerful and fun to use once you get the hang of them.
