mikaelbr

function createElement(tag, props, ...children) {
  const el = attrs(document.createElement(tag), props);
  // ... rest of the implementation here
  return el;
}

mikaelbr

const isEvent = (k, v) => k.startsWith("on") && typeof v === "function";
const eventName = k => k.substr(2).toLowerCase();
const isString = s => typeof s === "string";

function attrs(el, props) {
  // Remember, JSX sets props to `null` if nothing is defined, so in that case, we just return unchanged el
  if (!props) {
    return el;
  }
  

mikaelbr

const isString = s => typeof s === "string";

function createElement(tag, props, ...children) {
  const el = document.createElement(tag);
  
  // Iterate thorugh all rest arguments as children.
  children.forEach(child => {
    // If string, we make it a text node.
    const node = !isString(child) ? child : document.createTextNode(child);
    // Add the child to the newly created elements.

mikaelbr

function createElement(tag, props, ...children) {
  // Create a new html node element.
  const el = document.createElement(tag);
  // just take the first child for now
  el.textContent = children[0];
  return el;
}
const h1 = <h1>Hello, World</h1>;
//> <h1>Hello, World</h1>

mikaelbr

function createElement(tag, props, ...children) {
  // Return something
}

mikaelbr

const list = createElement(
  "ul",
  null,
  createElement("li", null, "Peter"),
  createElement("li", null, "Paul"),
  createElement("li", null, "Mary")
);

mikaelbr

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

mikaelbr

function createElement(tag, props, ...children) {
  // Return something
}

mikaelbr

const list = (
  <ul>
    <li>Peter</li>
    <li>Paul</li>
    <li>Mary</li>
  </ul>
);
// Outputs
const list = React.createElement(
  "ul",

mikaelbr

const h1 = <h1 id="myId">Hello, World</h1>;
// Outputs
const h1 = React.createElement(
  "h1",
  {
    id: "myId"
  },
  "Hello, World"
);