Relationship between JSX/REACT

What is the relationship between jsx and react.

Answer in the linked article.

Basically, JSX is a way to write JS objects in way that looks like HTML*. It is easier to write a thing that looks like the thing you are trying to define rather than writing wierd JS that you have to mentally translate into the thing you want it to be.

All you’re doing is writing out an object, but the JSX parser converts the HTML-like syntax to what it needs without you having to think about that side of it.

I’m emphasising that it’s a way of writing objects because that’s fairly critical: it isn’t a templating engine that builds HTML (like Pug or EJS or Handlebars), it does the opposite: it lets you write something that looks like HTML and builds objects.

You can write React without it, it isn’t necessary, just easier in most ways. What it does is extremely specialised, so it isn’t really used much anywhere else, but it can be used with some other frameworks.

* this is why you can’t put statements (like if...else) in JSX, eg this doesn’t make sense, it’s completely invalid JS:

{
  foo: 1,
  bar: 2,
  if (condition) {
    baz: 3
  } else {
    baz: 4
  }
}
2 Likes