vimwiki

Jsx syntax

Jsx is a javascript extension that allows to write html in javascript.

Note: it is independent from react

Rules

Their is a few rules to follow when writing html in jsx that differ from normal html.

You can use a html to jsx converter to convert.

1. It must return a single root element

If you want to return multiple tag, wrap everything in a div or with a fragment: <> </>. A fragment won’t leave trace in the final html.

  function Component() {
    return (
      <>
        <h1>text</h1>
        <p>hello there</p>
      </>
    );
  }

1. Close all tags

All tag must be closed, even self closing one. become .

1. camelCase most thing

Attribute written in kebab-case must be converted in camelCase. The attribute stroke-width become strokeWidth.

The keyword class become className.

Use javascript in jsx

Use curly braces {} to inject javascript variable, function… inside html.

Variable

function Component() {
  const name = "Bob";
  return (
    <h1>Hello {name}</h1>   // pass the name
  )
}

Function

function formatDate(date) {
  // format date code here
}
function Component() {
  return (
    <h1>We are the {formatDate(today)}</h1>   // pass the name
  )
}