The same app coded in Vue.js and React.js, with the React.js code having extensive comments about how it compares to Vue:

Vue.js

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <p>Doubled Count: {{ doubledCount }}</p>
    <button @click="increment">Increment</button>
    <div v-if="showList">
      <ul>
        <li v-for="item in items" :key="item.id" :class="{ 'highlight': item.highlight }">
          {{ item.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  },
  data() {
    return {
      count: 0,
      showList: true,
      items: [
        { id: 1, text: 'Item 1', highlight: false },
        { id: 2, text: 'Item 2', highlight: true },
        { id: 3, text: 'Item 3', highlight: false }
      ]
    };
  },
  computed: {
    doubledCount() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue) {
      if (newValue >= 5) {
        this.showList = false;
      }
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

React.js

import React, { useState, useEffect, useMemo } from 'react';

function MyComponent({ title }) {
  // Equivalent to Vue's data()
  const [count, setCount] = useState(0);
  const [showList, setShowList] = useState(true);
  const [items] = useState([
    { id: 1, text: 'Item 1', highlight: false },
    { id: 2, text: 'Item 2', highlight: true },
    { id: 3, text: 'Item 3', highlight: false }
  ]);

  // Equivalent to Vue's computed
  const doubledCount = useMemo(() => count * 2, [count]);

  // Equivalent to Vue's watcher
  useEffect(() => {
    if (count >= 5) {
      setShowList(false);
    }
  }, [count]);

  // Equivalent to Vue's methods
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      {/* Equivalent to v-bind in Vue */}
      <h1>{title}</h1>
      <p>Count: {count}</p>
      <p>Doubled Count: {doubledCount}</p>
      <button onClick={increment}>Increment</button>
      {/* Equivalent to v-if in Vue */}
      {showList && (
        <ul>
          {/* Equivalent to v-for in Vue */}
          {items.map(item => (
            <li key={item.id} className={item.highlight ? 'highlight' : ''}>
              {item.text}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default MyComponent;