What is the difference between JavaScript and JSX?

Question

I am pretty new to React, I find most tutorial talked about JSX, I have not learnt any JSX syntax, but I am wondering if the main usage difference between JavaScript and JSX in React is only on the HTML-like syntax? Or what else should pay attention to?

Answer 1

JS is standard javascript, JSX is an HTML-like syntax that you can use with React to (theoretically) make it easier and more intuitive to create React components. As the docs say, the only purpose is to make it easier to create React components... there's not much else there. Without JSX, creating large, nested HTML documents using JS syntax would be a large pain in the rear; JSX simply makes that process easier.

Answer 2

By default, every JSX syntax turns into JS function calls, i.e change to Javascript.

JSX helps to write much easier and cleaner code.

Example:

JSX Code:

const App = () => {
    return <div>Hello world!</div>
}

Equivalent JS Code:

const App = () => {
  return React.createElement("div", null, "Hello world!");
};

you can check out Babel is a JavaScript compiler., select react in the presets option to see actually how it turns out each line.

Answer 3

With a JSX compiler, you can transform JSX expressions to calls to React.createElement. This is a more convenient way to achieve what has previously been accomplished with inlined HTML files as SCRIPT tags and, indeed, there are other JSX compilers that are not bound to React.

To give you a clear example, try looking at the following JSX code as it's compiled to JS via Babel:

import React from 'react';

var Foo = React.createClass({
  render() {
    return (
      <div>
        <p>
          Ad postea vocent equidem.
        </p>
      </div>
    );
  }
});

Answer 4

JavaScript is just like any normal programming language without any additional library or framework. It can also be referred to as pure/vanilla JavaScript.

On the other hand, JSX is the syntactic sugar in JavaScript, a syntactic sugar is a syntax within a programming language that is designed to make things easier to read or to express. JSX is mostly used in JavaScript along with library/framework support like in ReactJS or ReactNative.

JSX Exapmle

Component written using JSX:

const MyComponent = () => { 
  return <div> 
    <p>This is not HTML...!</p> 
    <p>Wait...Is this JavaScript?</p> 
    <p>No, What the hell is this?</p> 
    <p>This is JSX.</p> 
  </div> 
} 

In case we don’t want to use JXS then the corresponding code for the above code snippet will look like.

const MyComponent = () => { 
  return React.createElement("div", null, React.createElement("p", null, "This is not HTML...!"), React.createElement("p", null, "Wait...Is this JavaScript?"), React.createElement("p", null, "No, What the hell is this?"), React.createElement("p", null, "This is JSX.")); 
}; 

Reads:

Syntactic sugar - Wikipedia

Introducing JSX – React

Answer 5

JSX is an XML-like syntax extension to ECMAScript and not necessarily tied to React at all. React is just the transpiler, the engine that turns a tree of JSX into valid JavaScript. There are other transpilers like React that has JSX syntax as well, JSXDom and MercuryJSX. JSX does not conform to any XML or HTML specification or is apart of ECMAScript in anyway and was invented at Facebook.

The reasoning behind JSX was that Facebook wanted to have one type of syntax extension that developers could rally behind by have a clear and concise specification and hopefully minimise of yet another "language".

Answer 6

Here you will see the basic difference of js and jsx

JavaScript example

let element = React.createElement('h1', {}, 'This is JavaScript')
ReactDOM.render(element, document.getElementById('root'));

JSX equivalent

let element = <h1>This is JSX</h1>
ReactDOM.render(element, document.getElementById('root'))