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
If you’ve ever looked at a React component code, you have probably noticed HTML-like portion that defines structure of the component. In many ways, JSX looks like HTML. Most HTML elements also exist in JSX, and function almost the exact way you would expect. But it’s important to remember that React components are written entirely in JavaScript. JSX is only a syntax sugar that looks like HTML. It relies on familiarity with HTML code to simplify the development process.
JSX also gives you the ability to embed dynamic code in structure of your app. This isn’t exclusive to JSX, and you can do the same without it. But React makes it readable and easy to follow. You only need to wrap dynamic expressions with curly braces and React will interpret it as a JavaScript expression. One limitation is that you can not embed statements that take multiple lines. Specifically, you can not use for loops, if/else, switch, and similar complex statements inside JSX. You can, however, use alternative methods like map() or forEach() to accomplish the same.
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.
Similarly, you can use a ternary operator to conditionally apply styles in React. JSX supports inline styles similar to HTML, except inline styles have to be formatted as a JavaScript object. CSS properties and values need to correspond with JavaScript object and values. Dashes in property names are eliminated and names are camelCased. Similarly, values must be either a string, integer, or a Boolean. String interpolation can be very useful for styling apps with React. This guide will walk you through how to do string interpolation to style elements in React.
You can set conditional styles by using ternary operators to dynamically return values for each property. In case the condition is false, you can add another ternary operator that specifies output styles for another condition. Similar to else if statement in JavaScript.
Perhaps the biggest advantage of JSX is readability. Because code looks so much like HTML, you can easily write your own components and also understand others’ code. In terms of syntax, there are minor differences between JSX and HTML. Namely, names of attributes change. Class attribute in HTML becomes className in JSX. This is necessary because class is a reserved word in JavaScript. Similarly, the ‘for’ attribute of labels becomes ‘htmlFor’ in JSX. Once again, this is necessary to make sure that when compiled into JavaScript, there’s no mixup between the ‘for’ attribute and for loop.
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.