// Import relevant libraries
import { register, render } from 'xsl-awesome';
import React from 'react';
import ReactDOM from 'react-dom';
 
// Register render functions for specific elements
register('self::section', renderer => (
    <div key={ renderer.key() }>
        <h1>My first section</h1>
        { renderer.traverse() }
    </div>
));
register('self::paragraph', renderer => (
    <p key={ renderer.key() }>
        { renderer.traverse() }
    </p>
));
register('self::paragraph[@special]', renderer => (
    <p key={ renderer.key() }>
        ***{ renderer.traverse() }***
    </p>
));
 
// Load an XML string from anywhere
const xmlString = `
    <section>
        <paragraph>My first paragraph</paragraph>
        <paragraph>My second paragraph</paragraph>
        <paragraph special="true">My special paragraph</paragraph>
    </section>
`;
 
// Render that baby
ReactDOM.render(
    <div>{ render(xmlString) }</div>,
    document.getElementById('root'));