Understanding React Components

We all have used HTML for creating specific web layouts like Header, Hero, Sidebar, Navbar, Footer, etc, styling with CSS for making it look beautiful plus adding some JavaScript as well so the web page can become interactive as well.

This is the story of every developer who wants to build websites/webapps and host them to server. We all have used HTML, CSS and JavaScript to build cool looking websites. For example like a blog app, etc.

But there was a problem which we all developers faced (again from all I mean 90% of developers) that the moment a website start to become complex or I should say a little bigger than a normal view website, Then multiple same kind of layouts started to appear at multiple places in the website.

For example same kind of modal which is used for every page in a big website like ecommerce or something. We had to write same markup code every where we needed for that modal, Which made writing code hectic for the developers and a lot of same code start to appear in multiple places.

In the developer community there is a concept called "DRY" which is talked a lot. It basically means "Do Not Repeat". Which tells us that we should not be repeating our code written once at some place which have common functionality. Thus we should try to take out common functionality from it and reuse it with the help of functions. And a component is also nothing but a function as well.

So React gives us the power convert already written markup code into small components so we can use it multiple times at multiple places in a website without actually writing that same code again and again.

So this was the explanation for what are React Components.

How to define a React Component

Historically we used to create markups with the help of HTML and then used JavaScript to add functionality into it, Which was good for old times, Because on those days view didn't have any kind of interaction on it. Today we need interaction more than every other thing. Thus to make interaction seamless and smooth we use React components to reduce existing repeated code. React components are mixture of JavaScript functions merged with HTML markup as shown in above image.

In the above image we have created a component displaying some data with the help of markup.

There are some steps related to defining components and how to use them in our websites.

1. Create JavaScript functions by naming your functions with Capital letter, This is crucial for creating a component.

2. Write "export default" before naming your component, It is basically JS standard syntax not related to react. Which tells that this is the main function in that particular file. Thus we can import it other files.

3. Define the function like this => "function Name() {}"

4. Now you can add markup as your choice, for example shown in above example. It looks like it is written in HTML but is actually JavaScript.

5. You need to wrap your component with a return keyword with parenthesis.

Using the Component

So that the component is ready we can simply import where we want in our app and can simply use it (written in the form of function name with HTML tags) This was all for React components to understand as a beginner, for more in depth info you can visit React Docs as well.