React

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/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;
}

React

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	jobs: []
    }
  }
  
  updateJobs(jobs) {
    this.setState({
      jobs: jobs
    })
  }
	
	componentDidMount () {
    // var th = this;

    this.serverRequest =
      axios.request({
      	method: "get",
        url: this.props.source,
        crossDomain: true
      }).then((result) => this.setState({jobs: result.data.jobs}))
    }

    componentWillUnmount () {
        this.serverRequest.abort();
    }
  
 render () {
        return (
            <div>
							<h1>Jobs!</h1>

							{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>

        )
    }
}

ReactDOM.render(<App source="https://gist.githubusercontent.com/rohan-paul/b74bf6ef1adfdb92e0af5783e6c93a71/raw/bdffbbcb50128c03dd9edc90dbeb85e88c70ebc4/jobs.json" />, document.querySelector("#root"))