mikaelbr

const h1 = React.createElement("h1", null, "Hello, World");

mikaelbr

const h1 = <h1>Hello, World</h1>;

mikaelbr

{
  "name": "jsx-demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    // Using the babel CLI specify our single file (could be pattern)
    // and output in dist directory
    "build": "babel index.js -d dist"
  },
  "devDependencies": {

mikaelbr

function createUiFramework() {
  const isEvent = k => k.startsWith("on");
  const eventName = k => k.substr(2).toLowerCase();
  const isString = s => typeof s === "string";
  
  function attrs(el, props) {
    for (let [k, val] of Object.entries(props)) {
      if (isEvent(k)) {
        el.addEventListener(eventName(k), val);
      } else if (k === "class") {

mikaelbr

const { button } = createUiFramework();
let initialState = { counter: 0 };

// Our application taking a state.
function app(state) {
  // When we click on the button, rerender with new state where the counter is incremented
  const onClick = () => render(app, { ...state, counter: state.counter + 1 });
  return button({ type: "button", onClick }, `Increment ${state.counter}!`);
}

mikaelbr

const { main, header, h1, h2 } = createUiFramework();

// Create my component with a similar signature
let myHeader = (props, children) =>
  header(props, [children, h2("... a greeting blog")]);

// Use custom component
document.body.appendChild(
  main({}, 
    myHeader({ class: "header" }, h1("Hello, world!")))

mikaelbr

const { button } = createUiFramework();
document.body.appendChild(
  button(
    {
      type: "button",
      onClick() {
        console.log("Hello");
      }
    },
    "Click me!"

mikaelbr

// Check if key starts with `on`. If so, it is an event.
const isEvent = (k, v) => k.startsWith("on") && typeof v === "function";

// Removes `on` prefix to use it as event name
const eventName = k => k.substr(2).toLowerCase();

function attrs(el, props) {
  for (let [k, val] of Object.entries(props)) {
    // Extend attribute check with special case for events
    if (isEvent(k)) {

mikaelbr

const { button } = createUiFramework();
document.body.appendChild(
  button(
    {
      type: "button",
      onClick() {
        console.log("Hello");
      }
    },
    "Click me!"

mikaelbr

console.log(
  h1({ class: ["myHeader", "blue"] }, "Hello, World!")
);
//> <h1 class="myHeader blue">Hello, World!</h1>