Reacting in Svelte — Understanding components in svelte the react way

This story is the first chapter of the series “Reacting in Svelte”

React is, rather “was” my way of developing UI until a few weeks ago. This story is about key points I learned by shifting my portfolio website from react to svelte.

Svelte is a relatively new player in the field. It throws virtual DOM, the main component of React, into the pit and brings JavaScript back to its former glory. It is faster and smaller compared to react. Although, it comes with certain pros, svelte has its share of cons too. One of those would be relatively non-existent community support compared to that of react. Svelte is not a mature framework, hence precautions should be taken before pushing the production button.

Components

Initializing Components

Both react and svelte revolve around a single term “Component”. A Component is nothing but a block of code that can be seen in the UI. For example, a html button is a component. Both frameworks have inbuilt HTML components and have the flexibility to support creation of custom components. Props are arguments that can be passed to a component. The following shows a contrast between the syntaxes of react and svelte:

A React Component can be defined as a simple javascript function that returns “jsx” elements

// React Component
function Welcome() {
  //logic goes here
  return <h1>Hello, World</h1>;
}

A Svelte Component is defined as follows. All the javascript required by html component goes into the <script> tag followed by component html that would be styled just like regular html code.

// Svelte Component
<script>
  // logic goes here
</script>

<!-- component html goes here -->

<style>
   /* styles go here */
</style>

Exporting and Importing Components

A react component is exported using the following syntax:

//Welcome.js
export default Welcome;

It is imported and accessed in other react components using the following syntax:

//App.js
import Welcome from '/path/to/Welcome'
function App(){
  return (
    <div>
      <Welcome/>
    </div>
  );
}

This is the way regular javascript imports and exports work.

A svelte component is not exported explicitly. The name of a svelte component is same as the name of the file it is defined in. It can be imported and accessed in other svelte components as follows:

//index.svelte
<script>
  import Welcome from '/path/to/Welcome.svelte';
</script>
<div>
  <Welcome />
</div>

Props

Accessing Props in a Component

In react, to pass the props to a component, you would pass the props object as an argument to the function. Individual props can be accessed from the props object using the ‘.attribute’ syntax.

// React Component
function Welcome(props) {
  //logic goes here
  return <h1>Hello, {props.name}</h1>;
}

In svelte the tables turn. The way you would access props passed to a component is via variables created in <script> element using the “export” keyword. Individual props can be accessed in the corresponding html markup of the component by using the “{prop_name}” syntax.

// Svelte Component
<script>
  export let prop1 = "default initial value";
  console.log(prop1);
  // Read-Only props
  export const readOnlyProp = "default initial value"
</script>

<p> {prop1} </p>

Passing Props to a component

In both react and svelte props are passed to the component in a similar way. The attribute is passed to the component using the following syntax. In the case of svelte, care should be taken as to the attribute naming must be similar to that defined using “export let” keyword in the child svelte component.

<Welcome name={"Krish"} />