What’s With All the JSX Hate?

David Fudge
2 min readJan 12, 2016

--

When MDG announced that Blaze is dead, there was a big uproar from the Meteor community and a lot of teeth gnashing (as Josh Owens likes to push it) about the future of the platform.

To juxtapose the death of Blaze, React and Angular have become first class citizens in Meteor as of v1.2. I started using React long before it was the “preferred” view layer in Meteor and I thought it was awesome even then. The fact that Meteor is incorporating, and even recommending, React in their stack seems natural to me.

So what’s with all the hate?

Okay, I get it. You’ve built your app with Blaze. You’ve planned or committed to building several more apps in the near future and you looked at React but JSX is ugly. You could even say it’s fugly.

Oh boy, JSX is ugly. It feels dirty when I put my JS code beside my HTML code for this component. It goes against all my experience and “best practices” I’ve learned over the last 20 years. It’s not even real HTML for god’s sake! Even though it feels wrong at first, it also feels kind of nice.

Creating small components with all of the related JS code (onClick handlers, onLoad callbacks, infinite scrolling hooks, event listeners, etc) in one file starts to make sense as you write it. No longer do I need to use my editor in split view to have my JS file and my HTML file open and track all the jQuery hooks to $(“#myDivId”) or $(“.these-classes”). In fact, I don’t need to use jQuery… AT ALL.

Sure there is a learning curve. Yes, it’s ugly and feels wrong at first. And yes, it will change your life! Keep the React docs handy (like anyone coming from PHP would be used to) and remember these mappings:

BLAZE => REACT

onRendered => componentDidMount

onCreated => componentWillMount

onDestroyed => componentWillUnmount

helpers => any js function in your component

events => n/a — attach to HTML elements

--

--