Learning React as a Vue developer

Hello. I'm a fullstack developer that is more experienced and confident in Vue. Recently, I decided to pick up React as well but couldn't find a "React for Vue developers" comparison, so I'll just share differences I've noted as I was learning React. Despite the mentioned differences, both React and Vue are component driven, so they share a lot of similarities in mentality and approaching problems. This similar mentality makes switching from one to another fairly straight-forward, in my opinion.

Binding values and emitting events

In Vue, we use :value="myValue" (shorthand for v-bind:value="myValue") to one-way bind a certain attribute on an element. For emitting events, we use @click="clickEvent" (shorthand for v-on:click="clickEvent"). In React, we use single curly braces to both pass in an attribute value and an action. Also, we use full HTML action names to trigger events.

Also in Vue, there is a syntactic sugar called v-model, which creates a two-way binding on an input element. It is equivalent to:

Conditional Rendering

In Vue, we use v-if on markup to conditionally render an element.

In React, there is no such a syntactic sugar, instead we evaluate a condition or a series of conditions chained with && operator. In Javascript, when evaluating a condition’s truthiness, it reads from left to right and if one of the conditions evaluate to false, it stops reading the rest of the condition. This is used to conditionally render an element by putting the mentioned element at the end of the condition chain.

Looping through items

In Vue, we use v-for to loop through an array of items to create elements dynamically.

In React, we use Array.maps function to loop through an array of items to create elements dynamically.

Parent-child component communication

In Vue, to update a shared state in a parent-child component relation, we emit an event from the child component to parent component and update the state.

In React, to update a shared state in a parent-child component relation, we pass in setState function to the child component, then call the passed in function within the child component.

Here’s a simple example of how to update a shared state from the child component in React and Vue.

• In Vue

// ParentComponent.vue
<template>
  <ChildComponent
    :shared-state="sharedState"
    @updateSharedState="updateStateFromParent"
  />
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const sharedState = ref('Initial value')
const updateStateFromParent = (valueFromChild) => {
  sharedState.value = valueFromChild
}
</script>

// ChildComponent.vue
<template>
  <button @click="emitStateUpdate">
    Update parent state
    <br />
    Current value: {{ sharedState }}
  </button>
</template>

<script setup>
const emit = defineEmits(['updateSharedState'])
const props = defineProps({
  sharedState: {
    type: String,
    required: true
  }
})

const emitStateUpdate = () => {
  emit('updateSharedState', 'Updated from child component')
</script>

---

• In React

// ParentComponent.jsx
import { useState } from 'react'
import ChildComponent from './ChildComponent'

export const ParentComponent = () => {
  const [sharedState, setSharedState] = useState('Initial value')

  return (
    <ChildComponent
      sharedState={sharedState}
      setSharedState={setSharedState}
    />
  )
}

// ChildComponent.jsx
export const ChildComponent = ({ sharedState, setSharedState }) => {
  return (
    <button onClick={setSharedState('Updated from child component')}>
      Update parent state
      <br />
      Current value: {sharedState}
    </button>
  )
}

These are some of the differences I’ve taken note of, there may be more that I’ve forgot to mention. Let’s discuss in the comments if there is anything I missed or could have improved.

There’s also global state management to mention. React commonly uses Redux while Vue uses Vuex or Pinia to manage state. But that can be a lengthy discussion on its own and I’m thinking of going through that later in another article.

Did I miss anything? Let me know.

Thanks for reading, have a good one👋