DEV Community

Cover image for React, Vue and Svelte: Comparing Imported Components
Clément Creusat
Clément Creusat

Posted on • Edited on

React, Vue and Svelte: Comparing Imported Components

#javascript #react #vue #svelte

Import component in...

Importing a child component is not so different in React, Vue or Svelte. Except when you are using exported component in React with the {}.

Check it out 🚀

React 

// top of the file
import { ChildComponent } from 'ChildComponent'
Enter fullscreen mode Exit fullscreen mode

With export default:

// top of the file
import ChildComponent from 'ChildComponent'
Enter fullscreen mode Exit fullscreen mode

Vue 

<script setup lang="ts">
import ChildComponent from 'ChildComponent.vue'
</script>
Enter fullscreen mode Exit fullscreen mode

Svelte 

<script lang="ts">
import ChildComponent from 'ChildComponent.svelte'
</script>
Enter fullscreen mode Exit fullscreen mode

Passing props in...

React and Svelte has the same approach. Vue, on other hand, has the v-bind directive or its shorthand.

Check it out 🚀

React

Link

<ChildComponent msg={msg} />
Enter fullscreen mode Exit fullscreen mode

Vue

Link

<ChildComponent v-bind:msg={msg} />
// or shorthand
<ChildComponent :msg={msg} />
Enter fullscreen mode Exit fullscreen mode

Svelte

Link

<ChildComponent msg={msg} />
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

abhay_yt_52a8e72b213be229 profile image

Mastering Redux Toolkit: Simplify State Management in Your React App

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Mastering MobX: Simplified and Reactive State Management for React

Abhay Singh Kathayat -

prince_beec5ccde00b7c6c73 profile image

Toggle Switch Realistic illusion using the core html and core Css Code

Prince -

antkales profile image

Counter - A React library for animating numeric transitions

Anton -