VueVsReact.md

Vue

// ./Greeter.vue
<template>
    <div>
        <span>{{greet}}, {{who}}</span>
        <button @click="$emit('click')">Click me</button>
    </div>
</template>
<script>
    exports default {
        name: 'Greeter',
        props: ['greet', 'who'],
    }
</script>

// ./Hello.vue
<template>
    <greeter greet="Hello" :who="who" @click="$emit('click')" />
</template>
<script>
    import Greeter from './Greeter.vue'

    exports default {
        name: 'Hello',
        props: ['who'],
        components: {
            Greeter,
        },
    }
</script>


// ./HelloWorld.vue
<template>
    <hello who="World" @click="() => console.log('Clicked')" />
</template>
<script>
    import Hello from './Hello.vue'

    exports default {
        name: 'HelloWorld',
        components: {
            Hello,
        },
    }
</script>

React

const Greeter = ({ greet, who, handleClick }) => (
    <div>
        <span>{greet}, {who}</span>
        <button onClick={handleClick}>Click me</button>
    </div>
)

const Hello = (props) => <Greeter greet="Hello" {...props} />

const HelloWorld = () => <Hello who="World" handleClick={() => console.log('Clicked'))} />