first map component

src/containers/App.jsx

@@ -1,12 +1,16 @@
 import React from 'react';
-import { Map } from "$containers/Map";
+
+import { Map } from '../modules/map';
+import { MapScreen } from "$styles/mapScreen";
 
 export class App extends React.Component {
-  render(){
-    return (
-      <div>
+  componentDidMount() {
+    this.map = new Map('map');
+  }
 
-      </div>
-    )
+  render() {
+    return (
+      <MapScreen />
+    );
   }
 };

src/index.js

@@ -2,28 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { App } from '$containers/App';
-import { Provider } from 'react-redux';
-
-import { ConnectedRouter } from 'react-router-redux';
-import { PersistGate } from 'redux-persist/integration/react';
-
-// import { configs } from '$constants/moment';
-import configureStore, { history } from '$redux/store';
-
-const { store, persistor } = configureStore();
-
-// import './js/common';
-// import './js/script';
-import './css/style.css';
 
 export const Index = () => (
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <ConnectedRouter history={history}>
-        <App />
-      </ConnectedRouter>
-    </PersistGate>
-  </Provider>
+  <App />
 );
 
 ReactDOM.render(<Index />, document.getElementById('index'));

src/modules/map.js

@@ -0,0 +1,22 @@
+import L from "leaflet";
+
+import { providers } from "$constants/providers";
+
+import 'leaflet/dist/leaflet.css';
+
+export class Map {
+  constructor(container) {
+    this.map = L.map(container, {
+      editable: true,
+      layers: [
+
+      ]
+    }).setView([55.0153275, 82.9071235], 13);
+
+    this.tileLayer = L.tileLayer(providers.default, {
+      attribution: 'Независимое Велосообщество',
+      maxNativeZoom: 18,
+      maxZoom: 18,
+    }).addTo(this.map);
+  }
+}