DEV Community

loading...
Cover image for Basic React Component Layout

Basic React Component Layout

Femi Obadimu
Bringing Technology to Everyone 💯💯💯
・1 min read

React js one of the trendy programming languages, comes defaultly with Class based component...
Today we'll be going through the structure of the basic Function Component Layout in react Js..

Alt ³

Firstly this here is very simple , and I love it because by code looks more clearer ..
This is an alternative for Class based component and they work the same way..
One of the major difference between the two ways is that the Class based component has a method called render()... which sometimes is the fastest way to differentiate them and this depicts a lifecycle method.. whereas
Functional based components has no render()..

As I said earlier.. functional based components
makes code structuring more understanding.

Discussion (2)

Collapse
marzelin profile image
Marcin Zielinski

The main advantage of function components over class components is code collocation. You can have all code for a given feature in one block of code and not spreaded over different lifecycle methods. When you need to use a feature in more than one component, you can just create a custom hook with all the code needed for a given feature.

The easiest way to differentiate between the two is that class components use classes and function components use functions (the hint is in the name ;).

Collapse
femiobadimu profile image
Femi Obadimu Author

What do you think Guys...