Q:

Web3 not defined

I am following this tutorial here:
https://medium.com/@merunasgrincalaitis/the-ultimate-end-to-end-tutorial-to-create-and-deploy-a-fully-descentralized-dapp-in-ethereum-18f0cf6d7e0e
after running webpack I try  to view the page but it returns a blank page. 
When I check the developers console, I get the following error:

Uncaught ReferenceError: web3 is not defined
      at new App (build.js:10665)
      at constructClassInstance (build.js:19093)
      at updateClassComponent (build.js:20577)
      at beginWork (build.js:20963)
      at performUnitOfWork (build.js:22962)
      at workLoop (build.js:23026)
      at HTMLUnknownElement.callCallback (build.js:13280)
      at Object.invokeGuardedCallbackDev (build.js:13319)
      at invokeGuardedCallback (build.js:13176)
      at renderRoot (build.js:23104) build.js:22485 The above error occurred in the  component:
      in App
Consider adding an error boundary to your tree to customize error
  handling behavior. Visit https://fb.me/react-error-boundaries to learn
  more about error boundaries. logCapturedError @ build.js:22485
  build.js:23732 Uncaught Error: A cross-origin error was thrown. React
  doesn't have access to the actual error object in development. See
  https://fb.me/react-crossorigin-error for more information.
      at Object.invokeGuardedCallbackDev (build.js:13326)
      at invokeGuardedCallback (build.js:13176)
      at renderRoot (build.js:23104)
      at performWorkOnRoot (build.js:23752)
      at performWork (build.js:23705)
      at requestWork (build.js:23616)
      at scheduleWorkImpl (build.js:23470)
      at scheduleWork (build.js:23427)
      at scheduleTopLevelUpdate (build.js:23931)
      at Object.updateContainer (build.js:23969)

This is strange as my index.js (the file from which I am building from ) has 
import Web3 from 'web3'

I have even tried swapping for
Web3 = require('web3')

but to no avail. 
These are the references to web3 in the js file:
import React from 'react'
import ReactDOM from 'react-dom'
import Web3 from 'web3'
import './../css/index.css'

class App extends React.Component {

    /*
    Constructor and set the initial state of the application
    */

    constructor(props){
        super(props)
        this.state = {
            lastWinner: 0,
            numberOfBets: 0,
            minimumBet: 0,
            totalBet: 0,
            maxAmountOfBets: 0,
        }

        /*
        Checking to see if Web3 variable we imported is defined or not
        */

        if(typeof web3 != 'undefined'){
            console.log("Using web3 detected from external source like Metamask")
            this.web3 = new Web3(web3.currentProvider)
        }else{
            this.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
        }

What am I doing wrong?

A:

Try it this way:
import React, { Component } from 'react';
import web3 from './web3';

class App extends Component {
  state = { lastWinner: 0, numberOfBets: 0, minimumBet: 0, totalBet: 0, maxAmountOfBets: 0 };

  async componentDidMount() {
    const lastWinner = await blackjack.methods.lastWinner().call();
    const numberOfBets = await blackjack.methods.getNumberOfBets().call();

    this.setState({ lastWinner, numberOfBets });
  }

I would create a separate file to house all configuration code around the web3 library that would look like this:
import Web3 from 'web3';

const web3 = new Web3(window.web3.currentProvider);

export default web3;

Now, I utilized ES2016 way of initializing state where you no longer need the constructor() function. 
You want to setup your own local instance of web3 and rip out the provider from the injected copy that is coming from Metamask and this will allow your instance of web3 to automatically connect to the Rinkeby test network and make use of all the accounts assigned to the Metamask extension.
So I created a new instance of web3 and simultaneously ripped out the injected copy of web3 provided by metamask. To rip out the provider is where you see the reference to window global variable.
Metamask injects web3 onto web3 global variable. The currentProvider has been pre configured for the Rinkeby test network.
You can then import it to the App file as I displayed above and then console it out to ensure it works like so:
import React, { Component } from 'react';
import web3 from './web3';

class App extends Component {
  state = { lastWinner: 0, numberOfBets: 0, minimumBet: 0, totalBet: 0, maxAmountOfBets: 0 };

  async componentDidMount() {
    const lastWinner = await blackjack.methods.lastWinner().call();
    const numberOfBets = await blackjack.methods.getNumberOfBets().call();

    this.setState({ lastWinner, numberOfBets });
  }

  render() {
    console.log(web3.version);
  }

