mobinni

import React, {Component} from 'react';
import {Link} from 'react-router';

class Main extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        )

mobinni

#Summary:

• We wrap 3 entries: app, tools and vendors. These point to the files they will be bundling so to speak the entries to your React app, a separate app that will contain your development tools for Redux and a vendors file that contains the vendors necessary to run the app (ReactJS, Redux, etc.). (line 6 to 17)

• We define that the output path should go to a /build/ folder and that each output file should have the name of the key you defined for it in the the entry object ([name].js). The same applies to the source-maps. (line 18 to 23)

• We define that the output stats of WebPack should be coloured and the reasons should also be outputted. “Reasons” are reasons why a module is included. (line 24 to 27)

mobinni

{
  "name": "redux_isomorphic_kit",
  "version": "0.0.1",
  "description": "A modern isomorphic setup containing: React, Redux, NodeJS, WebPack, Redux DevTools, Serverside rendering, React Router, etc.",
  "dependencies": {
    "ejs": "^2.3.4",
    "history": "^1.13.1",
    "lodash": "^3.10.1",
    "react": "^0.14.0",
    "react-dom": "^0.14.3",

mobinni

.
├── app
│   ├── images
│   ├── index.html
│   ├── scripts
│   │   ├── app.js
│   │   ├── components
│   │   │   └── Main.jsx
│   │   ├── devtools.js
│   │   └── routes

mobinni

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        // entry point for your app
        app: ['webpack-hot-middleware/client', __dirname + '/../app/scripts/app.js'],
        // vendors
        vendors: [