How to convert Vue classess to React classess?

Question

I am React Developer and I have a project in Vue to recode in React. I've never touched Vue so a lot of things are mysteries for me. I got Vue dynamic classes and I want to 'translate' them into React code. Can somebody help me, give me a scheme? This is an example:

     <div
    class="relative"
    :class="{
      'h-10 w-10': size === 'sm',
      'h-12 w-12': size === 'md',
      'h-14 w-14': size === 'lg',
    }"
  >
</div>

How to get the same effect in React? And what if there are v-if and v-else?

Answer 1

You can try out this:

className={ "relative " +
 (size === 'sm' && " h-10 w-10 ") +
 (size === 'md' && " h-12 w-12 ") +
 (size === 'lg' && " h-14 w-14 ")
}