React JS – JSX and Javascript Expressions

JSX:

const node = <h1>Learning React JS</h1>;

Above statement is neither string nor HTML, it’s simply a JSX. JSX is usually called as Javascript Extension or Javascript XML. It’s a syntax which looks like HTML but it’s the extension of Javascript (ES6) and it translates to pure javascript at runtime.

Example:
  JSX code:
   function App() {
  return (
    <h1>This is our first component</h1>    
  );
}

on runtime the above code will translate to following code before rendering to browser:

"use strict";

function App() {
  return React.createElement("h1", null, "This is our first component");
}

And this translation is done by Babel compiler which is the modern javascript compiler. We can try this translation at https://babeljs.io/

Javascript Expressions:

In JSX we can use javascript expressions by using curly braces syntaxt {}.
Example:

function App() {
  const compNo = 'first';
  return (    
    <h1>This is our {compNo} component</h1>    
  );
  }
export default App;

Example:

function App() {
  const compNo = 'first';
  return (    
    <h1>Sum of 2 + 2 = {2 + 2}</h1>    
  );
  }
export default App;