Example es6 react

ExampleWidget.jsx

//import the react library
import * as React from "react";

//ExampleWidget inherits functionality of React.Component
//we also need to export default to make this widget available
//to the rest of our app
export default class ExampleWidget extends React.Component {
    
    //constructor is called when the widget is created
    constructor(props) {
        //props are the things passed to a html element, e.g. id is a prop on <div id="test"></div>
        super(props);
    }
    
    //this is the method that outputs our HTML
    render() {
        //Notice how we mix HTML and Javascript? This is called JSX syntax
        return (
            <div>
                <h1 className="greeting">Hello {{ this.props.name }}</h1>
            </div>
        );
    }
}

//we can use this widget by saying <ExampleWidget name="Damon" /> which will render out
// <div><h1 class="greeting">Hello Damon</h1></div>