React.js env

.babelrc

{
    "presets":[
        [
            "es2015",
            {
                "modules": false
            }
        ],
        "react"
    ],
    "plugins": [
        "react-hot-loader/babel"
    ]
}

.eslintrc

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        // "plugin:import/errors",
        // "plugin:import/warnings",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './components/App.jsx';

const render = Component => {
    ReactDOM.render(
        <AppContainer>
            <Component />
        </AppContainer>,
        document.getElementById('root')
    );
};

render(App);

if (module.hot) {
    module.hot.accept('./components/App.jsx', () => { render(App); });
}

package.json

{
  "name": "react-playground",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Cezar Derevlean",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server",
    "start:prod": "NODE_ENV=production webpack-dev-server",
    "build": "webpack",
    "build:prod": "NODE_ENV=production webpack"
  },
  "dependencies": {
    "foundation-sites": "^6.3.1",
    "html-webpack-plugin": "^2.28.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-hot-loader": "next",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "eslint": "^4.0.0",
    "eslint-loader": "^1.8.0",
    "eslint-plugin-react": "^7.1.0",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "node-sass": "^4.5.3",
    "path": "^0.12.7",
    "postcss-loader": "^2.0.6",
    "resolve-url-loader": "^2.0.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack-notifier": "^1.5.0"
  }
}

styles.scss

@import 'settings';
@import 'foundation';

@include foundation-global-styles;
@include foundation-grid;
// @include foundation-flex-grid;
// @include foundation-flex-classes;
// @include foundation-typography;
// @include foundation-forms;
// @include foundation-button;
// @include foundation-accordion;
// @include foundation-accordion-menu;
// @include foundation-badge;
// @include foundation-breadcrumbs;
// @include foundation-button-group;
// @include foundation-callout;
// @include foundation-card;
// @include foundation-close-button;
// @include foundation-menu;
// @include foundation-menu-icon;
// @include foundation-drilldown-menu;
// @include foundation-dropdown;
// @include foundation-dropdown-menu;
// @include foundation-responsive-embed;
// @include foundation-label;
// @include foundation-media-object;
// @include foundation-off-canvas;
// @include foundation-orbit;
// @include foundation-pagination;
// @include foundation-progress-bar;
// @include foundation-slider;
// @include foundation-sticky;
// @include foundation-reveal;
// @include foundation-switch;
// @include foundation-table;
// @include foundation-tabs;
// @include foundation-thumbnail;
// @include foundation-title-bar;
// @include foundation-tooltip;
// @include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-text-alignment;

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const WebpackNotifier = require('webpack-notifier');
const extractStyle = new ExtractTextPlugin({ // bundle css
    filename: 'bundle.css',
    disable: process.env.NODE_ENV !== 'production' // only in prod
});
const cssLoader = {
    loader: 'css-loader',
    options: {
        sourceMap: true,
        importLoaders: 1
    }
};
const postcssLoader = {
    loader: 'postcss-loader',
    options: {
        sourceMap: true,
        plugins: () => [
            autoprefixer(
                '> 1%',
                'last 2 versions',
                'ie >= 9'
            )
        ]
    }
};
const sassLoader = {
    loader: 'sass-loader',
    options: {
        sourceMap: true,
        includePaths: [
            path.resolve('./node_modules/foundation-sites/scss')
        ]
    }
}
const PROD = process.env.NODE_ENV === 'production';

module.exports = {
    // debug: true,
    devtool: PROD ? 'source-map' : 'eval-source-map',// 'cheap-module-eval-source-map',
    entry: {
        main: [
            'react-hot-loader/patch', // needed for hot module replacement
            './app/index.js' // actual entry point
        ]
    },
    output: {
        path: PROD ? path.resolve(__dirname, 'dist') : path.resolve(__dirname, 'build'),
        // publicPath: '/',
        filename: 'bundle.js',
    },
    devServer: {
        hot: !PROD, // disable hot module replacement in production
        // contentBase: PROD ? path.join(__dirname, 'dist') : path.join(__dirname, 'build')
    },
    plugins: [ // general plugins
        new webpack.DefinePlugin({ // env var, use in JS
            PROD: JSON.stringify(PROD)
        }),
        new HtmlWebpackPlugin({ // inject js in html
            template: './app/index.html',
            filename: 'index.html',
            inject: 'body'
        }),
        new CleanWebpackPlugin([PROD ? 'dist' : 'build']), // clean before build
        new WebpackNotifier({alwaysNotify: true}), // OS notifications on build & stuff
        extractStyle
    ].concat(PROD ? [ // prod plugins
        // new webpack.optimize.CommonsChunkPlugin('common.js'),
        new webpack.optimize.UglifyJsPlugin()
    ] : [ // dev plugins
        new webpack.NamedModulesPlugin(), // HMR: show module names in console
        new webpack.HotModuleReplacementPlugin()
    ]),
    module: {
        rules: [{ // javascript
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: [
                'babel-loader', // config: .babelrc
                'eslint-loader' // config: .eslintrc
            ]
        }, {
            test: /\.css$/,
            use: extractStyle.extract({
                fallback: 'style-loader',
                use: [
                    cssLoader,
                    postcssLoader
                ]
            })
        }, {
            test: /\.scss$/,
            use: extractStyle.extract({
                fallback: 'style-loader',
                use: [
                    cssLoader,
                    postcssLoader,
                    'resolve-url-loader',
                    sassLoader
                ]
            })
        }, { // images
            test: /\.(svg|png|jpe?g|gif)$/,
            loader: 'url-loader?limit=25000&name=img/[name].[ext]'
        }, { // fonts
            test: /\.(eot|woff|woff2|ttf)$/,
            loader: 'url-loader?limit=25000&name=fonts/[name].[ext]'
        }]
    }
}