bersilius/react-ui-material-archetype

React front-end project skeleton with Material-UI components

react-ui-material-archtype

About

This is a template project for ReactJS frontend applications that use Material-UI components

The features built into this projects:

• React, with JSX and ES6 support (babel)
• react router
• Material-UI
• Themes support
• Flux
• Stores
• REST proxy layer
• sample pages
  • navigation header
  • footer
  • info page (cards)
  • list with items
  • form
• static code analizer: jshint, eslint
• build and QA commands directly with npm: eslint, lint, watch, browserify, build, test

Usage

A real project instance can be generated via the kickoff utility with the following command:

$ kickoff -s tombenke/react-ui-material-archtype -d new_project

For further details on how to use the kickoff tool visit the kickof documentation pages.

After the new project has been successfully created, move into the folder, and install the dependencies with the following command:

Run the install command:

$ cd new_project
$ npm install

Build the app

To create the dist package, run either:

npm run browserify

or

npm run watch

The results will appear under the dist folder. You can start using it by opening the dist/index.html page with a browser, or start a http server (such as http-server) which serves the dist folder as static resources.

Static code analysis

For linter you need to install eslint and babel-eslint

sudo npm install -g eslint
sudo npm install -g babel-eslint

Also need to set properly the .eslintrc file

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "ecmaFeatures": {
        "modules": true
    },
    "rules": {
    }
}

Planned features and modifications

• tests

  • component (unit) tests
  • integration test

• Localstore adapter for stores

• form validation

  • https://github.com/mbrookes/formsy-material-ui
  • https://github.com/christianalfoni/formsy-react
  • https://www.npmjs.com/package/validator

• event driven action pipeline

  • Actions (Events) with persistent event store (FIFO)
  • synchronizer module
  • state-machine and sync alert on-line off-line
  • event transfer channel
  • client-side dispatcher

• sass/css styling, customization

• Cordova

References

• React
• Flux
• Material-UI
• Material design - Google design guidelines
• Themes
• babelify
• browserify
• jshint
• ESLint - The pluggable linting utility for JavaScript and JSX
• mocha-eslint - run ESLint as mocha tests
• SublimeLinter-eslint
• ESLint Rules
• Configuring ESLint
• Getting React and ES6 Syntax Highlighting in Sublime Text