JSX is awesome

Rajesh Naroth
Mar 23 · 2 min read

JSX simply are JavaScript expressions that string up React or HTML elements. The only thing you need to memorize with JSX is:

{}

That’s it. Anything that goes inside the curly brace is evaluated as JavaScript expression.

The JSX Bad parts

  1. You always have to import React even if React object is not used in your code. It only makes sense when you understand what JSX is transpiled to.

Just wondering if these can be solved using automatic code injection and word replacement?

JSX is not a con

Is JSX is bad template form as opposed to other frameworks that use HTML directives? There is a learning curve involved with directives. IMHO, to a JavaScript engineer, JSX is quite natural. Being able to nest expressions along with HTML/React elements is great.

JSX is not HTML compatible unlike a directive. I agree, but does that matter anymore? Are we going back to hand writing browser compatible code ever? Transpilers changed all that and ESNext will be what we will be writing in. Browsers will always be catching up.

The reason I liked Angular.js was the developer experience. I could keep the framework details in my head and focus on the business logic without having to google for answers constantly. Then came Angular. 😫 Ugh!

React was as a smaller library to learn but I have always felt that class based components were just a bit too complicated and messy. Now with hooks, it is a fresh breath of air. No more complicated life cycle management. Setup and tear downs can be done very cleanly using useEffect() hook. Global state can be propagated down to a deeply nested component via useContext(). Local component state can be managed cleanly with Redux style reducers with useReducer(). Better yet, make your reducers and actions available anywhere in your application using useContext(). Bye bye Redux. No more withXXX() HOCs. All the complexity can be abstracted away.

Obviously you have to now learn all about hooks. But the basic hooks are quite straightforward. Again, IMHO.

I love React because your application is literally a function.

const App = () => {
}

Your components are compose-able elements that are also functions. You can even “compose” them together. Check out: https://codesandbox.io/s/l5popxwwqm

Not very useful really because JSX expresses composition better than a compose function. However, the ability to express your UI using functional patterns is great. It produces better code because functional patterns are time tested.

Rajesh Naroth

Written by

Frontend Architect, San Jose, CA