DEV Community

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

Posted on • Edited on

2 1

React, Vue and Svelte: Comparing Imported Components

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit