DEV Community: bagus prabangkoro

React: Method Component vs Class Component

bagus prabangkoro — Sun, 29 Sep 2019 12:45:17 +0000

There are some differences between method component and class component. I'll try to highlight some of it, and when to use it.

Method Component

The simplest way to declare a component in React. We only need to declare a method that returns a jsx syntax and it's done. Below is an example:

We can also pass something into the component using props. This props will be the first parameter on the method component.

Class Component

This is the robust version of the component. With class component you can do more. Props will by default, included in the class (this.props). You can use state, kinda local variable for your component. You may intruduce many class' method that share the same state. And don't forget to be careful with object binding, I often use the arrow method to avoid object binding problem.

Class component also allows you to use lifecycle method. It's kinda bunch of methods that will be called in particular event like component mount, updated, unmount, etc.

You can see the diagram of lifecycle here:

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

When to Use Class Component or Method Component

The major reason to not using class component is when you only need a simple component or dumb component like a button, card, or representational component. If your component doesn't need a complex state, not using lifecycle, method component is best for you. And vice versa.

Sometimes, I'm not sure if my component will suits method or class component. In this case, I prefer to use class component from the beginning, so I don't need to change anything if I need more robust component.

Bonus

If you are using VS Code, you can install a React plugin:

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

This plugin will save your time a lot. There are tons of shortcut that make your life easier, such as rcc to create React Class Component, and rfc to create React Method Component.

stay hungry, stay foolish

My First Thought of React

bagus prabangkoro — Fri, 27 Sep 2019 09:25:39 +0000

Lately, I am continuing my online course on Udemy with an interesting topic: Modern React with Redux. This is my first time learning about this library, so I'm a bit curious about why this library is so famous. I am a Vue person, doing my work on the office mostly with Vue, and this React feels so strange to me. Strange but interesting at the same time. Here is my first thought of exploring React:

JSX!

If you have knowing Vue for a while, you might wonder how React put between template and logic. And here it comes JSX in-game. JSX combine template and logic. Nothing more, no place to separate them. It's a bit weird to me and changes my workflow as well.

Although it combines everything, it has benefit. Creating component in React is extremely simple! You can create one line of the method, and call it a component.

Functional Paradigm

React drives you to write short and reusable code. You rarely see any deep (Hadouken) code, especially in DOM element. React doesn't give you a syntactic sugar like v-for, v-if, v-else, like in Vue.

For example, every time you want to show repeated element. You have to utilize js syntax map.

A bit deep huh?

This situation has no syntactic sugar will drive you to write readable code, with no deep loop, no nested loop. A good practice is to separate this looping item into a single component.

Wonderful Props

I think this is the key value of React. It provides really powerful props. With props, you can pass anything, string, object, or even a Component! (passing component in props is not a good practice anyway, you can use props child instead) This is mind-blowing really.

Passing any data to props is really simple, and using it is simpler.

We don't need to define what props are passing, we just use it instantly.

React has pros and cons against Vue. It is limited on its syntactic sugar, but React has a simple rule so we can basically do anything with it. It gives us flexibility more than Vue.

Stay hungry, stay foolish

Hello World

bagus prabangkoro — Fri, 27 Sep 2019 08:17:31 +0000

Hi all!

First thing first: I've start writing not long ago. I stumbled on Medium before, and I realize that I can get more opportunity here if I write about developer stuff. So here we are.

Stay hungry, stay foolish