How to use inferno.js without Babel 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.
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
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
);
}
}
Johan van de Merwe
More from same category
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|