Comparison of Svelte and other JS frameworks - Irregular Svelte series-01

<p data-line="2" class="code-line">Hello (or good evening), let’s start. This is the first part of our irregular Svelte series.</p>
<p data-line="4" class="code-line"><a href="https://blog.kinto-technologies.com/posts/2022_09_06_svelte_newpost_en/" target="_blank" rel="nofollow noopener noreferrer">Last time</a>, I roughly described the process to get SvelteKit running. (It has been updated to fit SvelteKit's major update, so please read it.)</p>
<p data-line="6" class="code-line">This time, I will compare the characteristics of Svelte, which is based on the concept of "<strong>Write less code</strong>," with other JS frameworks.</p>
<h2 id="svelte-%2F-react-%2F-vue.js" data-line="8" class="code-line"><a class="header-anchor-link" href="#svelte-%2F-react-%2F-vue.js" aria-hidden="true"></a> Svelte / React / Vue.js</h2>
<p data-line="10" class="code-line">Although React and Vue.js uses virtual DOMs and Svelte does not use DOMs, they are often compared to each other, and we will do that here. *I will use Svelte (v3) / React (v18) / Vue.js (v3).</p>
<h2 id="fetching-%26-looping" data-line="13" class="code-line"><a class="header-anchor-link" href="#fetching-%26-looping" aria-hidden="true"></a> Fetching & looping</h2>
<p data-line="14" class="code-line">Fetching and looping are often written in sets, so let’s write them together and compare them.</p>
<h3 id="svelte" data-line="16" class="code-line"><a class="header-anchor-link" href="#svelte" aria-hidden="true"></a> Svelte</h3>
<p data-line="18" class="code-line">Let's start with Svelte. Svelte has its own await/block syntax, that can be written neatly.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename"> Fetch on Svelte</span></div><pre class="language-js"><code class="language-js code-line" data-line="20"><span class="token operator"><</span>script<span class="token operator">></span>
<span class="token keyword">const</span> <span class="token function-variable function">fetchItems</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'URL'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword control-flow">return</span> <span class="token keyword control-flow">await</span> items<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>

<span class="token punctuation">{</span>#<span class="token keyword control-flow">await</span> <span class="token function">fetchItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator"><</span>p<span class="token operator">></span><span class="token maybe-class-name">Loading</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token punctuation">{</span><span class="token operator">:</span>then items<span class="token punctuation">}</span>
<span class="token punctuation">{</span>#each items <span class="token keyword module">as</span> item<span class="token punctuation">}</span>
<span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token punctuation">{</span><span class="token operator">/</span>each<span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token operator">:</span><span class="token keyword control-flow">catch</span> error<span class="token punctuation">}</span>
<span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>error<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token punctuation">{</span><span class="token operator">/</span><span class="token keyword control-flow">await</span><span class="token punctuation">}</span>
</code></pre></div><p data-line="38" class="code-line"></p>
<h3 id="react" data-line="40" class="code-line"><a class="header-anchor-link" href="#react" aria-hidden="true"></a> React</h3>
<p data-line="42" class="code-line">There are more lines of code compared to Svelte. However, it is usually split up and is almost never left like this. In the beginning, useState is used in the definition. Perhaps this is what is typical of React.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename"> Fetch on React</span></div><pre class="language-jsx"><code class="language-jsx code-line" data-line="44"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">FetchComponent</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>error<span class="token punctuation">,</span> setError<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>isLoaded<span class="token punctuation">,</span> setIsLoaded<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>items<span class="token punctuation">,</span> setItems<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
<span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'URL'</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token arrow operator">=></span> res<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>
<span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setIsLoaded</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setItems</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setIsLoaded</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setError</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isLoaded<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Error: </span><span class="token punctuation">{</span>error<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isLoaded<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Loading...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
<span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>items<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="vue.js" data-line="83" class="code-line"><a class="header-anchor-link" href="#vue.js" aria-hidden="true"></a> Vue.js</h3>
<p data-line="85" class="code-line">Writing with React feels similar to writing with Vue 3 and 2.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename"> Fetch on Vue</span></div><pre class="language-html"><code class="language-html code-line" data-line="87"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>

<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> error <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>

<span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'URL'</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> res<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">json</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>items<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> json<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> err<span class="token punctuation">)</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>error<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ error.message }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>items<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(item,index) in items<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Number:{{index+1}} Name:{{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-else</span><span class="token punctuation">></span></span>Loading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><h2 id="reactive" data-line="113" class="code-line"><a class="header-anchor-link" href="#reactive" aria-hidden="true"></a> Reactive</h2>
<p data-line="114" class="code-line">This is an essential mechanism in modern frontend applications where components are reused.</p>
<h3 id="svelte-1" data-line="117" class="code-line"><a class="header-anchor-link" href="#svelte-1" aria-hidden="true"></a> Svelte</h3>
<p data-line="118" class="code-line">In Svelte, preface with <code>$:</code> to make the code reactive.

If you do not add <code>$:</code>, it will not be executed even if you change dependent values.

If you are used to other frameworks, you may be confused at first, but once you use it, you'll be impressed by how clear it is.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename"> Reactive on Svelte</span></div><pre class="language-js"><code class="language-js code-line" data-line="122"><span class="token literal-property property">$</span><span class="token operator">:</span> foo <span class="token operator">=</span> <span class="token boolean">false</span>
</code></pre></div><h3 id="react-1" data-line="127" class="code-line"><a class="header-anchor-link" href="#react-1" aria-hidden="true"></a> React</h3>
<p data-line="128" class="code-line">Without getting into details, you generally use <strong>useState</strong> to define in React. Comparing it to Svelte, <strong>useState</strong> has the same role as <strong>$:</strong>.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename"> Reactive on React</span></div><pre class="language-jsx"><code class="language-jsx code-line" data-line="130"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>useState<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>foo<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="vue.js-1" data-line="135" class="code-line"><a class="header-anchor-link" href="#vue.js-1" aria-hidden="true"></a> Vue.js</h3>
<p data-line="137" class="code-line">When using Vue, it changes when you generate with <strong>reactive</strong>.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename"> Reactive on Vue</span></div><pre class="language-html"><code class="language-html code-line" data-line="139"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> computed <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>

<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
state<span class="token punctuation">.</span><span class="token property-access">count</span><span class="token operator">++</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><h2 id="about-props" data-line="155" class="code-line"><a class="header-anchor-link" href="#about-props" aria-hidden="true"></a> About props</h2>
<p data-line="156" class="code-line">I will now compare by passing a basic string. They all seemed different, but they have almost the same writing style.</p>
<h3 id="svelte-2" data-line="159" class="code-line"><a class="header-anchor-link" href="#svelte-2" aria-hidden="true"></a> Svelte</h3>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">ChildComponent.svelte</span></div><pre class="language-js"><code class="language-js code-line" data-line="161"><span class="token operator"><</span>script<span class="token operator">></span>
<span class="token keyword module">export</span> <span class="token keyword">let</span> name
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>

<span class="token operator"><</span>p<span class="token operator">></span><span class="token maybe-class-name">Hello</span><span class="token punctuation">,</span> <span class="token constant">I</span>'m　<span class="token operator">:</span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
</code></pre></div><div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">ParentComponent.svelte</span></div><pre class="language-js"><code class="language-js code-line" data-line="169"><span class="token operator"><</span>script<span class="token operator">></span>
<span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">ChildComponent</span></span> <span class="token keyword module">from</span> <span class="token string">'./ChildComponent.svelte'</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>

<span class="token operator"><</span><span class="token maybe-class-name">ChildComponent</span> name<span class="token operator">=</span><span class="token string">"Svelte"</span> <span class="token operator">/</span><span class="token operator">></span>
</code></pre></div><h3 id="react-2" data-line="178" class="code-line"><a class="header-anchor-link" href="#react-2" aria-hidden="true"></a> React</h3>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">ChildComponent.jsx</span></div><pre class="language-jsx"><code class="language-jsx code-line" data-line="180"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">ChildComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, I'm　:</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">ChildComponent</span><span class="token punctuation">;</span>
</code></pre></div><div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">ParentComponent.jsx</span></div><pre class="language-js"><code class="language-js code-line" data-line="187"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">ChildComponent</span></span> <span class="token keyword module">from</span> <span class="token string">'./ChildComponent.jsx'</span>

<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">App</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span><span class="token maybe-class-name">ChildComponent</span> name<span class="token operator">=</span><span class="token string">"React"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span>

</code></pre></div><h3 id="vue.js-2" data-line="200" class="code-line"><a class="header-anchor-link" href="#vue.js-2" aria-hidden="true"></a> Vue.js</h3>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">ChildComponent.vue</span></div><pre class="language-html"><code class="language-html code-line" data-line="201">
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hello, I'm　{{name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>

export default {
props: {
name: String,
}
}
</code></pre></div><div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">ParentComponent.vue</span></div><pre class="language-js"><code class="language-js code-line" data-line="214">
<span class="token operator"><</span>script<span class="token operator">></span>
<span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">ChildComponent</span></span> <span class="token keyword module">from</span> <span class="token string">'./ChildComponent.vue'</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span>template<span class="token operator">></span>
<span class="token operator"><</span><span class="token maybe-class-name">ChildComponent</span> name<span class="token operator">=</span><span class="token string">"Vue"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span>
</code></pre></div><p data-line="224" class="code-line">Import the child component and pass the value. All of them were easy to understand.</p>
<h2 id="general-comments" data-line="227" class="code-line"><a class="header-anchor-link" href="#general-comments" aria-hidden="true"></a> General comments</h2>
<p data-line="229" class="code-line">This was a short comparison of Svelte, React, and Vue.js. What do you think?</p>
<p data-line="231" class="code-line">Each one has its own merits, Svelte's focusing on "<strong>Write less code</strong>." You will notice that it is remarkably accessible.</p>
<p data-line="233" class="code-line">Have a good Svelte life.</p>
<p data-line="235" class="code-line">And if you are new to it, please write with Svelte, it is a very fun framework.</p>