Why doesn't the connect() function from Redux work?

Question

React

I write as per the documentation:
App.js :

import React, {Component, PropTypes} from 'react';
import {render} from 'react-dom';
import {combineReducers, createStore} from 'redux';
import {connect} from 'react-redux';
import players from "./reducers/players_reduce";
import order from "./reducers/order_reduce";
import steps from "./reducers/steps_reduce";
import fields from "./reducers/fields_reduce";
import chip from "./reducers/chip_reduce";
import current_player from "./reducers/current_player_reduce";
import reload from "./reducers/reload_reduce";
import initialState from "./initialState";

let rootReducer = combineReducers({
  players, order, steps, fields, chip, current_player, reload
});

let store = createStore(rootReducer, initialState);

class App extends Component {
  constructor(props) {
    super(props);
    this.props = props;
  }

  render() {
    return (<div>
          {this.props.children};
        </div>);
  }
};

export default connect(store)(App);
export {store};

index.js :

import React, {Component} from 'react';
import {render} from 'react-dom';
import {createStore} from 'redux';
import {Provider} from 'react-redux';

import ReactIgnore from './ReactIgnore';
import App, {store} from './App';

render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);

Issues:

Uncaught Error: _registerComponent(...): Target container is not a DOM element.

But if I try to write in App.js like this:

export default connect(store)(render(App, document.getElementById("AppRoot"))); 
export {store};

<div id="AppRoot"></div>Located in index.html.
That expectedly swears:

Uncaught Error: ReactDOM.render(): Invalid component element. Instead of passing a class like Foo, pass React.createElement(Foo) or .

What's the matter? The connection, according to the documentation, does not want to work, and if you render for connect, it does not turn into <Provider/>.

Answer 1

The problem is here we render in document.getElementById('root')and in the house there is only <div id="AppRoot"></div>
The second method is fundamentally wrong, since an already rendered element is wrapped