React

by Rohan Paul

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: []
    }
  }
	
	componentDidMount () {
    // var th = this;

    this.serverRequest =
      axios.get(this.props.source)

        .then(function(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://bit.ly/2L3zW3X" />, document.querySelector("#root"))