anevins12/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="//fb.me/react-0.14.3.js"></script>
    <script src="//fb.me/react-dom-0.14.3.js"></script>
    <title>I'm amazing act React</title>
</head>
<body>
<div id="wrapper"></div>
<script type="text/babel">
    function renderComponentWithStyles(PassedComponent, styles) {

        return class extends React.Component {
            constructor(props) {
                super(props);

                this.styles = styles;
            }

            render() {
                return (
                    <PassedComponent style={ this.styles } />
                )
            }
        }
    }

    const paragraphStyle = {
        backgroundColor: 'deeppink'
    };

    const headingStyle = {
        backgroundColor: 'deepskyblue'
    };

    class Paragraph extends React.Component {
        render() {
            return (
                <p { ...this.props }> Hello World </p>
            )
        }
    }

    class Heading extends React.Component {
        render() {
            return (
                <h1 { ...this.props }> Lololololz </h1>
            )
        }
    }

    var ParagraphWithStyles = renderComponentWithStyles(Paragraph, paragraphStyle);

    var HeadingWithStyles = renderComponentWithStyles(Heading, headingStyle);


    class Wrapper extends React.Component {
        render() {
            return (
                <div className="wrapper">
                    <HeadingWithStyles />
                    <ParagraphWithStyles />
                </div>
            )
        }
    }

    ReactDOM.render(
        <Wrapper></Wrapper>,
        document.getElementById('wrapper')
    )
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
	<script src="//fb.me/react-0.14.3.js"></script>
	<script src="//fb.me/react-dom-0.14.3.js"></script>
	<title>I'm amazing act React</title>
	</head>
	<body>
	<div id="wrapper"></div>
	<script type="text/babel">
	function renderComponentWithStyles(PassedComponent, styles) {

	return class extends React.Component {
	constructor(props) {
	super(props);

	this.styles = styles;
	}

	render() {
	return (
	<PassedComponent style={ this.styles } />
	)
	}
	}
	}

	const paragraphStyle = {
	backgroundColor: 'deeppink'
	};

	const headingStyle = {
	backgroundColor: 'deepskyblue'
	};

	class Paragraph extends React.Component {
	render() {
	return (
	<p { ...this.props }> Hello World </p>
	)
	}
	}

	class Heading extends React.Component {
	render() {
	return (
	<h1 { ...this.props }> Lololololz </h1>
	)
	}
	}

	var ParagraphWithStyles = renderComponentWithStyles(Paragraph, paragraphStyle);

	var HeadingWithStyles = renderComponentWithStyles(Heading, headingStyle);


	class Wrapper extends React.Component {
	render() {
	return (
	<div className="wrapper">
	<HeadingWithStyles />
	<ParagraphWithStyles />
	</div>
	)
	}
	}

	ReactDOM.render(
	<Wrapper></Wrapper>,
	document.getElementById('wrapper')
	)
	</script>
	</body>
	</html>