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, ...

Get MERN Quick Start Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.