How to use inferno.js without Babel from CDN

How to use inferno.js without Babel from CDN

Inferno.js is a very lightweight React-like library for building high-performance user interfaces. This article shows you a legid trick how to do it from CDN.

As a developer I am always looking for interesting developments regarding frameworks. On my search for something light to manipulate the DOM in a React kind of way, but without all the "bloat" from Babel and NPM and such I found Inferno, a very lightweight ReactJS alternative.

Logo Inferno.js

About Inferno.js
Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server.

From CDN without Babel

I was looking for a solution to create DOM elements with JavaScript. I am not talking about a single page app, but just to add elements in a plugin I am building for Opencart CMS. That is, integration in a backend that is not mine, but for me to use.

I write this article very soon after I have discovered Inferno, but I want to share it, because I had some trouble finding a good example with just the CDN.

I hope this small example gets you started doing your own development without Babel.

Structure

  • [root]
  • index.html
  • inferno.js
  • src
  • BasicComponent.js

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Inferno CDN Example</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/inferno@7.3.2/dist/inferno.min.js"></script>
    <script src="https://unpkg.com/inferno-create-element@7.3.2/dist/inferno-create-element.min.js"></script>
    <script type="module">
      import { render, createElement } from "./inferno.js";
      import { BasicComponent } from "./src/BasicComponent.js";

      render(
        createElement(BasicComponent, {
          title: "Inferno looks very promising"
        }),
        document.getElementById("app")
      );
    </script>
  </body>
</html>

inferno.js

Please notice the additional inferno.js.

While you use a CDN and not Babel, so you don't import Inferno, but it is a bit ugly to have the following in your code:

 let render = Inferno.render;
 let component = Inferno.Component;
 let createElement = Inferno.createElement;

that is why I have this small inferno.js, that simply makes the usability a bit more React'ish.

export const { render, createElement, Component } = Inferno;

BasicComponent.js

import { createElement, Component } from "../inferno.js";

export class BasicComponent extends Component {
  render() {
    const children = createElement(
      "h1",
      {
        className: this.props.name
      },
      "First conclusion: ",
      this.props.title
    );

    return createElement(
      "div",
      {
        className: "basic"
      },
      children
    );
  }
}

More from same category