You can Follow me on Twitter to get tutorials, JavaScript tips, etc.

This is for absolute beginner who is still indecisive about React.

YouTube video [6m:11s] for this tutorial is available here: React JS Tutorial 2

Full version of this tutorial is available on this tutorial site: React Elements.

In React, primary element is ReactElement. It’s the building block. Or the common denominator of your program structure.

Create React Element without JSX:

var P = React.createElement(‘p’, {className: ‘cN’}, ‘TXT’);

Now create same React Element with JSX:

var P = <p className=“cN”>TXT</p>

Looks a lot simpler with JSX.

The latter will be automatically converted to ReactElement anyways.

Congratulations! You just created a virtual DOM element in React.

Regardless of how the ReactElement was created, render it as:

var root = document.getElementById(“AppContainer”);

React.render(P, root);

This will “mount” your new HTML element to the JavaScript DOM.

The element will be rendered into the app container whose id is root:

<div id = AppContainer”></div>

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store