React.js Props Component

This short article I'll show you, How to get access html property within React js component.

<!doctype html>
<html>
    <head>
        <title>React Props Example</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    </head>
    <body>
        
        <div id="root"></div>
        <script type="text/jsx">

		
		var Prop = React.createClass({
		
			render : function(){
				return (
					<div>
						<h1> Awesome Text </h1>
						<h3> This is my awesome text </h3>
						<p> Running {this.props.text} Property </p>
					</div>
				);
			}
		
		});
		
		React.render( <div>
					<Prop text="First" />
					<Prop text="Second" />
					<Prop text="Third" />
					</div>
					, document.getElementById('root'));
		
        </script>
    </body>
</html>

In the above code, We are trying to print html and Prop text attribute with {this.props.text} . React render running Prop component three times and every time Prop text attribute will change.

Something to say? Tell us in comment section.