import React, { Component } from 'react';


class Demo extends Component{

    render(){
        const STYLING = {
            color: 'hsla(0deg, 50%, 100%, 0.72)',
            backgroundColor: 'cornflowerblue'
        }

        return (
            <div>
            {/*
            Comments inside curly braces
            ONE root tag in the return
            class attribute becomes className
            Use parentheses around the whole return object
            curly braces around expressions
            No quotes around attribute value if it is an expression
            Handling style objects with JS styleNames
            */}
                <h1 className="BigHead">Bighetti</h1>
                <h2 style={STYLING}>Five times five is { 5 * 5 }.</h2>
                <p title="with quotes" data-thing={17 * 85}>Hello world</p>
            </div>
        )
    }
}

export default Demo;


/**
let div = React.createElement('div', {className: 'App'},
                [React.createElement('header', {className: 'App-header'},
                    [React.createElement('img', {src: logo,
                        className: 'App-logo',
                        alt: 'Logo'}, null),
                    React.createElement('h1', {className: 'App-title'}, 'Welcome to React')
                    ]),
                React.createElement('p', {className: 'App-intro'},
                    ["To get started, edit ",
                    React.createElement('code', null, 'src/App.js'),
                    " and save to reload."])]);
***/