Spark-JSX

Spark-JSX is a tinny library for using JSX syntax on VanillaJS

Install

$ npm install spark-jsx --save-dev

Dependencies

install Babel loaders for JSX:

$ npm install @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx --save-dev

Add JSX plugins on your .babelrc and include Spark.createElement method as a JSX parser

{
    ...

    "plugins": [
        "@babel/plugin-syntax-jsx",
        ["@babel/plugin-transform-react-jsx", { 
            "pragma": "Spark.createElement",
        }]
    ],

    ...
}

Basic usage on client side

Use Spark.renderDOM method for rendering your JSX component into your DOM tree

<div id="app"></div>

import Spark from 'spark-jsx';
import Header from '../header';

function App() {
    return (
        <div>
            <h1>Hello JSX world</h1>
            <Header lastItem="Item Prop" />
        </div>
    );
}

Spark.renderDOM(<App />, '#app');

Fragment

Fragment creates an imaginary node with all the properties and methods of the Node object. Use Spark.Fragment component to wrap any JSX Element adding no DOM element.

function App() {
    return (
        <Spark.Fragment>
            <div>
                <h1>Hello JSX world</h1>
            </div>
            <div>
                <p>Bottom line</p>
            </div>
        </Spark.Fragment>
    );
}