React.js starter template

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

// The spread operator is not compiling here so we must add in style for plnkr specifically
//const AddPunctuation = ({ text, punctuation, ...props}) => <span {...props}>{text}{punctuation}</span>

const AddPunctuation = ({ text, punctuation, style}) => <span style={style}>{text}{punctuation}</span>

const Emphasize = ({ times, children }) => {
  return React.cloneElement(children, {
    style: {
      fontWeight: "bold"
    },
    punctuation: children.props.punctuation.repeat(times)
  })
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Emphasize times={10}>
          <AddPunctuation
            text="Hello World"
            punctuation="!"
          />
        </Emphasize>
      </div>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('example')
);

/* Styles go here */