- 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.
