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, the following will create a paragraph React element with an empty content within:

const element = <p /> 

The same way as you would do with HTML5, you can provide attributes to React elements, called properties or props in React:

const element = ( 
    <input type="text" value="Example" readOnly /> 
) 

React components allow you to isolate parts of your web application as re-usable pieces of code or components. They can be defined in several ways. For instance:

• Functional components: These are plain JavaScript functions that accept properties as the first argument and return React elements:

      const InputText = ({ name, children }) => ( 
          <input 
              type="text" 
              name={name} 
              value={children} 
              readOnly 
          />­ 
      ) 

• Class components: Using ES6 classes allows you to define life cycle methods and create stateful components. They render React elements from the render method:

      class InputText extends React.Component { 
          render() { 
              const { name, children } = this.props 
              return ( 
                  <input 
                      type="text" 
                      name={name} 
                      value={children} 
                      readOnly 
                  /> 
              ) 
          } 
      } 

• Expressions: These keep a reference to an instance of a React element or component:

      const InstanceInputText = ( 
          <InputText name="username"> 
              Huang Jx 
          </InputText> 
      ) 

There are a few properties that are unique and are only part of React. For instance, the children property refers to the elements contained within the tag:

<MyComponent> 
    <span>Example</span> 
</MyComponent> 

The children property received in MyComponent, in the previous example, will be an instance of a span React element. If multiple React elements or components are passed as children, the children property will be an array. However, if no children are passed, the children property will be null. The children property doesn't necessarily need to be a React element or component; it can also be a JavaScript function, or a JavaScript primitive:

<MyComponent> 
    {() => { 
        console.log('Example!') 
        return null
    }} 
</MyComponent> 

React also considers functional components and class components that return or render a string, a valid React component. For instance:

const SayHi = ({ to }) => ( 
    `Hello ${to}` 
) 
const element = ( 
    <h1> 
        <SayHi to="John" />, how are you? 
    </h1> 
) 

Rendering components to the DOM in React is not a complicated task. React provides several methods for rendering a React component to the DOM using the ReactDOM library. React uses JSX or React.createElement to create a tree or a representation of the DOM tree. It does so by using a virtual DOM, which allows React to transform React elements to DOM nodes and update only the nodes that have changed.

This is how you usually render your application using the render method from the ReactDOM library:

import * as ReactDOM from 'react-dom' 
import App from './App' 
ReactDOM.render( 
   <App />, 
   document.querySelector('[role="main"]'), 
) 

The first argument provided to the render method is a React component or a React element. The second argument tells you where in the DOM to render the application. In the previous example, we use the querySelector method from the document object to look for a DOM node with an attribute of role set to "main".

React also allows you to render React components as an HTML string, which is useful for generating content on the server side and sending the content directly to the browser as an HTML file:

import * as React from 'react' 
import * as ReactDOMServer from 'react-dom/server' 
const OrderedList = ({ children }) => ( 
   <ol> 
      {children.map((item, indx) => ( 
         <li key={indx}>{item}</li> 
      ))} 
   </ol> 
) 
console.log( 
   ReactDOMServer.renderToStaticMarkup( 
      <OrderedList> 
         {['One', 'Two', 'Three']} 
      </OrderedList> 
   ) 
) 

It will output the following in the console:

<ol> 
   <li>One</li> 
   <li>Two</li> 
   <li>Three</li> 
</ol>