react-component-kit v0.0.7
#ReactJS Component Kit
Provide examples of how to implements all kinds of UI components using ReactJS.
Install
npm install react-component-kit
Deployment
In order to be able to install to npm registry, I need to make the library can be used both front end and backend. I can't use webpack to transpile ES6 code, because it will not generate usable node_module. so I choose grunt-bable plugin to do that.
I also want the docs code can deployed to heroku using grunt-connect server. so I add a postinstall scripts as follow:
"postinstall": "(cd docs && npm install --ignore-scripts)"
and I need to add the main project as a local module in docs directory:
"react-component-kit": "file:../",
It take me lots of time to fixed the infinite loop because of reference issue: (install uikit) => (post install docs site) => (dependency install uikit) => .... then I realized that I can add '--ignore-scripts' options to prevent the infinite loop. and finally I make the demo site deployed on heroku :)
Automatically update version and publish is a good thing for me. An simple solutions is add relsese script to you package.json:
"patch-release": "npm version patch && npm publish && git push --follow-tags"
##Components ###Basic usage
import {Tab, TabPane} from 'react-component-kit';
render(){
return (
<Tab activeKey="ui">
<TabPane tabKey="ui" tabName="JUST THE UI">
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
</TabPane>
<TabPane tabKey="dom" tabName="VIRTUAL DOM">
React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native.
</TabPane>
<TabPane tabKey="data-flow" tabName="DATA FLOW">
React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
</TabPane>
</Tab>
);
}
##Css inline consideration
Css inline is good, but some of the most needed feature are hard to implements using this way:
:before/:after pseudo class
browser autoPrefix
I try to use inline for all basic ui components, but I think for business module, better still using some less/sass/stylus, but need better isolate solution, then require each module using webpack.
##heroku deployment
Config Vars
BUILDPACK_URL =https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt.git
This demo/document project is host in heroku, using heroku-buildpack-nodejs-grunt build pack grunt plugins are added to dependencies instead of devDependencies so that heroku can successfully deploy and run