Developing React apps with vs without JSX
React is a lightweight library that allows us to build very fast applications. Development process is straightforward, but there are multiple ways to go about it. You can use React’s top-level API, like the createElement() method, or make use of React’s templating language JSX. The second option leads to simpler development process. JSX also makes it easy to compose complex component trees.
Now let’s get to the point and discuss advantages and disadvantages of each approach.
Building apps with JSX
Most importantly, JSX supports ternary operators. These are powerful little tools to implement dynamic features in React. If you want to dynamically render a component or an element, you can simply embed a ternary operator that checks a condition and returns a component if it is true. You can even specify what to render if the condition is false. Or simply render null – nothing.
Also, React has a rule that a component can not return multiple elements. You can work around this by wrapping all of the elements in a single <div> container.
React without JSX
You can technically build React components without using JSX. In some cases, it is even advised to build apps this way. For example, when you want to skip setting up compilation in your environment.
There is only one method to create elements in React - React.createElement(). Invoking elements and components in JSX is easy, but it’s ultimately translated to top-level API, mainly the createElement method. You can bypass the compilation and write components using React.createElement(). If your component has many elements, you may need to make multiple nested calls to this method to create a component. For this reason, top-level API is not really suitable for building complex apps in React. Most developers use JSX and we highly recommend you do too.
If you don’t want to, you can create a shorthand for React.createElement method. For example, store the method in a variable, and call that variable. The method takes three arguments – the type of the element you want to create (‘div’, for example), its props, and its contents.
In summary, JSX is just a syntax sugar that replaces calls to createElement() method. Once React apps reach a certain scale, they are much easier to maintain using JSX. Especially when you need to set value on input change in React.
To use these methods, you only need to install React and import it in the file. Top-level API also gives you interface for building class components with React. These types of components need to be instances of React.Component prototype.
Building apps with vs without JSX
There are advantages to both. JSX provides simplicity and familiar development experience. Structuring your app with JSX is practically the same as doing so with HTML. Still, it doesn’t change the fact that JSX is an additional layer of abstraction that needs to be compiled into React top-level API. JSX also has some peculiarities, like having to use className instead of class.
Developing React apps without JSX means bypassing the step of compilation. So if you’re setting up your own environment, that could be advantageous. But the code gets complicated really fast. If you’re building complex structures, multiple nested createElement() methods may be difficult to follow.