What is JSX and why should you learn it? Let’s talk about it.

JSX looks like a regular HTML in most cases. JSX is an HTML-like syntax used by React that extends ECMAScript so that HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

By using JSX you can write HTML-like structures in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.

By using JSX one can write the following JSX code:

var list = (
    <ul id="list">
      <li>Apple</li>
      <li>Orange</li>
      <li>Banana</li>
      <li>Mango</li>
      <li>Jackfruit</li>
    </ul>
);

#react #javascript #web-development #programming #developer