ReactJS : Getting Started

  • ReactJS is the library form Facebook to develop component.
  • JSX(JavaScript Syntax Extension) is the library for transforming XML based syntax code to pure JavaScript.
  • In this Demo, “We will create a sample application using ReactJS and JSX”.

  • A JSX script will have type text/jsx.
  • A annotated comment need to be added in beginning of the script to indicate that this block is for JSX transformation.The JSX comment is as follows /*** @jsx React.DOM */.
  • A ReactJS component can be created using createClass() method.This method has the definition of component.
  • The render() method returns a single node to be rendered in browser.
  • Below code has the definition and use of our 1st ReactJS component named myname.It has render() method returns the name in H1 element in a HTML string that gets displayed to the document.body section on call of renderComponent() method.
<!doctype html>
<html lang="en">

<meta charset="UTF-8">
<title>ReactJS Component Example</title>
<script src=""></script>
<script src=""></script>

<script type="text/jsx">
/*** @jsx React.DOM */ 
var myname = React.createClass({ 
return (
<h1>Sandeep Kumar Patel</h1>
  • Output of the above code is embedded in below JSBIN link.
ReactJS Component Example