I never understood React components
Until it was explained like this
I was confused when it came to React components at some point and had so many unanswered questions about them.
Have you ever felt that way?
This was until it was explained to me like this.
Note: Read to the end to get the mindset changing advice
With that said, lets hit the road!
So what are React components?
React components allow you to divide your user interface (UI ) into independent, reusable sections which can be thought about in isolation.
This means that if you are working on an app with a nav bar, a feed, a post section, a comment section and so on, you can divide that whole app into little chunks, where you can build, style and program the nav bar as a component independent of other components of the app.
This applies to every other component.
This, however, helps in the better organization of the app and is extremely helpful in production environments.
For instance, if you are told to work on the nav bar of an existing React app, you can simply find the nav bar component of the app and make the required changes without affecting any other component.
This, therefore, increases the maintainability of your code.
How do they work?
The easiest way to describe a React component comparing it to a JavaScript function.
Components accept inputs like props, objective argument and also return React elements which are then rendered on the screen.
What is the syntax?
There are 2 types of React components, each of which have different syntaxes.
1. Functional based components
Functional based components are literally JavaScript functions whereby you can pass in props, object argument with data and also return a React element.
It was called the stateless component a while back but that has changed because of the new feature introduced ( React hooks ) which allows us to manage the state of the components.
2. Class based components
This also has the same properties as the functional based components but here is the difference.
Class based components are written in es6 class format.
It makes use of the life cycle methods to manage its state.
How else can I use React components?
1. Importation and exportation of components
To be able to use a particular component in another component or components, you need to export it then import it to where ever you want to make use of it.
Let me make clear that you can export a component in 2 way. These ways have different syntaxes for their importation.
First, you can export by using the export default code like this;
You can also export using the export code like this;
The importation syntax code for the former is like this;
It is imported without curly braces.
On the other hand, the latter is imported with curly braces as shown in the code below.
2. Rendering components
If you are done importing the component to another component or components, you have to render it else it won’t be rendered on your browser.
Follow this step and you are good to go
When rendering your components, you have to render the component tag.
You might be wondering what a component tag is.
A component tag is written like this;
<Welcome/>
The first letter of every component tag must be in uppercase just like the first letter of every of your component's name must be in uppercase.
If you don’t write it this way, React would process it as a DOM tag like a HTML tag, for instance, a div tag <div/> or <welcome/> instead of a component tag, causing your IDE to freak out and that certainly won’t be good.
Here is a code snippet for rendering a component
This however means that you can render a particular component as many times as you want where ever you want like this;
3. The props rule
There is a function which can never modify its inputs and always return the same result for the same input.
This function is called a pure function
The impure function is the complete opposite of the pure function.
Components declared as functions or a class must never modify its own props.
React is quite flexible but it has a very strict rule.
All React components must act like pure functions with respect to their props.
This means that the props of a component is a read-only feature.
Advice for developers (mostly junior developers and beginners)
I always asked this question.
‘Should I learn functional based or class based components?’
And I know most beginners and junior developers asks this too.
So here is what I have learnt.
Read to the end to understand my answer.
Well, I prefer using the functional based component.
Why?
For me, class based components are pretty complicated and complex and most times confusing especially with the life cycle methods while functional based components are literally like JavaScript function and are pretty much easier to understand.....so why not go for it.
In addition, functional based components use the React hooks which simplifies the life cycle methods of the class based components.
Up until now, I have mentioned reasons why I prefer functional based components to class based components.
But there is one little problem.
Class based components were made before the functional based components.
So in most production environment (companies) where React has been in utilization, they would probably have made their apps with class based components.
So if you only know the functional based components, it would be a bit harder to work with them since you don't understand much of the class based components.
Although, I think functional based components are better, you would need to understand both, in order to be at an advantage.
After understanding both, you can choose to use more of functional based components in your apps.
I am no Sunil Sandhu or Harsha Vardhan but i believe this is a realistic approach to that question from what I have discovered.
Final thoughts
React components are basically like JavaScript function that accepts inputs and returns an output. It has other features attach to it like importation, exportation and so on, with a strict rule that controls its usage.
I hope this has been helpful to you.
Thank you for your time and good luck!
Agbejule Kehinde Favour.
