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?
Things To Consider
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.