JSX to JavaScript Converter

Convert JSX syntax into vanilla JavaScript React.createElement calls. Perfect for learning React internals and debugging.

JSX Input

JavaScript Output

function Welcome({ name, age }) {
  return (
    React.createElement("div", { className: "container" }, "React.createElement("h1", null, "Hello,", name, "!")
      React.createElement("p", null, "You are", age, "years old.")
      React.createElement("button", { onClick: true }, "alert('Clicked!'), ">
        Click me")")
  );
}

💡 Tip: JSX is syntactic sugar for React.createElement() calls. This converter shows what JSX compiles to under the hood.

Understanding the Conversion:

<div className='container'>Hello</div>→React.createElement("div", { className: "container" }, "Hello")

<button onClick={handleClick}>Click</button>→React.createElement("button", { onClick: handleClick }, "Click")