JSX

JavaScript meets XML

The language of React Native, also now usable with [[TypeScipt]].

JSX in depth
Using JSX with TypeScript
JSX Support
Using JSX with TypeScript, nice walkthrough
JSX & TypeScript deep dive

.c.f.

React native
[TypeScript]
[[JavaScipt]]
[XML]

The compilation process

JSX

<h1>
  <Sum a={4} b={3} />
</h1>

JavaScript Equivalient

React.createElement(
  ‘h1’,
  null,
  React.createElement(
    Sum,
    {a:4, b:3},
    null )
 )

Props (Using sperat operator)

const props = {a: 4, b: 2};
const element = <Sum {...props} />;

Events

function Clicker({ handleClick }) {
  return <button onClick={(e)=>{handleClick('A');}}>A</button>
}

const el = <Clicker handleClick={(l) => {console.log(l);}} />;

JSX and HTML

There are some name clashes (Javascript for, class) and CSS styles are passed as props. So,

JSX

<label
    htmlFor="name"
    className="highlight"
    style=
  >
  Foo Bar
</label>

HTML

<label
   for="name"
   class="highlight"
    style="background- color: yellow"
  >
  Foo Bar
</label>