How I wish I could write React components

DreamList.jsx

class DreamList extends React.Component {

  // Would love to be able to write inline SCSS/LESS
  // and have it automatically injected into the document
  // when the component was required.
  <style>
    .dream-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .dream-list-item {
      transition: opacity .5s;
      opacity: .5;

      &:hover, 
      &:active, 
      &.active {
        opacity: 1; 
      }
    }
  </style>

  // And this is a minor one, but it would be nice 
  // to be able to use "class" instead of "className" 
  // and have the JSX transpiler convert it for me.
  render () {
    return (
      <ul class="dream-list">
        <li class="dream-list-item">One</li>
        <li class="dream-list-item">Two</li>
      </ul>
    );
  }

}