de314/ React+Webpack Base.md

## React+Webpack Base.md

      
    Raw
  

               React+Webpack Base.md
            
          
    React/Webpack Base

Starer code for a
react/webpack project.

  
## 00. Install Dependencies
npm init -y

npm i -S react react-dom react-router lodash moment jquery

npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react react-hot-loader webpack webpack-dev-server

npm i -g webpack webpack-dev-server

# should probably add to package.json
#    "scripts": {
#        "start": "webpack-dev-server --host 0.0.0.0 --port 3000" // or desired port
#    }

## 01. webpack.config.js
var webpack = require('webpack');
var path = require('path');

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:3000/', // or desired port
        'webpack/hot/only-dev-server',
        './src'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'client.min.js'
    },
    resolve: {
        modulesDirectories: ['node_modules', 'src'],
        extensions: ['', '.js']
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
        }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

## 02. index.html
<html>
  <head>
    <title>Base React/Webpack App</title>
  </head>
  <body>
    <div id="container">
      <div id="app"></div>
    </div>
    <script src="client.min.js"></script>
  </body>
</html>

## 03. index.js
//  ./src/index.js

import React from 'react';
import { render } from 'react-dom';
import App from 'components/app';

render(<App />, document.getElementById('app'));

## 04. app.js
//  ./src/components/app.js

import React from 'react';
import Header from './header';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      // todo
    }
  }
  render() {
    return (
      <div>
        <Header />
        <h1>Base React/Webpack App</h1>
      </div>
    );
  }
}
	npm init -y

	npm i -S react react-dom react-router lodash moment jquery

	npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react react-hot-loader webpack webpack-dev-server

	npm i -g webpack webpack-dev-server

	# should probably add to package.json
	# "scripts": {
	# "start": "webpack-dev-server --host 0.0.0.0 --port 3000" // or desired port
	# }
	var webpack = require('webpack');
	var path = require('path');

	module.exports = {
	devtool: 'inline-source-map',
	entry: [
	'webpack-dev-server/client?http://127.0.0.1:3000/', // or desired port
	'webpack/hot/only-dev-server',
	'./src'
	],
	output: {
	path: path.join(__dirname, 'public'),
	filename: 'client.min.js'
	},
	resolve: {
	modulesDirectories: ['node_modules', 'src'],
	extensions: ['', '.js']
	},
	module: {
	loaders: [
	{
	test: /\.jsx?$/,
	exclude: /node_modules/,
	loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
	}
	]
	},
	plugins: [
	new webpack.HotModuleReplacementPlugin(),
	new webpack.NoErrorsPlugin()
	]
	};
	<html>
	<head>
	<title>Base React/Webpack App</title>
	</head>
	<body>
	<div id="container">
	<div id="app"></div>
	</div>
	<script src="client.min.js"></script>
	</body>
	</html>
	// ./src/index.js

	import React from 'react';
	import { render } from 'react-dom';
	import App from 'components/app';

	render(<App />, document.getElementById('app'));
	// ./src/components/app.js

	import React from 'react';
	import Header from './header';

	export default class App extends React.Component {
	constructor(props) {
	super(props);

	this.state = {
	// todo
	}
	}
	render() {
	return (
	<div>
	<Header />
	<h1>Base React/Webpack App</h1>
	</div>
	);
	}
	}