Components and Props in React!
Published: 2023-02-14 03:37:14

<center>**<h1>What is a Component?</h1>**</center>
<hr/>

**Components** in React are templates for our code. When you think of the likes of Amazon and Facebook, we can see that there are many different areas of these applications. These areas are responsible for their own functionality. The bigger the application, the more complex it becomes to keep track of these functionalities. Using **components** allows us to modularize functionality as well as presentation within our code. 

<center>**<h1>Creating a Component</h1>**</center>
<hr/>
The number one rule when creating a **component** is to have it initialized at the front end with a capital letter. This is how we differentiate between a **normal function** and a **component**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6lsnjz81752rxtw9idi.jpeg)

In the code snippet above we've created a component called **App**. Within the body of our **component** we have a return statement that holds some JSX (JavaScript XML). JSX allows us to write HTML directly inside of REACT. When rendered to the browser we will see **'Hello, DEV Community'**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocbz9qrj2t71a0ubwsnk.jpeg)

What if we said **App** was our High-Order **component**? Meaning, we simply just want to make **App** responsible for only rendering children **components** that hold their own functionality and JSX? Not only will this prevent cluttered code in comparison to only using a single **component** to render all of the work, but it will help us keep track of different areas of our application that are responsible for their own functionalities and JSX.

<center>**<h1>How does this work?</h1>**</center>
<hr/>

I know you're probably thinking what in the heck is this guy talking about?! Let's break this down:

<center>**Step 1:** Let's first remove our JSX elements from our return statement in our **App component**. We will keep our **div** element seeing that in **React** it is a must to have a **div** element if we plan on having more than one element in our JSX template. In our case, we will have more than one child component being rendered in our return statement of our **App component** (parent component) between our main **div** element:</center>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1rj3i1l2sz7vkcf7y2k.jpeg)

**Step 2:** Next, we will create a separate **component** called **Header** in React where we want our **h1** element **'Hello, DEV Community!'** to live and later be imported into our **App component**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzxqpjd6xyg54et0qrcp.jpeg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vggcjmae83civ90r3mtf.jpeg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04fwvyo41p0eh1ezga9c.jpeg)

**Step 3:** Now that we have our **child component (Header)** set up, we need to figure out a way to render the **component** in its **parent component (App)**.

<center>In order to make this possible we will have to export the **Header component** like so:</center>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oudgd2kc8imszs5cdjn0.jpeg)

**Step 4:** We're not done yet. If you look at the browser we still don't see **'Hello, DEV Community!'** being rendered:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4s2v6j7mn3s8deuyo55.jpeg)

Why is that? We not only need to export the **Header component**, but also need to import the **component** in its **parent component (App)**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jw5qblqwexbshpxp2aa.jpeg)

If we check our browser again, we still don't see **'Hello, DEV Community!'** What in the world is going on?!
<hr/>

**Step 5:** There's one last step we need to do before we can see **'Hello, DEV Community!'** rendered to the browser. What do you think that is? 

Earlier I mentioned **'We not only need to export the Header component, but we need to also import the component in its parent component (App)'**. Once imported, we can render the **Header component** inside the return statement of our **App component**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1m45f4wcw47w1e2b2vm.jpeg)

Now if we check our browser we will see **'Hello, DEV Community!':**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp2i3g8hhzrassvtoa95.jpeg)
<hr/>

<center>**<h1>Conclusion On Components:</h1>**</center>
<hr/>

Note that we can use a **component** more than once! Whether it be in the **App component** or another **parent component** to the **Header component**.

Let's take a look at this example:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70xjnvvlbg6a1vrma44w.jpeg)

Notice that we are rendering the **Header component** twice inside the return statement of the **App component** after the **Header component** is imported. What do you think will happen?

We would see **'Hello, DEV Community!'** rendered twice inside of the browser:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9s7plakf686lq2r0d2w.jpeg)
<hr/>

The beauty of **components** is it allows us coders to keep our code clean and organized. If we were to do all of our functionalities and JSX only in our **App component**, sure, it could work when done correctly. However, if we took that route there would be a massive amount of functionalities and JSX in one **component**. As coders, we don't want that to happen. Doing so will cause a clutter of unorganized code making it hard for other coders and yourself to keep track of the application as it expands. If we modularize our code into different **components** we are able to break our functionalities and JSX into separate parts making it easier to control the entire application.

<center>**<h1>What are Props?</h1>**</center>
<hr/>

Props go hand in hand with **components**. **Props** allow us to pass information or data down from a **parent component** to a **child component**.

So how do we use **props**? Let's go back to our **App component**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5uwx1qn3sq19b8qwqj3.jpeg)

Right now we are not establishing a **prop** within the **App component**. Let's say I wanted to pass information down to my first rendered **Header component** within the **App component** return statement where our JSX template lives. How would I go about doing this? Let's break this down:

<center>**Step 1:** First we would need to create a name for the prop and have its value be the information or data we want to pass down to our **child component (Header)**:</center>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dldom7vcytp3opduk4fm.jpeg)

**Step 2:** Next we would need to de-structure the **prop (about)** in the **Header components** parameters using curly braces:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjwognoide8g5cbhtpj0.jpeg)

**Step 3:** If we wanted to create an **h2** element in our **Header components** JSX template and use the value of the **prop (about)** to represent the **innerText** of our **h2** element, we can:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wao49u4bhs2pb9uhso4h.jpeg)

Now if we take a look at our browser we can see that our **prop** passed down from the **parent component (App)** was utilized in our **child component of App (Header):**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc31bfwfqhy9ifh8pxvf.jpeg)
<hr/>

As you can see, the second render of the **Header component** was not affected because we did not assign it a **prop** value like we did for the first rendered **Header component**.

We can prove that when a **component** is re-used we can give that **re-used component** its own **prop** value without affecting the original **component** first rendered. Let's add a **prop** to the second rendered **Header component** in the **App component** with a new value:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7f9njwrfgs3nlrwet8c.jpeg)

**Step 4:** Now that we have added a **prop** to the second rendered **Header component** with a new value, we can de-structure the **prop (aboutTwo)** inside the parameters of the **Header component**:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7678rsm0qtspv428gi3g.jpeg)

**Step 5:** If we wanted to create an **h3** element in our **Header components** JSX template and use the value of the **prop (aboutTwo)** to represent the **innerText** of our **h3** element, we can:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63iyd4kw5i51tkja4tgr.jpeg)

Let's take another look at our browser. We can now see that our second **prop** passed down from the **parent component (App)** was utilized in our second rendered **child component of App (Header)**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7ah97aek7gh61q1wpxw.jpeg)
<hr/>

<center>**<h1>Conclusion on Props:</h1>**</center>
<hr/>

As mentioned **_props allow us to pass information or data down from a parent component to a child component_**. This can come in handy when more than one component needs to share the same information or data from a **parent component**.

<center>**Resources:**</center>
<center>**1. Components & Props**[link](https://reactjs.org/docs/components-and-props.html)</center>