What is a Component?
**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.
Creating a Component
**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:
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':
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.
How does this work?
**I know you're probably thinking what in the heck is this guy talking about?! Let's break this down:
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:
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).
Step 4: We're not done yet. If you look at the browser we still don't see 'Hello, DEV Community!' being rendered:
Why is that? We not only need to export the Header component, but also need to import the component in its parent component (App):
If we check our browser again, we still don't see 'Hello, DEV Community!' What in the world is going on?!
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:
Now if we check our browser we will see 'Hello, DEV Community!':
Conclusion On Components:
**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:
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:
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.
What are Props?
**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:
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:
Step 2: Next we would need to de-structure the prop (about) in the Header components parameters using curly braces:
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:
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):
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:
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:
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:
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):
Conclusion on Props:
**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.
Top comments (0)