React Component: The Beauty of React.js

In my previous blog, I have shown you how to set up your project using create-react-app. In this one, I will discuss more theoretical type of things. You may think why react is easy to work with or why most people prefer it. Well, the first beautiful thing about react is its component-based approach. It divides merely its every work into single components, so at the end of the day, it’s reusable, easy to manage, and easier to understand.

What is Component?

In React, the total user interface is the combination of components. Here we make component by component and add them together, and at last, we get a full view. These components are reusable. You must be familiar with JavaScript functions, React acts just like JS functions and will return HTML via a render function.

It’s ok if you are still confused as it is a very new thing. Let’s create a component and add it to another file.

I hope you have your previous project setup. If not, then you can see my last blog Let’s Dive Into React. Open your VS code, and in the file you created, you will see some files are already built for you. In there, you will see App.js file in which you will see a return function and import and export files. Here App is a functional component as it has a render function. 

So we will run our file in this App.js file. Now let’s open a new JS file. I have named my file FirstComponent.js. In that file, we will create a component.

Alright, now you can see above our very first component! It’s necessary to import React; at the end of the file, you will have to export the component of that file. Always capitalize your component name. Here I have created (FirstComponent) component and returned a simple paragraph. Now in App.js file, you will have to import this component file and call the component there.

As you can see above, I have imported the file. Now it will inherit all the file contents. After that, we will declare it like I did here <FirstComponent />

And you can see the component named ‘FirstComponent’ is shown here.

That is for today. Before the next blog, try creating as many components as possible. Always remember that practice makes a man perfect. Do little things with component and later share that with me.