Creating our first component

In Display the template in the DOM, we have displayed Hello Marvin Frachet in the browser using template literals.

It's great but as any descent framework, we need to have components for code reusability. We don't want to rely on simple HTML elements.

In our context we will create component that will be functions.

TIP

In React, it's really common to use function as component and even recommended when possible, so we're not that far right ? 😉

Let's create a file at ./src/user.js and add the following code:

import { div } from "../framework/element";

export const User = ({ firstName, lastName }) =>
  div`Hello ${firstName} ${lastName}`;

And so modify ./index.js to spawn a User instead of a p:

import { init } from "./framework";
import { User } from "./src/user";

const firstName = "Marvin";
const lastName = "Frachet";

init("#app", User({ firstName, lastName }));

Awesomeness is coming... 😄

# Creating our first component

Creating our first component