Swym JSX Compiler

Please put in your JSX component here and hit Submit:

How to write JSX components

It's a lot like writing a simple HTML block inside a JavaScript function, with certain differences.

Most commonly encountered changes are the following -

  • "class" attribute of any tag become "className"
  • You can add click listeners with onClick, on change listener with onChange like so - onClick={function(e){console.log("Hello World!")}}
  • Data can be injected into the template with single curly brackets like so - {props.product.title}
  • We can use conditionals inside the function since after all, it is a JavaScript function - {props.product ? "Product" : "No product"}