A quick job board with React, Meteor and Material UI

Getting Started

meteor create projectnamemeteor add react coffeescript http cosmos:browserify mquandalle:jade meteorhacks:npm

Main Template

head
title ReactJobs
body
#App

Startup.jsx

Jobs = new Mongo.Collection("jobs");if (Meteor.isClient) {
Meteor.startup(function () {
// injectTapEventPlugin();
React.render(<App />, document.getElementById("App"));
});
}

App.jsx

const {
Paper,
List,
ListItem,
ListDivider,
Avatar,
RaisedButton,
AppBar,
FlatButton,
IconButton,
NavigationClose
} = mui;
const ThemeManager = new mui.Styles.ThemeManager();
App = React.createClass({
mixins: [ReactMeteorData],
childContextTypes: {
muiTheme: React.PropTypes.object
},
getChildContext: function() {
return {
muiTheme: ThemeManager.getCurrentTheme()
};
},
getMeteorData() {
return {
jobs: Jobs.find({}).fetch()
}
},
componentDidMount() {
{this.loadJobs()}
},
loadJobs() {
loadJobs = Meteor.call("loadGithubJobs");
},
renderJobs() {
return this.data.jobs.map((job) => {
return <Job key={job._id} job={job} />;
});
},
render() {
return (
<div className="wrapper">
<AppBar title="Github Jobs" />
<div className="container">
<List subheader="Latest Github Jobs">
{this.renderJobs()}
</List>
</div>
</div>
);
}
});

Job Component

const {
FontIcons,
IconButton,
Icons,
List,
ListItem,
ListDivider,
Avatar
} = mui;
// Task component - represents a single todo item
Job = React.createClass({
render() {
return (
<ListItem
primaryText={ this.props.job.title }
leftAvatar={ <Avatar src={ this.props.job.company_logo }/> }
secondaryText={ this.props.job.location }
href={this.props.job.company_url}
rightIcon={ <IconButton iconClassName="muidocs-icon-custom-github" tooltip="GitHub" /> }
/>
);
}
});

Pull in the Github data from the API

Meteor.methods
loadGithubJobs: ->
@unblock()
Meteor.http.call "GET", "https://jobs.github.com/positions.json", (error,result) ->
if(error)
console.log error
if(result)
Meteor.call "writeJobs", (result.data)
writeJobs: (jobs) ->
Jobs.remove({})
Jobs.insert job for job in jobs

Some other bits required for Material UI

{
"material-ui": "0.10.1",
"externalify": "0.1.0"
}
{
"transforms": {
"externalify": {
"global": true,
"external": {
"react": "React.require"
}}}}
mui = require('material-ui');
injectTapEventPlugin = require('react-tap-event-plugin');
I love coffee, so if you liked this article and wish to share happiness consider buying me a coffee! I will be very happy. https://www.paypal.me/derrybirkett/5

--

--

--

Thoughts, stories and ideas from a UX Designer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Notes on some React JS library fundamental topics

Understanding XPath in Selenium

MDN學習紀錄20201220

Intersection detection using Matter.js in Tumult Hype 4

Create a CRUD app using Vue.js and Node.js (MEVN stack)

Convert Files and Folders Structures to Bash Scripts, with NodeJS

Why all my Vuex stores have just one action and mutation and why yours should too

Vue.js vs. React — Not Your Usual Comparison

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Derry Birkett

Derry Birkett

Thoughts, stories and ideas from a UX Designer.

More from Medium

Getting Started with React

Change theme using Styled Components

How not to butcher your React `key`.

React.js useReduce