React - Getting Started (The Welcome Element)


React is a virtual dom library that:

  • permits to define the HTML dom programmatically
  • will update HTML dom incrementally

Step by Step: The Welcome element

There is basically two big steps when you work with React (or any virtual dom library)

Creating a React element

In the below code, you see:

function Welcome(props) {
  return React.createElement(
     'h1',  // the type of element (html element type)
     {},  // the props (html such as element can get attribute such as  class)
     [ // the children of the element build the DOM tree
        `Hello, ${}`, // the first child is a text node
        props.children // the other node passed with the arguments

Composing them to create the DOM Tree

You can compose the element to create the React DOM Tree. Below we define our top node of the tree:

  • with a welcome element
  • that accepts a welcome element as child
const MyRootNode = Welcome( 
        children: Welcome({name:"Foo"})


The React Library

The react library 1)needs to be present.

<script crossorigin src=""></script>
<script crossorigin src=""></script>

The HTML container

To render in a HTML page, React needs to now where to put the HTML that it will create.

This html element is generally a div called the root Id.

In your HTML page:

<div id="root"></div>

The Render function

The creation of the HTML (rendering) is done via the ReactDOM.render that takes two parameters:



The above rendering function will output:

If you inspect the generated HTML DOM, you will see:

<h1>Hello, Bar
    <h1>Hello, Foo</h1>

Hello World in Jsx

You can write your javascript in jsx

making your code less verbose.

The above React Element written in JSX would become:

  • The definition of Welcome tag in Jsx
function Welcome(props) {
  return <h1>Hello, {} {props.children}</h1>;
  • The root node
const MyRootNode = 
<Welcome name="Foo">
    <Welcome name="Bar"></Welcome>
  • Output:

Documentation / Reference

Discover More
React - Server-rendered markup (renderToString / hydrate)

server-rendered markup is the dynamic possibility of server-side rendering (vs static). The steps are: the web server returns a web page where the root component has been rendered as HTML with special...
React Framework - Create React App

facebookincubator/create-react-app is a React framework To enable hot reloading, you need to disable safe write. See See Change Log: facebookincubator/create-react-app/blob/master/CHANGELOG.mdChange...
What is a React Element?

An element is a node in the React tree (React DOM implementation) that has a type and props. component getting started createElementjsx filescreateElement e A counter component with a useState...
What is the useState Hook and how to use it? Local State in a React Function Component

This page is the local state (known as the state in react) in a React Functional Component. In this context, the state is managed by the useState hook. The local state in React is managed with the...

Share this page:
Follow us:
Task Runner