Components & Props, Oh My!
Written by Stephanie Segura | March 6, 2021
Thank you for visiting this post! Be sure to also take a look at my other work on LinkedIn, Github, and my website.
Let’s talk about the heart of React: Components!
Let’s examine a high level overview of what a React component is before we implement one. The official React documentation on components says it best:
“Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.”
Components modularize both functionality and presentation in our code. In order to understand how powerful this is, consider just how intricate web applications can become. The difficulty in logically arranging, architecting, and programming these web applications increases with their size. Components are like little packages: they help us keep everything organized and predictable while abstracting the ‘boiler plate’ code. Each component contains a snippet of code that describes what it should render to the DOM. Enough of a description — let’s see some examples!
Step 1 — write the components
Let’s read this code line by line:
- a new class, Article, is declared
- the class extends React’s component class (which provides us with built in methods and attributes)
- a render( ) method is defined, and what it should return is explicitly provided (in render( ), we tell React “Hey, when you want to put this component on the DOM, here is what it should become!”)
When React creates this element and adds it to the DOM, the resulting HTML will look just as you would expect:
In both of our examples, React is taking JavaScript code, interpreting that special HTML/JavaScript syntax within the render( )’s return( ) statement, and spitting out plain old HTML that browsers will know how to represent to the user.
Once we have our components in hand, it’s time to actually use them.
Step 2 — use the components
Now that we have these components written, all we need to do is make sure some other component is making use of them in its render method. Every React application has some top level component(s). Very often, this top level component is simply called App. Let’s assume just that for our example:
Let’s talk about what’s going on in the return block! It’s neither HTML or real Javascript! It’s a weird mashup of the two, and it’s called JSX. Stay tuned for a future blog dedicated to only JSX! What we are seeing in this App component’s render ( ) method is a straightforward description of what we want: “Hey App component! When you render, I want you to also be responsible for making both the Article and the Comment component!”. Of course, because computers still listen to us (for now) it will do just that! Here is what the resulting HTML will look like:
This unpacks logically. The App component (being our top level component) wraps around both Article and Comment, and we already know what they look like when they are turned into HTML.
As you may expect, we refer to the App component as both the Comment and Article component’s parent component. Inversely, we refer to Comment and Article as children components of App.
Making Components Dynamic
We will use the following components:
- BlogContent — contains the content of the blog post
- Comment — contains one user’s comment
- BlogPost — the ‘top level’ React component, which is responsible for rendering both BlogContent and Comment
Time to put the dynamic aspect of components to use! Let’s start with the Blog Content component. The following snippet shows how we can describe variables in our components’ render( ) methods:
You should see something new in the above code. Inside of render( )’s return block, we have this funky syntax: {this.props.articleText}.
This line is telling React to place the value that “this.props.articleText” represents within the <div>. Ok, so where does “this.props.articleText” come from?
Passing Information
React allows us to pass units of information from a parent component down to a child component. We call these props, which we will dig more into in a later lesson. Let’s see how we can pass information from BlogPost down to its child BlogContent:
In the above, we see that when we render the Blog Content component, we also create a prop called articleText that we assign a value of “Dear Reader: Bjarne Stroustrup has the perfect lecture oration.” This value is accessible from within the BlogContent component as this.props.articleText! To create props, we write them the same way as writing attributes for an HTML tag. But remember, this is JSX and not HTML!
One more thing about props: they can be any data type! In our example, we pass a string as a prop. But we can pass a number, boolean, object, function, etc. as a prop!
Expanding our Application
We still need a Comment component that we can use for each comment in a BlogPost. The Comment component would look something like:
This component, when used, will display content that is passed down to it, allowing us to pass different content to multiple Comment components. Let’s add them in. Of course, with components being re-usable, we can make as many as we want:
…and just as before, we can pass content data down to them:
There is quite a bit going on here. Most notably, we are passing information from a parent component to many child components. Specifically, we are doing this by creating a prop called commentText to pass to each Comment component, which is then accessible in each instance of Comment as this.props.articleText. Let’s expand the HTML that this would ultimately render:
While HTML elements are the basic building blocks of a website, (for example, a <div>), a React application usually consists of several React components combined together. Unlike simple HTML elements, React components are smarter and bigger. They allow you to do much more and incorporate logic into how content displays.
React components:
- are modular, reusable, and enable a ‘templating’ like functionality
- help us organize our user interface’s logic and presentation
- enable us to think about each piece in isolation, enabling us to apply structure to complex programs
Conclusion
Thank you so much for stopping by! Please checkout my online portfolio and feel free to connect with me on Linkedin!