React Main and Head

Built with JSX

by Eduard Kulikov

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="main"></div>

SCSS

* {
  font-family: Lato, sans-serif;
  padding: 0;
  margin: 0;
}

#main {
  background: #eee;
  
  .head {
    padding: 20px;
    background: #d00;
    color: #fff;
  }
  
  .item {
    margin: 8px 0;
    background: #fff;
    padding: 20px;
  }
}

@font-face { 
    font-family: Lato; 
    src: local('Lato'), 
        url(https://fonts.googleapis.com/css?family=Lato);
}

Babel + JSX

const Head = props => (
  <h1 className="head">
    {props.children}
  </h1>
);

class Main extends React.PureComponent {
  render() {
    return <Head>Hey, Africa!</Head>;
  }
}

ReactDOM.render(<Main />, document.getElementById('main'));