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