In this tutorial, you will learn several tips and tricks that will help you write cleaner ReactJS code. The aim of these refactorings is to make your life easier while debugging. Unless you are a complete ReactJS newbie, you will know that rendering HTML in ReactJS applications is done using JSX. JSX looks similar to HTML and the end result is HTML. While JSX looks like HTML it is not. There are some fundamental differences. If you are not aware of these differences then you will likely waste many hours in frustration wondering why your application is behaving in a way that you did not intend it to! If you want to make your life a little easier when using React, then read on.

What is JSX?

React is a view library written in Javascript. One of the things that I like about React is that it changes the traditional concept of separation of concerns. In React you write components. Your components contain everything it needs to render itself. The logic, the CSS and the presentational bits and bobs. This is made possible as JSX allows us to write HTML in Javascript. A lot of folks who have used Javascript for years hate this new type of architecture. They think JS should be written in Javascript files that enhance the HTML. People who use VueJS tend to hold this opinion. It doesn't matter who is right or wrong, React is the worlds most popular framework at the time of writing, so there must be something to this way of thinking!

In React you do not write HTML directly you write JSX. After writing your React components using JSX you will need to transpile your React code into code that the browser can understand, e.g. vanilla Javascript. Transpiling - transform then compile - is usually done with a plug-in called Babel. Babel will read your React code and then create vanilla Javascript that any browser can understand.

This concept is key to understanding React. When your React JSX gets transpiled, it is not converted into HTML. It is converted into Javascript functions. These functions when executed will create the HTML. React is sugar syntax around Javascript functions. JSX is not HTML!

This concept is really important to understand, but it explains some of the idiosyncrasies you might find when learning React. For example, in Javascript class is a reserved keyword, - used for creating classes. In HTML, the keyword class is used on elements to associate a CSS selector with it. When you write a component in JSX, as it gets transpiled into a Javascript function, you cannot create an attribute on your component called class as this would confuse the process. In React, to set a CSS selector onto a component you would use the className attribute instead. When you encounter these differences in React then there are usually good solid technical reasons why they have changed things. The React team haven't change the class modifier just for shits and giggles. Understanding this point is essential in order to understand some of the reasons why React has been built the way it has.Let us say you wrote this JSX in a component:

This JSX would get transpiled into this Javascript behind the scenes:

When a client requests a React application, all the files are sent to the browser. On load, the React handler is launched and will call the code to render the page. This will fire off the Javascript, which in turn will add the HTML into the DOM for the end-user to see. While using JSX has a few nuances, it more than makes up for them by allowing you to do things that you simply could not achieve using HTML alone.

Things To Consider When Using JSX

Attributes : As JSX is transpiled into Javascript, you cannot use Javascript reserved keywords in your components, e.g. instead of using class you will need to use className. Instead of using for you use htmlFor instead.

CSS : To add inline CSS to your component, you need to use Javascript objects. The React style attribute does not accept a CSS string.

Single Root Node : In Javascript, you can only return one parameter within a function. As JSX is tanspiled into Javascript functions in order for it to render, this means YOU HAVE TO return your components with one parent container. You could not do this for example:

In the snippet above, when the code gets stranspileds, two functions would get created which create form invalid JavaScript. To get around this limitation of the Javascript language, your components will always need to have one parent element. To get around this limitation, you can use React.Fragments <>, or, you can wrap your HTML with a unused div:

Spacing : As your JSX gets transpiled, the spacing in your component may not work the same way as it would in normal HTML:

In HTML putting a space between elements will add a space to it. In React this would be ignored. Instead, you could add a space, this way:

Booleans : In JSX booleans can trip you up at the time. In the code below, what do you think will happen?

As we use Javascript a null will be converted to a truthy/falsey value rather than null. In this example, JSX assumes you mean display anyway.

As we have covered, due to JSX being converted into HTML, there are a few subtle differences you need to be aware. JSX gives you a number of benefits and for such a small trade-off, it's pretty easy.