React Resources and Explanations

react.md

React Stack for a Single Page WebApp

Dependencies

• React
• React-Router-DOM
• Babel
• Redux
• Axios
• Webpack
• Semantic UI

Package.json

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.23.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-0": "^6.22.0",
    "history": "^4.6.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
    "react-router-dom": "^4.0.0",
    "redux": "^3.6.0",
    "semantic-ui-react": "^0.67.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "2"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "less": "^2.7.2",
    "less-loader": "^3.0.0",
    "react-scripts": "0.9.5",
    "semantic-ui-less": "^2.2.9"
  },
  "scripts": {
    "dev": "webpack-dev-server --content-base src --inline --hot",
    "build": "webpack -d"
  }
}

Webpack Conf

const debug = process.env.NODE_ENV !== "production";
const path = require('path');
const webpack = require('webpack');

const BUILD_DIR = path.resolve(__dirname, 'src');
const APP_DIR = path.resolve(__dirname, 'src/app');

module.exports = {
    context: path.join(__dirname, "src"),
    devtool: debug ? "inline-sourcemap" : null,
    entry: path.resolve('./src/js/index.js'),
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                  presets: ['react', 'es2015', 'stage-0'],
                  plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
                }
            },
            {
                test: /\.less$/,
                loader: "less-loader"
            }
        ]
    },
    output: {
        path: BUILD_DIR,
        filename: 'tasking.bundle.js',
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: false,
            sourcemap: false,
            compress: {
                unused: true,
                dead_code: true,
                warnings: false,
            },
        }),
    ],
};