Regular function vs. React Component

In this article, I’m going to help you differentiate the difference between a regular function and a React component, in the simplest way possible.

I believe you’ve heard the word “function” before, right? If so, does below structure seems familiar to you?

function myCuteFunction(){
    // whatever the function does is inside here
}

The above is a simple example of a regular function, whereby you can find it in vanilla JavaScript, or other programming languages such as Java — the syntax is pretty much similar.

How does a regular function being called whenever it is needed?

//calling the above function
myCuteFunction();

However, have you heard of “Component”?

In React, a component refers to a reusable function that you can later call it — sounds similar to functions, right? The question is how does it differs from the regular function? Now, let’s take a look at the simple example below:

function MyCuteFunction(){
    return(
        //whatever the function does is here
    )
}

Can you identify the differences? Let me help highlight it for you:

1. Naming convention: The name of the function is written in Pascal case instead of camel Case.

   MyCuteFunction is used inside React function instead of myCuteFunction

2. It returns something - usually the React component will return the DOM elements (which is called as JSX).

How does a React component being called whenever we need to use it? Let’s take a look at below example:

<MyCuteFunction />

Notice that it is being called inside an angle brackets with a self-closing HTML compared to how a regular function is being called?

Turned out that differentiating these two can be really simple. I hope that this sharing would be useful to someone out there! xo

#30DaysCodingChallenge #Day1