Basic component and props

by jeremenichelli

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="example"></div>

SCSS

.github-link {
  color: #404040;
  display: block;
  line-height: 1.5;
  font-family: Monaco, Menlo, monospace;
  font-size: 14px;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
}

JavaScript 1.7

const baseUrl = 'https://github.com/';

class GitHubLink extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <a
        href={ baseUrl + this.props.user }
        className="github-link">
          { this.props.user } on github
      </a>
    );
  }
}

const users = [
  'jeremenichelli',
  'iamdustan'
];

class GitHubUsers extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        { users.map(user => <GitHubLink user={ user }/>) }
      </div>
    );
  }
}

ReactDOM.render(<GitHubUsers/>, document.querySelector('#example'));