JSX Parser

#1 Goal for this course

By the end of this section, I want you to know that webpack is not magic (although it may seem that way sometimes).

Build a JSX parser

js
export function Component() {
  let myRef = null
  let name = "Fernando"
  let myClass = "open"
  return (
    <div className={myClass} ref={myRef}>
      <h1>Hello {name}!</h1>
    </div>
  )
}
console.log(Component())

Should become:

js
export function Component() {
  let myRef = null
  let name = "Fernando"
  let myClass = "open"
  return React.createElement(
    "div",
    { className: myClass, ref: myRef },
    React.createElement("h1", {}, "Hello " + name + "!")
  )
}
console.log(Component())

🚀 Let’s get going: