Initial commit.

Signed-off-by: Carl Kittelberger <icedream@icedream.pw>

.babelrc

@@ -0,0 +1,9 @@
+{
+	"presets": [
+		["@babel/env", {
+			"targets": {
+				"node": true
+			}
+		}]
+	]
+}

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "airbnb",
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+    }
+}

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# Deployed apps should consider commenting this line out:
+# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
+node_modules
+
+# Webpack output files
+dist/

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "webpack-example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:production": "webpack --mode production",
+    "build": "webpack --mode development",
+    "watch:production": "webpack --mode production --watch",
+    "watch": "webpack --mode development --watch"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.4.3",
+    "@babel/core": "^7.4.3",
+    "@babel/node": "^7.2.2",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.12.4",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0"
+  },
+  "dependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  }
+}

src/.babelrc

@@ -0,0 +1,6 @@
+{
+	"presets": [
+		"@babel/env",
+		"@babel/react"
+	]
+}

src/components/App.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+// const App = () => (
+//   <div className="app">
+//     <h1>Hello world.</h1>
+//     <p>Chili con carne!</p>
+//   </div>
+// );
+// export default App;
+
+export default class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      counter: 0,
+    };
+  }
+
+  getText() {
+    const { counter } = this.state;
+    return `Hello world x ${counter}.`;
+  }
+
+  increaseCounter() {
+    this.setState(previousState => ({
+      counter: previousState.counter + 1,
+    }));
+  }
+
+  resetCounter() {
+    this.setState({
+      counter: 0,
+    });
+  }
+
+  render() {
+    return (
+      <div className="app">
+        <h1>{this.getText()}</h1>
+        <a href="#" onClick={() => this.increaseCounter()}>Chili con carne!</a>
+        <br />
+        <a href="#" onClick={() => this.resetCounter()}>Set to zero</a>
+      </div>
+    );
+  }
+}

src/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from 'react-dom';
+import App from './components/App';
+
+window.addEventListener('load', () => {
+  const renderTarget = document.createElement('div');
+  renderTarget.classList.add('app-wrapper');
+  document.body.appendChild(renderTarget);
+
+  render((
+    <App />
+  ), renderTarget);
+});

webpack.config.babel.js

@@ -0,0 +1,29 @@
+import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
+export default {
+  entry: './src',
+  output: {
+    path: path.join(__dirname, 'dist'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/i,
+        include: path.join(__dirname, 'src'),
+        loader: 'babel-loader',
+      },
+    ],
+  },
+  resolve: {
+    extensions: [
+      '.jsx',
+      '.js',
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Beispiel',
+    }),
+  ],
+};