How to make React like components in HTML with 7 lines of JavaScript

If we all know what one thing React is most famous for - that would be making Components right ? (I mean one among the multitude of amazing features). You make a component and you can use it anywhere you want throughout your codebase. getting butterflies in my stomach right now

Making a component in React is as easy as this:

function Welcome() {
  return <h1>Hello there !!</h1>;
}

Then we render this JavaScript function Welcome() - also a component into the HTML DOM which will display as "Hello there !!". As simple as that.

const element = <Welcome/>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Now for a long time, I really thought only React could do this, UNTIL I found out that I could make components like these in HTML too. Only thing is we won't be having all the capabilities that React has - duh ! At first I thought it would be something that was done in the older HTML 1.0 or something where people used to manipulate HTML to get results but NO, this thing is legit.

So how does it really work ?

Imagine you have 3 HTML pages. In these 3 pages you have a header and a footer. What you normally do is you create a sample template consisting of the header and footer in 1st page then when you are creating the 2nd page you just copy paste the entire HTML page and make some changes to the body. I don't know about you but that's how I usually did.

So for starters, let's create a header.
We can solve this by creating a component for the header and then including it in every other page just by using HTML and a few lines of JavaScript - yeah you heard me right. Without further ado :

Step 1: You create an HTML tag in your index.html page. e.g


<body>
    <header></header>
    Some sample body content
</body>

Step 2: Create a new "header.html" page. and insert some sample content e.g

<h1>Super important Header content</h2>

Step 3: Using the fetch API you grab the HTML file (which is a resource here), then you take the response which is the "header.html" file, then you convert it into a text form.

Now the .text() method is a string containing all the combined text of all the elements inside "header.html".

fetch("./header.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("header").innerHTML = data;
 });

And that's it ! Now if you look at your HTML page you can see the text being displayed. Now let me tell you some tricks.

Creating your own custom named components in HTML

How we name components in React is usually like this e.g "Nav.js" or "Login.js". Do notice that the first letter is always in CAPS. We can do the same for our HTML pages too. How ?

Create a folder named "components" in the root of the folder and create a new HTML page with names starting with CAPS like we mentioned above. So for e.g if we need to create a new component called "MobileNav". So we do:

step 1: Adding the tag
<MobileNav><MobileNav/>

step 2: Adding some content inside MobileNav.html

step 3: Adding the required JavaScript. In this case its something like this: 

fetch("./components/MobileNav.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("MobileNav").innerHTML = data;
 });

The advantages of this is that we know which one is a component. But this is just another way to do things, but don't do these for tags like "header", "footer", "nav" etc as it might be bad for SEO purposes.

You could also do it this way by use of the "class" attribute so that we way we can keep all the SEO benefits intact.

1. <nav class="MobileNav"></nav>

2. add some content

3. fetch("./components/MobileNav.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
        //do notice the use of class name ".MobileNav" below
    document.querySelector(".MobileNav").innerHTML = data;
 });

So I hope you learnt something new today. This method will save you loads of your time especially if you are working with more than 10 pages and there is a chance for the content to change all the time.

Here is the codesandbox containing all the code that we did today:
https://codesandbox.io/s/making-components-in-html-eebyx

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Response/text

Some people reading the title of this article be like:

Blog

How to make React like components in HTML with 7 lines of JavaScript

Ridhik Govind

So how does it really work ?

Creating your own custom named components in HTML

Join Our Newsletter. No Spam, Only the good stuff.

Related