Example application structure

[dangron]

Each react app we create should follow this structure:

// ./components/

<Root />
 // Handles routing, context and other init tasks

<Driver /> 
// Where applicable a component to pull together the bulk of other components
// Dispatch actions, make urls, bootstrap stateless functional components
// To be extended by projects for render hijacking.

const specNamingConvention = './spec/appdir/thing.spec.js'
// unit tests and snapshot tests with jest where appdir
// mirrors the files postion in the directory tree.

const pathToExampleData = './example/data/*.js'
// sample data is useful for building without a backend or trying new things!

const pathToExampleApp = './example/js/App.js'

// ./example/js/App.js:
define(
    ['react', 'react-dom', 'redux', 'react-redux', 'redux-thunk' 'app.min'],
    function (React, ReactDOM, Redux, ReactRedux, ReduxThunk, ReactApp) {

        var mountNode = document.querySelector('#react-fredhopper'); // inject this too?

        var store = Redux.createStore(
            ReactApp.reducers,
            DATA,
            Redux.compose(
                Redux.applyMiddleware(ReduxThunk.default),
                window.devToolsExtension && window.devToolsExtension()  // required??
        ));

        function render() {
            ReactDOM.render(React.createElement(ReactApp.default, {
                store: store
            }), mountNode);
        }

        store.subscribe(render);
        render();
    }
);

[dangron]

package.json:

{
  "name": "INJECTED PACKAGE NAME",
  "version": "2.0.0",
  "description": "INJECTED DESCRIPTION",
  "main": "index.js",
  "scripts": {
    "test": "./node_modules/.bin/jest",
    "dev": "webpack-dashboard -- webpack-dev-server --config ./webpack.dev.config.js",
    "build": "webpack --config ./webpack.prod.config.js && ./node_modules/.bin/jest",
  },
  "private": true,
  "author": "INJECTED AUTHOR",
  "license": "UNLICENSED",
  "devDependencies": {
   "... BABEL THINGS ...": "HERE",
    "jest": "^20",
    "react": "^15",
    "react-dom": "^15",
    "... REACT THINGS...": "HERE"
  },
  "dependencies": {
    "babel-jest": "^17.0.2",
    "es6-promise": "^3.3.1",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.17.2",
    "prop-types": "^15.5.10",
    "qs": "^6.2.1",
    "react-redux": "^4.4.5",
    "react-router": "^2.8.1",
    "react-router-component": "^0.36.0",
    "react-test-renderer": "^15.5.4",
    "redux-thunk": "^2.1.0"
  }
}