this is a living work in progress, please keep that in mind
As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github
I encourage you to fork, and make it right and submit a pull request!
My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets
Given the tool chain I have outlined above, you need the following things installed. I wont bother instructing you how, I am sure you know or already have what is needed
This is how I go about using my baseline
First, lets clone the repo
mkdir new_project_name
cd new_project_name
git clone [email protected]:intabulas/reactjs-baseline.git .
note at this point, do your normal steps for a new git repo and adding the remote
Make sure grunt-cli is installed globally
npm install -g grunt-cli
Now lets install dependencies (prefix with sudo as needed)
gem install sass
npm install
bower install
Now Edit package.json and replace the content as you see fit. The grunt scripts use the 'name' from package.json for naming files (ie: css, js, etc)
grunt dev
Will build the development (self contained) instance into ./development. CSS and JS are not uglified or minified to help with debugging.
grunt dist
Will build the production (self contained) instance into ./dist. CSS and JS are uglified and minified as appropriate
Update Thanks to FWeinb doing a simple grunt will perform a development build, launch a little connect based server and wire up live reload. I recomend this approach now!
Personaly I use Nodejitsu's http-server to run the instances. Effectivly a node version of python's SimpleHTTPServer.
example:
cd development
http-server
Now visit http://localhost:8080 or whatever port http-server says its running on
To run JSXhint over your code, just do
npm run jsxhint
- Concat vendor js into a single file
Integrate JSXHint- Add some tests
- Use pkg.version when naming files
- Shift to using reactjs out of react-tools
Since no man is an island, the evolution of this baseline occurs not only as I change my opinions and extract more baseline, but with the wonderful help of the ReactJS community. So far these include