Main Principles of React Components

Today we are going to discuss three main Tenets of react’s ecosystem and they are going to govern how we design ours react applications. That is as follow:

1. Components reusability
2. Component Nesting
3. Components configuration

Let discuss the problem first

Example: Let suppose you want to make a comment section on your webpage.

import react from 'react';
import reactDom from 'react-dom';
import faker from 'faker';
const App = () => {
return (
<div className="ui container comments">
<div className="comment">
<a className="avatar" href="/">
<img alt="avatar" src={faker.image.avatar()} />
</a>
<div className="content">
<a className="author"> John</a>
<div className="metadata">
<span className="date">Today at 6:00 PM</span>
</div>
<div className="text">Nice Blog Post!</div>
</div>
</div>
</div>
);
};
reactDom.render( <App />, document.getElementById('root'));

The above code results in this comment on our web page.

But we may need more than one comment on our page. In order to do that we have to repeat the code of comment more than one time as below. And our will be a mess as below you can see that.

import react from 'react';
import reactDom from 'react-dom';
import faker from 'faker';
const App = () => {
return (
<div className="ui container comments">
{/* first comment */}
<div className="comment">
<a className="avatar" href="/">
<img alt="avatar" src={faker.image.avatar()} />
</a>
<div className="content">
<a className="author"> John</a>
<div className="metadata">
<span className="date">Today at 6:00 PM</span>
</div>
<div className="text">Nice Blog Post!</div>
</div>
</div>
{/* second comment */}
<div className="comment">
<a className="avatar" href="/">
<img alt="avatar" src={faker.image.avatar()} />
</a>
<div className="content">
<a className="author"> John</a>
<div className="metadata">
<span className="date">Today at 6:00 PM</span>
</div>
<div className="text">Nice Blog Post!</div>
</div>
</div>
{/* 3rd comment */}
<div className="comment">
<a className="avatar" href="/">
<img alt="avatar" src={faker.image.avatar()} />
</a>
<div className="content">
<a className="author"> John</a>
<div className="metadata">
<span className="date">Today at 6:00 PM</span>
</div>
<div className="text">Nice Blog Post!</div>
</div>
</div>
</div>
);
};
reactDom.render( <App />, document.getElementById('root'));

now, we only repeat the code 3 times and it is already complicated enough. What if we need hundreds or thousands of comments? In order to do that and reduce our code complexity, we need to create reusable components.

How to create reusable react component

Here below are some steps to create reusable components:

1. Identify JSX that seems to be duplicated in the code.
2. What is the purpose of that code? Think of a descriptive name according to its functionality.
3. Create a new file inside the src folder of our project for this duplicated code to be placed in. The name of the file should be the same as the component name.
4. Create a new component in the new file and paste the duplicated JSX code into it.
5. Now import the new component file to the main index.js file.

As we already identify the code that seems to be duplicated in the above example. Now, how do decide the name for the component? As our specific code tells us the comment details like name, time, content, avatar, etc, So this way the purpose of our code is to provide comments detail. We should name it as CommentDetail. You can choose the name of your choice also. Now create a new file as commentDetail.js in the src folder of your project.

Component Nesting:

To access the CommentDetail component code, we need to do 2 things:

First, we need to use the export statement at the end of the CommentDetail file. This statement is going to make our component available to other files inside of our project.

export default commentDetail;

Secondly, to actually get access to the file containing the export statement we add an import statement to our index.js file.

import commentDetail from './commentDetail';

Now, paste the component code into our new file. Now the commentDetail.js and index.js file contain the following code:

CommentDetail.js
import react from 'react';
import faker from 'faker';
const CommentDetail = () => {
return (
<div className="comment">
<a className="avatar" href="/">
<img alt="avatar" src={faker.image.avatar()} />
</a>
<div className="content">
<a className="author"> John</a>
<div className="metadata">
<span className="date">Today at 6:00 PM</span>
</div>
<div className="text">Nice Blog Post!</div>
</div>
</div>
);
};
export default CommentDetail;
--------------------------------------------------------------------
index.js
import react from 'react';
import reactDom from 'react-dom';
import CommentDetail from './CommentDetail';
const App = () => {
return (
<div className="ui container comments">
<CommentDetail />
<CommentDetail />
<CommentDetail />
<CommentDetail />
<CommentDetail />
<CommentDetail />
</div>
);
};
reactDom.render( <App />, document.getElementById('root'));

Congratulations! now our code is reusable and less complex. Now, here rises one more issue. We don't want all comments to contain the same content. Here, comes the topic component configuration using react prop system.

Component Configuration using prop system

Basically, a prop system in React is a system using to pass data from a parent component to a child component or a nested component. The entire goal of the prop system is to somehow communicate data from the parent down to a child with the ultimate goal of customizing the child and making sure that the content that it displays on the screen is somewhat different, or to make sure that the behavior of the component is different when the user interacts with it.

Component hierarchy

We are going to use the terms parent component for App and child component for CommentDetail.

There are two stages in the prop system:

1. First, to provide the information from the parent to the child component.
2. Second, the child component consumes or make use of that information

Now, let's focus on providing the information. In order to do that, we are going to write just like any other attribute in JSX. We write the prop name and assign its value as below.

<CommentDetail author="John" commentTime="5 days ago" content="Nice Blog Post!!"/>

It's totally up to you that how you want to name your property (prop) e.g authorName or nameOfAuthor etc.

After providing the information to the child, now let's open up a child to make use of that information. Inside our child component, the prop shows up inside of an object that is provided as a first argument to the child component function.

CommentDetail.js
import react from 'react';
import faker from 'faker';
const commentDetail = props => {
return (
<div className="comment">
<a className="avatar" href="/">
<img alt="avatar" src={faker.image.avatar()} />
</a>
<div className="content">
<a className="author"> {props.author} </a>
<div className="metadata">
<span className="date"> {props.commentTime} </span>
</div>
<div className="text"> {props.content} </div>
</div>
</div>
);
};
export default commentDetail;
--------------------------------------------------------------------
index.js
import react from 'react';
import reactDom from 'react-dom';
import CommentDetail from './commentDetail';
const App = () => {
return (
<div className="ui container comments">
<CommentDetail author="John" commentTime="5 Days Ago" content="Nice Blog Post!" />
<CommentDetail author="Alex" commentTime="Today at 6:30PM" content="Good Work!!" />
<CommentDetail author="Amanda" commentTime="Yesterday at 11:00AM" content="Keep it up!" />
</div>
);
};
reactDom.render( <App />, document.getElementById('root'));

As you can see, we have different details for different comments. There is one more thing I want to elaborate that the faker library I use in index.js file is used to assign random unique avatars for every comment. You have to run the following command to install the package inside your project :

npx install --save faker

I hope you now will be able to understand these concepts.