ReactJS : Getting Started

image
  • 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">

<head>
<meta charset="UTF-8">
<title>ReactJS Component Example</title>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
</head>

<body>
<script type="text/jsx">
/*** @jsx React.DOM */ 
var myname = React.createClass({ 
render:function(){ 
return (
<h1>Sandeep Kumar Patel</h1>
) 
} 
}); 
React.renderComponent(<myname/>,document.body)
</script>
</body>
</html
  • Output of the above code is embedded in below JSBIN link.
ReactJS Component Example