/ javascript

Plain JS or JSX for ReactJS?

When I started with React.js I just used the sample code and tutorials provided by Facebook. These use JSX. If you don't know JSX, it's a form of JavaScript that allows you to use inline HTML without jumping trough hoops and without putting everything into strings. This is a very short description but gets to the point.

If you write React.js components you have the choice to use JSX or plain JS, as JSX compiles to plain JS anyway.

After I realised that, I chose to just skip the JSX thing, skip setting up a precompile/transpose step and write everything in plain JavaScript. This choice has consequences:

  • It leads to more verbose files.
  • While writing the code you already see the final React classes.
  • You cannot just copy and paste some HTML into your component and be done (Although even with JSX you’d also have to adjust some things like changing class to className, as class is a reserved identifier in JavaScript).
  • With big components it gets harder to get an overview of the HTML structure. JSX balances opening and closing tags, like XML or HTML. This makes it easier to quickly grasp tree structures. JavaScript doesn’t offer this.
  • Inline JS logic is easier to write, as it’s JS all the time, not markup + JS
  • You can ignore any compile step and use your JS file just as you’re used to

Recently I switched back to using JSX. I started writing bigger components as React classes. The XML like tree structure was very welcome. Also I could grab existing HTML and transform it into a React class more quickly.
If you already use ES6 (the latest version of JavaScript) you have to compile anyway. So you might as well use JSX.

Read more about JSX on Github

What are your experiences with ReactJS? Do you use JS or JSX?

Holger