React "document not defined" when including script
<p>I'm using ReactJS with Routing, ES6, Babel and ESLint. 
On click I want to add a CSS class using the classnames library, but I can't even use the <code>document.querySelector</code>. My whole application crashes and prints the error: <code>ReferenceError: document is not defined</code></p>

<pre><code>import React from 'react';
import { connect } from 'react-redux';

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

        const sideNavToggleButton = document.querySelector('.js-toggle-menu');
        sideNavToggleButton.addEventListener('click', () =&gt; {
            console.info('clicked');
        });
    }

    render() {
        return (
            &lt;header&gt;
                &lt;button role="tab" className="header__menu js-toggle-menu"&gt;Toggle nav menu&lt;/button&gt;
                &lt;h1 className="header__title"&gt;App Shell&lt;/h1&gt;
            &lt;/header&gt;
        );
    }
}
</code></pre>

<p>After some research I found out it might be my ESLint settings missing some environments, but after adding browser the application is still breaking.</p>

<pre><code>module.exports = {
    'parser': 'babel-eslint',
    'plugins': [
        'react'
    ],
    'rules': {
        'indent': [2, 'tab'],
        'max-len': 0,
        'no-console': [2, { allow: ['info', 'error']}],
        'no-param-reassign': 0,
        'react/jsx-indent': [2, 'tab'],
        'react/jsx-indent-props': [2, 'tab'],
        'no-new': 0
    },
    'env': {
        'browser': true,
        'node': true
    }
};
</code></pre>

<p>Any idea?</p>