ReactJS 101 - Basics

ReactJS 101 - Basics

Lets start with a fairly old example in a new JS library.

Here is the codepen example

See the Pen React 101 - Ex 1 by Vetrichelvan Jeyapalpandy (@vetri02) on CodePen.

        <script src=""></script>
              font-family: Consolas,monaco,monospace;margin: 50% auto;text-align: center;padding: 15px;border: 1px solid #ccc;border-radius: 7px;
        <div id="container"></div>
        <script type="text/javascript">
            var Hello = React.createClass({ // Create a react class
                render: function(){
                    return React.DOM.h1({className: this.props.className}, "Hello " +;


                    React.createElement(Hello, {className: "hello", name: "World"}), document.getElementById("container")

We have included the ReactJS library. Create a react class and assign it to a var say 'Hello' here.

It contains a render method which returns a h1 react element which accepts some arguments say classname and text.

this.props may be called as dynamic var which changes based on the arguments you pass while calling the class Hello.

React.render which actually renders the contents on the page will take methods which creates the elements which go inside the page.

React.createElement accepts the class to be used, corresponding prop names and the element selector where this content should be rendered.

{className: "hello", name: "World"} will go into this.props.className and respectively.


Vetrichelvan Jeyapalpandy

12 years of experience in web development. Javascript enthusiast. Performance is an important trait of any website, so trying to improve that wherever possible.

View Comments
Next Post

Link to SMS from your web site/app with pre-filled msg

Previous Post

Override jQuery Mobile's default Addressbar hiding behavior