danilosilvadev/.babelrc

## .babelrc
{
    "presets": [
        "react",
        "es2015"
    ],
    "plugins": [
        "react-hot-loader/babel"
    ]
}

## container.js
//This will be inside src/components

import React, { Component } from 'react';

const Container = () => {
    return <h1>Hello World!</h1>
}

export default Container

## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
     <div id="root"></div>
  <script src="dist/build/main.bundle.js"></script>
  </body>
</html>

## index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Container from './src/components/container';


ReactDOM.render(
  <Container />,
  document.getElementById('root')
);

//PS: You need to create and export this "container component" in src to work ok?

## package.json
{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open",
    "build:dev": "webpack --env=dev --progress --profile --colors",
    "build:dist": "webpack --env=prod --progress --profile --colors"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "lodash": "^4.17.4",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-flexbox-grid": "^1.1.3",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "redux": "^3.7.2",
    "styled-components": "^2.1.1"
  }
}

## webpack.config.js
var path = require('path');
const webpack = require('webpack');
const publicPath = '/dist/build/';
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  //Content
  entry: './index.js',
  // A SourceMap without column-mappings ignoring loaded Source Maps.
  devtool: 'cheap-module-source-map',
  plugins: [
    //simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.
    new HtmlWebpackPlugin({
      title: 'Hot Module Replacement'
    }),
    //Auto replacement of page when i save some file, even css
    new webpack.HotModuleReplacementPlugin()
  ],

  output: {
    path: path.join(__dirname, publicPath),
    filename: '[name].bundle.js',
    publicPath: publicPath,
    sourceMapFilename: '[name].map',
  },

  devServer: {
    port: 3000,
    host: 'localhost',
    //Be possible go back pressing the "back" button at chrome
    historyApiFallback: true,
    noInfo: false,
    stats: 'minimal',
    publicPath: publicPath,
    contentBase: path.join(__dirname, publicPath),
    //hotmodulereplacementeplugin
    hot: true
  },
  module: {
    rules: [
     {
       test: /\.css$/, use: ['style-loader', 'css-loader'],
       include: /flexboxgrid/
       //Follow instructions at https://github.com/roylee0704/react-flexbox-grid
     },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.js|.jsx?$/,
        exclude: /(node_modules)/,
        loaders: ["babel-loader"]
      }]
  },
}

## webpack.prod.js
const publicPath = '/dist/build/';
var path = require('path');
const webpack = require('webpack');

module.exports = {
 entry: './index.js',
 output: {
    path: path.join(__dirname, '/dist/assets'),
    filename: '[name].bundle.js',
    publicPath: publicPath,
    sourceMapFilename: '[name].map'
  },

  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      mangle: {
        screw_ie8: true,
        keep_fnames: true
      },
      compress: {
        screw_ie8: true
      },
      comments: false
    })
  ]
}
	{
	"presets": [
	"react",
	"es2015"
	],
	"plugins": [
	"react-hot-loader/babel"
	]
	}
	//This will be inside src/components

	import React, { Component } from 'react';

	const Container = () => {
	return <h1>Hello World!</h1>
	}

	export default Container
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>React App</title>
	</head>
	<body>
	<div id="root"></div>
	<script src="dist/build/main.bundle.js"></script>
	</body>
	</html>
	import React from 'react';
	import ReactDOM from 'react-dom';
	import Container from './src/components/container';


	ReactDOM.render(
	<Container />,
	document.getElementById('root')
	);

	//PS: You need to create and export this "container component" in src to work ok?
	{
	"name": "code",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"build": "webpack",
	"start": "webpack-dev-server --open",
	"build:dev": "webpack --env=dev --progress --profile --colors",
	"build:dist": "webpack --env=prod --progress --profile --colors"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"devDependencies": {
	"babel-core": "^6.25.0",
	"babel-loader": "^7.1.1",
	"babel-preset-env": "^1.6.0",
	"babel-preset-es2015": "^6.24.1",
	"babel-preset-react": "^6.24.1",
	"css-loader": "^0.28.4",
	"file-loader": "^0.11.2",
	"html-webpack-plugin": "^2.30.1",
	"style-loader": "^0.18.2",
	"webpack": "^3.4.1",
	"webpack-dev-server": "^2.6.1"
	},
	"dependencies": {
	"lodash": "^4.17.4",
	"react": "^15.6.1",
	"react-dom": "^15.6.1",
	"react-flexbox-grid": "^1.1.3",
	"react-hot-loader": "^3.0.0-beta.7",
	"react-redux": "^5.0.5",
	"react-router": "^4.1.2",
	"react-router-dom": "^4.1.2",
	"redux": "^3.7.2",
	"styled-components": "^2.1.1"
	}
	}
	var path = require('path');
	const webpack = require('webpack');
	const publicPath = '/dist/build/';
	const HtmlWebpackPlugin = require('html-webpack-plugin');


	module.exports = {
	//Content
	entry: './index.js',
	// A SourceMap without column-mappings ignoring loaded Source Maps.
	devtool: 'cheap-module-source-map',
	plugins: [
	//simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.
	new HtmlWebpackPlugin({
	title: 'Hot Module Replacement'
	}),
	//Auto replacement of page when i save some file, even css
	new webpack.HotModuleReplacementPlugin()
	],

	output: {
	path: path.join(__dirname, publicPath),
	filename: '[name].bundle.js',
	publicPath: publicPath,
	sourceMapFilename: '[name].map',
	},

	devServer: {
	port: 3000,
	host: 'localhost',
	//Be possible go back pressing the "back" button at chrome
	historyApiFallback: true,
	noInfo: false,
	stats: 'minimal',
	publicPath: publicPath,
	contentBase: path.join(__dirname, publicPath),
	//hotmodulereplacementeplugin
	hot: true
	},
	module: {
	rules: [
	{
	test: /\.css$/, use: ['style-loader', 'css-loader'],
	include: /flexboxgrid/
	//Follow instructions at https://github.com/roylee0704/react-flexbox-grid
	},
	{
	test: /\.(png\|svg\|jpg\|gif)$/,
	use: ['file-loader']
	},
	{
	test: /\.js\|.jsx?$/,
	exclude: /(node_modules)/,
	loaders: ["babel-loader"]
	}]
	},
	}