05 JSX - biswajitsundara/react GitHub Wiki

JSX stands for JavaScript XML.

JSX is an extension of java script that allows you to write HTML in Java script file.
Usually we can't write html code inside a java script file e.g return <h1>Hello</h1>
React uses JSX so we can have HTML code inside java script files.

Default Behaviour

The below code will throw error because by default we can't write HTML inside java script.

function hello(){
    return <h1>Hello</h1>;
}

console.log(hello());

JSX is not understood by the browsers so the code needs to be converted.
Babel is the transpiler that converts JSX to Java script code.
The create-react-app configures all the settings so we don't need handle anything manually.
In the browser -> Go to developer tools -> Source tab -> check static/js folder
main.js (you will see the transformed code)

Someone can argue why JSX, and why not Java Script
JSX is faster and generates optimized code during transpilation.
Creating template becomes easy
Instead of creating separate files for HTML & the java script like angular
It maintains both the HTML & Java script functions in one file and it's called Component

Lets see how react elements are created.

Check in browser console

const element = <h1>Hello World</h1>;
console.log(element);

The same thing is done by Babel.

//Edit App.js
import React from 'react';

function App() {
  return  React.createElement("h1",null,"Hello World");
}

The first parameter is the element
The second parameter is the attribute e.g: we can set the id, css class name etc.
We can also write this return React.createElement("h1",{id:'header'},"Hello World");
Third attribute is the children.

JSX is not mandatory to create elements however its better to use.
The Babel transpiler converts this JSX to createElement and then its rendered in browser.

function App() {
  return <h1 id="header">Hello World</h1>
}

JSX can return only one element. So the below code is not going to work

function App() {
  return (
  <h1 id="header">Hello World</h1>
  <p>Hello</p>
  )
}

So the solution is we can wrap the elements within a div element

function App() {
  return (
    <div>
      <h1 id="header">Hello World</h1>
      <p>Hello</p>
    </div>
  );
}

There's a problem with the above approach

If we keep wrapping up multiple elements within div tag, then in the dom there will be too many divs and the situation is called div soup
For tables, lists we can't use div as that will break the structure
So the solution is JSX Fragments
We need to wrap the elements within empty <> </>. This will not be added to the DOM

function App() {
  return (
    <>
      <h1 id="header">Hello World</h1>
      <p>Hello</p>
    </>
  );
}