/react-starterKit

Primary LanguageJavaScript

react-kit

React Starter Kit for Quick Start on React !

Demo

Install and work

npm install
grunt start-dev-server

Now Open

http://localhost:8000/component/Counter or http://localhost:8000

Task

Features

  • Bable 6 and React 14, Webpack latest
  • Hot Reload of JS
  • Live-Reload from dist folder !
  • react-css-modules
  • Component Creator
  • Component Viewer
  • normalize.css and box-sizing.css
  • Inbuilt Flux Implementation
  • Sample CounterStore
  • Store Creator
  • Store Viewer
  • Routing - Component Replacement
  • Routing - Confirm Navigation Dialog
  • Routing - Tabbing - Show/Hide
  • Auto Deploy on Heroku
  • Extract Routing Code outside this repo (WIP)
  • Hot Reload of CSS module
  • autoprefixing
  • Test cases adding
  • build failed if test fails.
  • Travis builds
  • Linting and preprocessing etc
  • Animation
  • Image loader
  • svg-icons to font generator !
  • External CSS Loader (WIP)
  • External CSS - Font Awesome or Elemental UI - http://elemental-ui.com/css
  • Minification of JS/CSS
  • grunt deploy to create distribution folder

Basic Components

  • Counter Example
  • Left Navigator
  • Popup
  • DataTables and Graphs

Other Features (If Possible)

  • Debug in Webstrom
  • Theming
  • Internationalisation
  • Performance Stats - time executions on various components loading/unloading etc
  • Inline Edit Forms etc
  • Isomorphic
  • Show build Error Directly on UI using Red Block

Directory Structure

 ├── Gruntfile.js
 ├── LICENSE
 ├── README.md
 ├── index.html
 ├── package.json
 ├── server.js
 ├── start.sh
 ├── webpack.config.js
 ├─┬ dist/
 │ ├── app.css
 │ └── bundle.js
 ├─┬ scripts/
 │ ├── createComponent.sh
 │ └── createStore.sh
 └─┬ src/
   ├── entry.js
   ├─┬ common/
   │ ├── Actions.js
   │ ├── GenerateSingletonStore.js
   │ ├── dispatcher.js
   │ ├── simpleReactRouter.js
   │ └── util.js
   ├─┬ components/
   │ ├─┬ About/
   │ │ ├── About.css
   │ │ └── About.js
   │ ├─┬ ComponentLoader/
   │ │ ├── ComponentLoader.css
   │ │ └── ComponentLoader.js
   │ ├─┬ ContentArea/
   │ │ ├── ContentArea.css
   │ │ └── ContentArea.js
   │ ├─┬ Counter/
   │ │ ├── Counter.css
   │ │ └── Counter.js
   │ ├─┬ Header/
   │ │ ├── Header.css
   │ │ └── Header.js
   │ ├─┬ InputText/
   │ │ ├── InputText.css
   │ │ └── InputText.js
   │ ├─┬ LeftNav/
   │ │ ├── LeftNav.css
   │ │ └── LeftNav.js
   │ ├─┬ MainApp/
   │ │ ├── MainApp.css
   │ │ └── MainApp.js
   │ ├─┬ StoreActionsViewer/
   │ │ ├── StoreActionsViewer.css
   │ │ └── StoreActionsViewer.js
   │ ├─┬ StoreLoader/
   │ │ ├── StoreLoader.css
   │ │ └── StoreLoader.js
   │ ├─┬ UserInfo/
   │ │ ├── UserInfo.css
   │ │ └── UserInfo.js
   │ └─┬ UserList/
   │   ├── UserList.css
   │   └── UserList.js
   ├─┬ css/
   │ ├── loadcss.js
   │ ├── style.css
   │ ├── images/
   │ └── svg-icons/
   └─┬ stores/
     └── CounterStore.js