Posted

2 minutes read

JSX is JavaScript with XML, still just JavaScript but with some extra functionality. The code written with JSX is looks very similar to HTML or XML, but the power comes from easily mixing JavaScript methods and properties with your HTML look-alike code.

Note

React can work fine without JSX, however writing React components with JSX, makes it easier and cleaner, it’s an ideal technology to use with your React application.

For example, Vue.js – The Progressive JavaScript Framework, actually supports JSX out of the box.

Introduction to JSX

JSX syntax can be converted using Babel, and rendered to JavaScript code so that your React application can understand, more details here.

Basically, you are not describing the UI using Strings, instead you take advantage of the JavaScript power, which allows you to do a lot of nice things, and without so much boilerplate code.

Browsers cannot execute JavaScript files containing JSX code, files need to be transformed to regular JS, though a process called transpiling.

JSX advantages

  • faster then normal JavaScript code, code optimizations happen while translating the code from JSX to normal JavaScript
  • easier to create UI templates
  • easier to understand how the UI will look and behave, since the markup and logic are in the same file, in components.

How to use JSX?

Let’s a have a look how we can show Hello World! using JSX.


const element = <h1>Hello World!</h1>;

Attributes using JSX

In order to switch from JSX code to JavaScript, you need to wrap the code into curly braces, so you can easily update an attribute written in JSX with the value of a predefined variable, something like this:

 const idAttribute = 'firstheading' const element = <h1 id="{idAttribute}">Hello World!</h1> 

Attributes written with JSX are written with camelCase convention. Also, good to know that the class and for attributes need to be written as className and htmlFor.

By using Babel, you can write this kind of code, and rely on the transpiling to do the heavy work, for example:

JSX code


const profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

JS code transpiled using Babel


var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

React Elements are JavaScript Objects, with details needed to describe a single node in the DOM.

Properties of a React Element that are worth caring about:

  • type specifies what type of HTML element to use;
  • props specify the attributes on the element
  • children lets you specify the element’s content

React.createElement() function requires a type and props as the first two arguments, with all other arguments treated as the element’s children.





Thanks for reading. I hope you learned something interesting about React!
If you found this article useful, please share it with others. Don’t forget to subscribe to get notified for the upcoming articles.