generator-tradie-react-app

A generator for scaffolding React apps with Tradie.

Usage no npm install needed!

<script type="module">
  import generatorTradieReactApp from 'https://cdn.skypack.dev/generator-tradie-react-app';
</script>

README

generator-tradie-react-app

Generator for scaffolding react apps with tradie.

Installation

npm install -g yo
npm install -g generator-tradie-react-app

Usage

yo tradie-react-app --type=<type>

Where type is one of:

react

Boilerplate for very simple app.

Includes react.

  • linting
  • bundling of scripts, including:
    • transpilation of ES2015 and JSX
    • source maps
    • removal of dead code
    • minification
  • bundling of styles, including:
    • @importing style files from npm packages
    • @importing style files once to avoid redundant bytes
    • copying assets and rewriting asset URLs
    • automatic addition of vendor prefixes
    • minification
  • testing of scripts, including:
    • chai's expect for assertions
    • shallow rendering of React components
    • jQuery like assertions on React virtual-dom trees
  • live reloading
  • static server
react-redux

Boilerplate for a more complex app.

Includes react-router for routing and redux for managing application state.

  • linting
  • bundling of scripts, including:
    • transpilation of ES2015 and JSX
    • source maps
    • removal of dead code
    • minification
  • bundling of styles, including:
    • @importing style files from npm packages
    • @importing style files once to avoid redundant bytes
    • copying assets and rewriting asset URLs
    • automatic addition of vendor prefixes
    • minification
  • testing of scripts, including:
    • chai's expect for assertions
    • sinon and sinon-chai for assertions on spies and stubs
    • shallow rendering of React components
    • jQuery like assertions on React virtual-dom trees
  • live reloading
  • static server
react-redux-universal

Boilerplate for a UniversalJS app.

Includes react-router for routing, redux for managing application state and redial for pre-fetching data.

  • linting
  • bundling of scripts, including:
    • transpilation of ES2015 and JSX
    • source maps
    • removal of dead code
    • minification
  • bundling of styles, including:
    • @importing style files from npm packages
    • @importing style files once to avoid redundant bytes
    • copying assets and rewriting asset URLs
    • automatic addition of vendor prefixes
    • minification
  • testing of scripts, including:
    • chai's expect for assertions
    • sinon and sinon-chai for assertions on spies and stubs
    • shallow rendering of React components
    • jQuery like assertions on React virtual-dom trees
  • live reloading
  • server rendering

Note: Server side rendering may positively impact performance in some cases and negatively impact performacne in others. Test!