In the previous section we created our first Hello World function component. Remember we returned React.createElement from the function to tell React what the DOM should look like when we render this component. Another alternative way of telling React what the DOM should look like is by using JSX. JSX is a very common and recommended way (preferred over React.createElement syntax in most cases) to write React code. JSX is a funny looking syntax though - it's not purely HTML, it's not purely Javascript. But it's an extension of Javascript where you can write HTML like syntax with full power of Javascript. For example, the equivalent of return statement we saw in previous page (using React.createElement) in JSX would be:

    1. return (
    2.     <div>Hello World</div>
    3. )

    Instead of returning Javascript code, it's returning HTML-like code (it's not HTML) and notice it's not a string. Wait, what?!! Welcome to JSX!

    You don't trust that this weird syntax works, do you? Open the exercise file and edit the return statement with the JSX and save to see the magic happen!

    Although you write HTML looking syntax, your JSX code is compiled into a Javascript function like the one we saw in the previous page. The above JSX code is compiled into:

    1. return React.createElement('div', null, 'Hello World');

    So writing above JSX code or React.createElement code will generate exactly same output on the browser. You can definitely write all your React code using React.createElement and not ever care about JSX. But it's gonna get pretty complicated pretty soon. Imagine writing all the nested React.createElement functions for generating simple HTML like below:

    1. <table>
    2.     <thead>
    3.         <th>
    4.             <td>Col</td>
    5.         </th>
    6.     </thead>
    7.     <tbody>
    8.         <tr>
    9.             <td>Cell</td>
    10.         </tr>
    11.     </tbody>
    12. </table>

    You'd have to write something like this, which is not very pretty:

    1. React.createElement('table', null, 
    2.     [
    3.         React.createElement('thead', null, 
    4.             React.createElement('th', null,
    5.                 React.createElement('td', null, 'Col')
    6.             )
    7.         ),
    8.         React.createElement('tbody', null, 
    9.             React.createElement('tr', null,
    10.                 React.createElement('td', 'null', 'Cell')
    11.             )
    12.         )
    13.     ]

    So in essence JSX is nothing more than a syntactic sugar for complicated React.createElement functions to make React code more elegant and readable.