Basic react page in place

2019-05-07 19:42:39 +10:00
commit 1628b63eb2
11 changed files with 5407 additions and 0 deletions
@@ -0,0 +1,16 @@
+#directories
+logs/**
+/**/coverage
+/**/node_modules
+/**/dl
+
+#passwords
+/**/*.pwd
+auth.json
+
+#log files
+/**/*.log
+
+#output files
+*.bundle.js
+
@@ -0,0 +1,29 @@
+{
+  "name": "kingdombattles",
+  "version": "1.0.0",
+  "description": "Kingdom Battles",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack --mode=development",
+    "build": "webpack --mode=production"
+  },
+  "author": "Kayne Ruse",
+  "license": "",
+  "dependencies": {
+    "@babel/core": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-redux": "^7.0.3",
+    "react-router": "^5.0.0",
+    "redux": "^4.0.1",
+    "redux-devtools": "^3.5.0",
+    "redux-devtools-dock-monitor": "^1.1.3",
+    "redux-devtools-log-monitor": "^1.4.0",
+    "redux-thunk": "^2.3.0",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.2"
+  }
+}
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang = "en">
+  <head>
+    <meta charset = "UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/styles/shared.css"/>
+  </head>
+  <body>
+    <div id = "root"></div>
+    <script src="/app.bundle.js"></script>
+  </body>
+</html>
@@ -0,0 +1,17 @@
+/* global defaults */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font: 13pt Helvetica, Arial;
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
@@ -0,0 +1,7 @@
+export const ACTION_NAME = 'ACTION_NAME';
+
+export function actionName() {
+	return {
+		type: ACTION_NAME
+	};
+}
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default class App extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
+
+	render() {
+		return <p>Hello world</p>;
+	}
+}
@@ -0,0 +1,11 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+export default createDevTools(
+	<DockMonitor toggleVisibilityKey='ctrl-h' changePositionKey='ctrl-q' defaultIsVisible={false}>
+		<LogMonitor theme='tomorrow' />
+	</DockMonitor>
+);
+
@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+
+import DevTools from './dev_tools.jsx';
+import App from './components/app.jsx';
+
+import reducer from './reducers/reducer.jsx';
+
+var store = createStore(
+	reducer,
+	{}, //initial state
+	compose(
+		applyMiddleware(thunk),
+		DevTools.instrument()
+	)
+);
+
+//start the process
+ReactDOM.render(
+	<Provider store={store}>
+		<div>
+			<App />
+			<DevTools />
+		</div>
+	</Provider>,
+	document.querySelector("#root")
+);
@@ -0,0 +1,14 @@
+import { ACTION_NAME } from "../actions/actions.jsx";
+
+const initialState = {};
+
+export default function reducer(state = initialState, action) {
+	switch(action.type) {
+		case ACTION_NAME:
+			//DO NOTHING
+			return state;
+
+		default:
+			return state;
+	}
+}
@@ -0,0 +1,21 @@
+module.exports = {
+  entry: './src/index.jsx',
+  output: {
+    path: __dirname + '/public/',
+    filename: 'app.bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /(\.js$|\.jsx$)/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      }
+    ]
+  }
+};