JSFiddle - React, Tailwind, and code Playground

by Iftakharul Alam

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js"></script>
<div id="root"></div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,900);

body {
  font-family: 'Lato', sans-serif;
  padding: 20px;
}
h1 {
  font-weight: 900;
  font-size: 60px;
}

.job a {
  display: block;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 0 0 10px 0;
  text-decoration: none;
  color: black;
}
.job a:hover {
  background: #eee;
}
.job a span {
  margin: 0 2px;
}
.job a span:first-child {
  font-weight: 900;
}

Babel + JSX

var App = React.createClass({
  
  getInitialState: function() {
    return {
      jobs: []
    }
  },
  
  componentDidMount: function() {
    // Is there a React-y way to avoid rebinding `this`? fat arrow?
    var th = this;
    this.serverRequest = 
      axios.get(this.props.source)
        .then(function(result) {    
          th.setState({
            jobs: result.data.jobs
          });
        })
  },
  
  componentWillUnmount: function() {
    this.serverRequest.abort();
  },
  
  render: function() {
    return (
      <div>
        <h1>Jobs!</h1>
        {/* Don't have an ID to use for the key, URL work ok? */}
        {this.state.jobs.map(function(job) {
          return (
            <div key={job.url} className="job">
              <a href={job.url}>
                {job.company_name}
                is looking for a 
                {job.term}
                {job.title}
              </a>
            </div>
          );
        })}
      </div>
    )
  }
});

React.render(<App source="//codepen.io/jobs.json" />, document.querySelector("#root"));