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.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.js"></script>
<style>
.hello{
font-family: Consolas,monaco,monospace;margin: 50% auto;text-align: center;padding: 15px;border: 1px solid #ccc;border-radius: 7px;
}
</style>
</head>
<body>
<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 " + this.props.name);
}
});
React.render(
React.createElement(Hello, {className: "hello", name: "World"}), document.getElementById("container")
);
</script>
</body>
</html>
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 this.props.name respectively.