What you should know about React Components

What you should know about React Components

As I already said, components are building blocks of  a React app. No way you can make some React application without components. It's like quenching your thirst with no liquid -  it just won't happen. So if you want to build an app in React, you have to get familiarized with components.

However, the good news is: they are not that difficult to grasp at all!

So, we can define a component as a JavaScript class or a JavaScript function. In other words, there are two types of components you can make: a class component and functional (stateless) component. 

Now, what is the difference between the two and when should we use each of them?

The most visible difference between the two types of components in React is the syntax. 

If we want to write a functional component, we will write just a simple JavaScript function which accepts props as an argument and returns a React element. No worries, we will talk about props later.
Essentially, these components accept an argument and return some JSX (some weird type of HTML mixed with JavaScript, we will talk about it in detail in one of the following posts).
They are shorter and simpler to write (as compared to class components) and more concerned with UI. If you want just to present some content in a nice way, a functional component is the way to go.

In a class component we have to extend from React.Component and make a render function which will return a React element. This type of component requires a few more coding lines. but will in turn provide some benefits.

So what are those benefits? Why not just use functional components?

There are some things functional components cannot do. For example, if we want to have state in the components, we need a class component.

Now what is the state? State is actually an object which allows us to create a dynamic component; with content that may change if the state is changed.

For example, we have a class component and state = {
showPopUp: true;
}

When a user closes the pop up window, the state will be

state = {
showPopUp: false;
}

In this way, our user changed the state. Another example is filling out the form. When it comes to the forms, Initial state of the component is empty, for example:

state = {
name: ' ',
lastName:' ',
email: ' ',
}

After the user enters the data, the state will look like this:

state = {
name: 'Adam',
lastName: 'Black',
email: 'adamb@gmail.com'
}


So, the state is an object that can be changed and this change
will generate re-rendering of the component. Functional components cannot do this. Well, they actually can but not in this way. There is a way for functional components to get states (lifecycle hooks), but we will come to that later on. Class components are not so concerned with UI.

Aside from the state, class components offer a variety of properties and methods that can be used by the class component automatically (after extending React Component, of course). When we do need all these features, class components are just awesome!

Why do we need functional components, you might ask?

Sometimes you will not need as many features and benefits offered by React Components. 

In these cases,

functional components are an excellent solution. They are simple to read and test, and therefore easier to debug. In case you use these components, you have less code to write.

Best practice is: use functional components whenever you can, and use class components whenever you have to!

And to finish up the post nicely and elegantly, I am posting two examples of class and functional components. I hope that you can tell the difference by now, but still - Repetition is the mother of all learning - first, functional component example:

I took this one from https://www.robinwieruch.de/react-function-component - so, no I didn't type it.

Now here is an example for a class component

source: https://www.freecodecamp.org/news/how-to-write-your-first-react-js-component-d728d759cabc/

Thank you folks, till next time!