Hacking the JSX pragma for fun and profit

React Nexus this year had 30+ talks spread across 2 days of the conference. There were also short and lightning talks of 15 minutes, and 10 minutes respectively which covered some interesting topics in React and case studies. My talk was a lightning talk for 10 minutes, and I was very doubtful about how anyone could share some valuable insights in such a short time span. But as it turns out, sometimes succinct and high-level use cases of certain features are better than deep-dives of a particular concept. And this is how I went about planning my talk for this conference.

About the talk

This talk was more about exploring another part of React which is often hidden from developers as an abstraction by the build tools. JSX pragmas are compiler directives that tell the build tools how they should go about transforming the JSX code you write for the browser to understand. In most projects out there, there’s not really a need for modifying how this transformation is performed. But when you do it, some interesting use cases emerge. And this is what my talk meant to cover in a nutshell.

After my talk, I was surprised when many people said that this was the first time they had seen something like this. I had assumed that this might be known as some of the popular styling libraries like Emotion, and Theme UI also use this setup under the hood. It made it clear to me that library developers and product developers work at different levels of abstraction and have different goals. (This is probably why I also take an interest in working on devtooling products, so feel free to reach out if you have a career opportunity in this for me 🙂).

Here’s what people had to say about my talk 💙

Post-conf thoughts

React Nexus made me appreciate the good work people are doing on the web and native platforms with React. There were various discussions about “Universal apps” which leveraged the same React Native codebase to create native apps for all major platforms like Android, iOS, macOS, Windows, and even the Web!

Some of my favorite talks were:

• “React Server Components” by Tejas Kumar
• “Building a ‘Universal’ CSS-in-JS library” by Saket Sahu
• “Building Immersive Experiences on the Web” by Ishan Sharma.

You can watch all the talks from the conference in this YouTube playlist.

Finally, kudos to Kiran and the entire organizing team behind React Nexus who made this conference a huge success! 💙 🎉