Meteor + React demo

This is to demonstrate using Meteor, React, FlowRouter and React-Layout to fetch Github data via its API. This demo also uses Semantic UI to beautify the view.

Clone or download this repo and just type meteor in the terminal under the repo folder, then visit the localhost:3000 in your browser, you will get something like below image.

I wrote this demo on Mac OS X. You might need to change some commands in your platform if it is different.

1. Install Meteor.

First of all, install the mighty Meteor if you don't have it on you machine. Refer this official doc to install it. You don't even have to install Node.js and MongoDB to install Meteor. Meteor will take care of them for you.

2. Run below commands in your terminal.

//Create meteor project
meteor create meteor-react-flux

//Go in the directory
cd meteor-react-flux

//Remove the generated files
rm -r *

//Create the recommended file structure
//Don't change the folder names. Meteor uses the names to organise the code
mkdir client server model

//Create files
touch client/app.js client/router.jsx server/server.js model/collections.js

3. Install Semantic UI to build the site beautifully.

meteor add semantic:ui flemay:less-autoprefixer jquery
Its document is here. One thing to remember that you have to put the custom.semantic.json in the specified folder /client/lib as the document says, otherwise Meteor can't recognise it. Because the folder name tells Meteor what it is as its meaning - client lib.

4. Install the official React support.

meteor add react The document is here.

5. Install other related packages.

I personally prefer FlowRouter rather than Iron.Router.
meteor add kadira:flow-router Refer this doc to know more about FlowRouter.

Then install a React layout package meteor add kadira:react-layout This is to organise the React components. Read this for more information. You might need it for the SEO purpose.

Install github api meteor add bruz:github-api

Remove autopublish meteor remove autopublish

6. Let's code

One tip. Put null in Meteor.Collection as ClientRepoInfo = new Meteor.Collection(null); will create a local only collection in the minimongo of Browser.

Below image is the simple structure of the demo which mimics the Flux data flow. I think this might help others to understand it easier.

Other code in this repo.