How JSX Works and Building a Simple JSX Parser from Scratch

JSX (JavaScript XML) is an extension that allows developers to write HTML‑like syntax inside JavaScript; during compilation each JSX element is transformed into a React.createElement call, making component composition more readable.

The article demonstrates why a JSX expression can only have one parent element, showing error‑prone examples where multiple top‑level elements are returned and explaining the underlying JavaScript limitation.

It then outlines a practical approach to building a simple JSX parser: capture JSX with a regular expression, parse the extracted markup into a tree using node-html-parser , translate the tree into JavaScript createElement calls, and write the transformed code back to a file.

Key functions are provided in full, including:

function parseJSXFile(fname) {
    let content = await fs.promises.readFile(fname);
    let str = content.toString();
    let matches = JSX_STRING.exec(str);
    if (matches) {
        const HTML = matches[1] + ">";
        const root = parse(HTML);
        let translated = translate(root.firstChild);
        str = str.replace(matches[1] + ">", translated);
        await fs.promises.writeFile("output.js", str);
    }
}

function translate(root) {
    if (Array.isArray(root) && root.length === 0) return;
    let children = [];
    if (root.childNodes.length > 0) {
        children = root.childNodes.map(child => translate(child)).filter(c => c != null);
    }
    if (root.nodeType == 3) {
        if (root._rawText.trim() === "") return null;
        return parseText(root._rawText);
    }
    const tagName = root.rawTagName;
    const opts = getAttrs(root.rawAttrs);
    return `MyLib.createElement("${tagName}", ${replaceInterpolations(JSON.stringify(opts, replacer), true)}, ${children})`;
}

function getAttrs(attrsStr) {
    if (attrsStr.trim().length == 0) return {};
    let objAttrs = {};
    let parts = attrsStr.split(" ");
    parts.forEach(p => {
        const [name, value] = p.split("=");
        objAttrs[name] = value;
    });
    return objAttrs;
}

function createElement(tag, opts, ...children) {
    return `<${tag} ${Object.keys(opts).map(oname => `${mapAttrName(oname)}="${opts[oname]}"`).join(" ")}>${children.join("")}
`;
}

The complete parser code combines these utilities, reads a .jsx file, extracts the JSX, converts it to plain JavaScript using the custom createElement implementation, and outputs the result, illustrating a functional end‑to‑end JSX compilation pipeline.