react-component-kit

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

vjeux: React: CSS in JS

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