In this tutorial, you will learn tips and tricks that will help you write cleaner React code and make your life easier to debug.  You style your React component using JSX. JSX looks similar to HTML.  The end result is HTML.  There are some fundamental differences, that if you are not aware of, will cause you many hours of frustration.  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 all the logic and presentational bits and bobs it needs to display nicely on your website.  A lot of folk I know who have used Javascript for years hate this change, however, when you get used to it, in the projects I've worked on, you always end up with a good reusable component library and easy to understand code, so it has its merits.  One way it goes about this is it allow you to write your HTML and your JS within the same file, in Javascript.  In React you do not write HTML directly you write JSX. 

On a big project, 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 on an element is styled to add a CSS style.

When you write, you write a component in JSX. as it gets transpiled into a Javascript function. you cannot create an attribute on your component called 'class'.  In React, to specify a component should be set with a specific CSS class, you would use the 'className' property instead.  The React team haven't done this 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.  For a basic example, let's say you wrote this JSX in a component:

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

When React is loaded on the page, it will then fire off the Javascript, which in turn will add the HTML into the DOM for the end user to see.  Writing HTML in Javascript allows you to do some cool things in new ways that you simply can't achieve in HTML alone.  JSX has some limitations, but it also allows us to do some really powerful things that you could never do in normal HTML.

Things To Consider

Attributes : As JSX is transpiled into Javascript, you cannot use Javascript reserved keywords in your components. 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:

When your code got transpiled, two functions would get created which would form invalid JS. To get around this limitation of the Javascript language, your components will always need to have one parent element only, so:

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

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

Booleans : In JSX booleans are swapped. If you set a bool without a value, e.g. it's false. JSX assumes you mean display anyway. In the code below, the button will be active.

As JSX is 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.