Aves

MyComponent это функция-конструктор, setState в прототипе. Нужно создать инстанс компонента.

var instance = ReactDOM.render(<MyComponent />. document.body);
instance.setState({myState: 1});

(new MyComponent()).setState() тоже по идее будет работать.

Я бы делал через middleware, примерно так:

middleware.js

import io from 'socket.io-client';

export default ({dispatch, getState}) => {
  const socket = io();
  socket.on('dispatch', action => { dispatch(action) });

  return next => action => {
    const {type, payload, meta} = action;
    if (meta && meta.socket) {
      socket.emit(type, payload);
    } else {
      next(action);
    }
  };
};

actions.js

export const handleSubmit = data => ({
  type: 'SUBMIT_TO_SERVER',
  payload: data,
  meta: {socket: true}
});

export const handleChange = event => ({
  type: 'CHANGE_VALUE',
  payload: event.target.value
});

reducer.js

export default (state = '', {type, payload}) => {
  if (type == 'CHANGE_VALUE') return payload;
  else return state;
};

form.jsx

import {connect} from 'react-redux';
import {handleChange, handleSubmit} from 'actions';

const Form = ({state, handleChange, handleSubmit}) => <form onChange={handleChange} onSubmit={handleSubmit}>
  <input type='text' value={state} />
  <button>Submit</button>
</form>;

export default connect(state => state, {handleChange, handleSubmit})(Form);

server.js

socket.on('SUBMIT_TO_SERVER', data => {
  socket.emit('dispatch', {
    type: 'CHANGE_VALUE',
    payload: data ? data.toUpperCase() : ''
  });
});

https://facebook.github.io/react/docs/forms.html#c...

class Test extends React.Component {
  state = {
    text: '',
    select: 0
  };
  handleChange = ({target: {id, value}}) => {
    const data = {[id]: value};
    if (id == 'text') data.select = value.length % 3;
    this.setState(data);
  };
  render() {
    return <div>
      <input type='text' id='text' value={this.state.text} onChange={this.handleChange} />
      <select id='select' value={this.state.select} onChange={this.handleChange}>
        <option value='0'>option1</option>
        <option value='1'>option2</option>
        <option value='2'>option3</option>
      </select>
    </div>;
  }
}

componentWillMount выполняется только один раз.
Для реагирования на изменение свойств надо такой же код добавить в componentWillReceiveProps.

Redux — это просто хранилище, обеспечивающее однонаправленный поток данных. Вот и храните в нём три массива: авторы, книги и жанры.

Нужно настроить nginx примерно так:

location / {
    root /var/www;
    index index.html;

    try_files $uri $uri/ /index.html;
}

И в index.html указать <base href="/"> для того, чтобы относительные пути работали.

https://facebook.github.io/react/docs/context.html

Button внутри form по умолчанию имеет тип submit, и соответственно это событие формы и вызывает. Проще всего добавить обработчик onSubmit в элемент form.
Другой вариант добавить type='button' в элемент button. Но похоже отключение disabled у DOM-элемента не включает компонент, нужно render заново вызывать, и поэтому придётся логику checkbox переделать, чтобы связать с кнопкой через state компонента, типа <button disabled={this.state.checkrule}>
В случае type='button' в preventDefault вообще нет необходимости, действия по умолчанию не будет.

В общем, preventDefault не срабатывает, потому что не срабатывает onClick. С получением disabled из state работает.

Насколько я понимаю, нужно полностью перемонтировать компонент. Можно обернуть в компонент верхнего уровня со свойством key и методом его изменения.

const resetable = Component => class extends React.Component {
  state = {key: 0};
  render() { 
    return <Component
      {...this.props}
      reset={() => this.setState({key: this.state.key + 1})}
      key={this.state.key}
    />;
  }
}

пример
Или без state с forceUpdate

const resetable = Component => class extends React.Component {
  render() {
    return <Component
      {...this.props}
      reset={() => this.forceUpdate()}
      key={Math.random()}
    />;
  }
}

Ну или просто в родительском компоненте сделать то же самое.

Очевидно же, что используется делегирование событий document.

<Router history={hashHistory}> заменить на browserHistory

Нужно передавать событие из arrow function expression в метод handleSubmit

<ButtonInput type='submit' onClick={ e => this.handleSubmit(e) } />

"parser": "babel-eslint" по идее