MERN Quick Start Guide

Understanding React elements and React components

React elements can be created using JSX syntax:

const element = <h1>Example</h1> 

This is transformed to:

const element = React.createElement('h1', null, 'Example') 

JSX is a language extension on top of JavaScript that allows you to create complex UIs with ease. For example, consider the following:

const element = ( 
    <details> 
        <summary>React Elements</summary> 
        <p>JSX is cool</p> 
    </details> 
) 

The previous example could be written without JSX syntax as:

const element = React.createElement( 
    'details', 
    null, 
    React.createElement('summary', null, 'React Elements'), 
    React.createElement('p', null, 'JSX is cool'), 
  ) 

React elements can be any HTML5 tag and any JSX tag can be self-closed. For instance, ...