it works!

.babelrc

@@ -1,3 +1,4 @@
 {
     "presets" : ["@babel/preset-env", "@babel/preset-react"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
 }

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --open --mode development --host 0.0.0.0",
+    "s": "webpack --mode development --config webpack.config.js",
+    "start": "webpack-dev-server --open --mode development --host 0.0.0.0 --config webpack.config.js",
     "mobile": "webpack-dev-server --open --mode development --host 0.0.0.0 --public 192.168.1.8:8080",
     "build": "webpack --mode production"
   },
@@ -20,31 +21,31 @@
   },
   "homepage": "https://github.com/anzzstuff/kanaquiz#readme",
   "devDependencies": {
-    "@babel/core": "^7.1.2",
+    "@babel/core": "^7.1.6",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
-    "autoprefixer": "^6.3.7",
+    "autoprefixer": "^9.3.1",
     "babel-loader": "^8.0.4",
-    "css-loader": "^0.27.3",
+    "css-loader": "^1.0.1",
-    "file-loader": "^0.10.1",
+    "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
-    "postcss": "^5.0.21",
+    "postcss": "^7.0.5",
-    "postcss-loader": "^1.3.3",
+    "postcss-loader": "^3.0.0",
-    "precss": "^1.4.0",
+    "precss": "^3.1.2",
-    "react-hot-loader": "^1.3.0",
+    "react-hot-loader": "^4.3.12",
-    "style-loader": "^0.14.1",
+    "style-loader": "^0.23.1",
     "sw-precache-webpack-plugin": "^0.11.5",
-    "url-loader": "^0.5.7",
+    "url-loader": "^1.1.2",
-    "webpack": "^4.24.0",
+    "webpack": "^4.25.1",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
-    "postcss": "^5.1.0",
+    "prop-types": "^15.6.2",
-    "prop-types": "^15.5.8",
+    "react": "^16.6.3",
-    "react": "^15.2.1",
+    "react-dom": "^16.6.3",
-    "react-addons-css-transition-group": "^15.3.0",
+    "react-toggle-switch": "^3.0.4",
-    "react-dom": "^15.2.1",
+    "react-transition-group": "^2.5.0"
-    "react-toggle-switch": "^2.1.2"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('precss'),
+    require('autoprefixer')
+  ]
+}

src/components/Game/ShowStage.jsx

@@ -1,52 +1,17 @@
 import React, { Component } from 'react';
 import './ShowStage.scss';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
 class ShowStage extends Component {
-    constructor(props) {
+  state = {
-        super(props);
+    show: false,
-        this.state = {
+    entered: false
-            stageContent: ''
-        }
-        this.showStage = this.showStage.bind(this);
-        this.removeStage = this.removeStage.bind(this);
-    }
-
-    removeStage() {
-        this.setState({stageContent: ''});
-        clearTimeout(this.timeoutID);
-        this.timeoutID = setTimeout(this.props.handleShowQuestion, 1000) // how soon we go to question (1000)
-    }
-
-    showStage() {
-        let stageDescription;
-        let stageSecondaryDescription = false;
-        if(this.props.stage==1) stageDescription = 'Choose one';
-        if(this.props.stage==2) { stageDescription = 'Choose one'; stageSecondaryDescription = 'Reverse'; }
-        if(this.props.stage==3) stageDescription = 'Write the answer';
-        if(this.props.stage==4) { stageDescription = 'Write the answer'; stageSecondaryDescription = 'Three at once'; }
-        let stageContent = (<div className="text-center show-stage">
-                <h1>Stage {this.props.stage}</h1>
-                <h3>{stageDescription}</h3>
-                {stageSecondaryDescription?<h4>{stageSecondaryDescription}</h4>:''}
-            </div>);
-
-        if(this.props.stage==5) {
-            stageContent = (<div className="text-center show-end">
-                <h1>Congratulations!</h1>
-                <h3>You have passed all 4 stages.</h3>
-                <h4>Would you like to keep playing or go back to menu?</h4>
-                <p><button className="btn btn-danger keep-playing" onClick={()=>this.props.lockStage(4)}>Keep playing</button></p>
-                <p><button className="btn btn-danger back-to-menu" onClick={this.props.handleEndGame}>Back to menu</button></p>
-            </div>)
-        }
-        this.setState({stageContent: stageContent});
   }
 
   componentDidMount() {
-        if(this.props.stage<=4)
+    this.setState({show: true});
+    if(this.props.stage <= 4)
       this.timeoutID = setTimeout(this.removeStage, 1200); // how soon we start fading out (1500)
-        this.showStage();
     window.scrollTo(0,0);
   }
 
@@ -54,11 +19,48 @@ class ShowStage extends Component {
     clearTimeout(this.timeoutID);
   }
 
-    render() {
+  removeStage = () => {
+    this.setState({show: false});
+    clearTimeout(this.timeoutID);
+    this.timeoutID = setTimeout(this.props.handleShowQuestion, 1000) // how soon we go to question (1000)
+  }
+
+  showStage() {
+    let stageDescription;
+    let stageSecondaryDescription = false;
+
+    if(this.props.stage==1) stageDescription = 'Choose one';
+    else if(this.props.stage==2) { stageDescription = 'Choose one'; stageSecondaryDescription = 'Reverse'; }
+    else if(this.props.stage==3) stageDescription = 'Write the answer';
+    else if(this.props.stage==4) { stageDescription = 'Write the answer'; stageSecondaryDescription = 'Three at once'; }
+    else if(this.props.stage==5)
       return (
-            <ReactCSSTransitionGroup transitionName="stage" transitionEnterTimeout={900} transitionLeaveTimeout={900}>
+        <div className="text-center show-end">
-                {this.state.stageContent}
+          <h1>Congratulations!</h1>
-            </ReactCSSTransitionGroup>
+          <h3>You have passed all 4 stages.</h3>
+          <h4>Would you like to keep playing or go back to menu?</h4>
+          <p><button className="btn btn-danger keep-playing" onClick={()=>this.props.lockStage(4)}>Keep playing</button></p>
+          <p><button className="btn btn-danger back-to-menu" onClick={this.props.handleEndGame}>Back to menu</button></p>
+        </div>
+      );
+
+    return (
+      <div className="text-center show-stage">
+        <h1>Stage {this.props.stage}</h1>
+        <h3>{stageDescription}</h3>
+        { stageSecondaryDescription ? <h4>{stageSecondaryDescription}</h4> : '' }
+      </div>
+    );
+  }
+
+  render() {
+    const content = this.showStage();
+    const { show } = this.state;
+
+    return (
+      <CSSTransition classNames="stage" timeout={{enter: 900, exit: 900}} in={show} unmountOnExit>
+        {state => content}
+      </CSSTransition>
     );
   }
 }

src/components/Game/ShowStage.scss

@@ -30,11 +30,11 @@
   transition: opacity 1s ease-in;
 }
 
-.stage-leave {
+.stage-exit {
   opacity: 1;
 }
 
-.stage-leave.stage-leave-active {
+.stage-exit.stage-exit-active {
   opacity: 0.01;
   transition: opacity 1s ease-in;
 }

webpack.config.js

@@ -1,12 +1,52 @@
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+
 module.exports = {
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: './src/index.html',
+      filename: './index.html'
+    })
+  ],
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: {
-          loader: "babel-loader"
+          loader: 'babel-loader'
         }
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1
+            }
+          },
+          {
+            loader: 'postcss-loader'
+          }
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/,
+        loader: 'url-loader?limit=25000'
+      }, 
+      {
+        test: /\.(eot|ttf)$/,
+        loader: 'file-loader'
       }
     ]
   }