React Tutorials — Hello World
In this article we will learn how to render Hello World on a html page using React.
First we will include the react library on the html page.
<html> <head> <!-- Load React Javascript -->
<script src="//fb.me/react-with-addons-0.13.1.js"></script>
</head><body> <div id="container"> </div></body></html>
There are 2 steps to do this
1) Create a React Element containing the text “Hello world”
2) Rendering the above element on the html page.
Step 1
Create a React Element.
A React Element is a JavaScript object which represents the html tags like div, span etc. It has to be rendered on the page for it to generate the corresponding html.
To create a React element we use the function
React.createElement(elementName,[options],[children])elementName: the name of the element to be created in string. it can be any valid html tag name. ex “div”, “p”, “span” etc
options(optional): an object with the attributes of the element as keys and values as the values of the attributes, pass null if u don’t want any attributes. ex {id:”content”}, {name:”email”,value:”xyz@gmail.com”}
children: the contents of the element. Following format are possible.
1) a string/an array of strings. ex “Hello World”
2) a react element/array of react elements. (We will see this later)
Using the above function we will create a div element with content “Hello World”
var element = React.createElement(“div”,null,”Hello World”); Step 2
Render the element created above on the page.
For this we use the function “render” provided by React.
React.render(reactElement,container)reactElement: the react Element to render on the page. Only one element can be rendered.
container: DOM reference to html element inside which the react element has to be rendered.
So if we have to render the React element in the div with id “container” then we would have to do the following.
React.render(element, document.getElementById(“container”) )Find the working code for this example at
I will be writing a series of tutorials on Reactjs. Next one coming soon. Please leave your feedback.
