new state

src/assets/css/app.css

-/**
- * Базовый CSS
- */
-
+/* Библиотеки */
 @import url( '../../../node_modules/swiper/dist/css/swiper.min.css' );
+
+/* CSS */
 @import url('../../components/common/common.css');
 @import url('../../components/swiper/swiper.css');

src/components/button/button.css

-:root {
-	--buttonText: #fff;
-	--buttonBg: #f00;
-}
-
-.button {
-	color: var(--buttonText);
-	background-color: var(--buttonBg);
-	font-family: var(--font);
-}
\ No newline at end of file

src/components/component/index.js

@@ -24,17 +24,49 @@ export default class Component {
 		// дефолтное состояние
 		this.state = {};
 
-		// отрисовываем
-		this.render();
+		this.setState();
 	}
 
 
 	/**
 	 * Установка состояния
 	 */
-	setState( state = {} ){
-		Object.assign( this.state, state );
-		this.render();
+	setState = ( newState = {} ) => {
+
+		console.log( 'Component setState(): Compare states', this.objectEquals( this.state, newState ), this.state, newState );
+
+		if( !this.objectEquals( this.state, newState ) ){
+			Object.assign( this.state, newState );
+			this.render();
+		}
+	}
+
+
+	/**
+	 * Сравниваем два объекта
+	 */
+	objectEquals = (x, y) => {
+		if (x === null || x === undefined || y === null || y === undefined) { return x === y; }
+		// after this just checking type of one would be enough
+		if (x.constructor !== y.constructor) { return false; }
+		// if they are functions, they should exactly refer to same one (because of closures)
+		if (x instanceof Function) { return x === y; }
+		// if they are regexps, they should exactly refer to same one (it is hard to better equality check on current ES)
+		if (x instanceof RegExp) { return x === y; }
+		if (x === y || x.valueOf() === y.valueOf()) { return true; }
+		if (Array.isArray(x) && x.length !== y.length) { return false; }
+	
+		// if they are dates, they must had equal valueOf
+		if (x instanceof Date) { return false; }
+	
+		// if they are strictly equal, they both need to be object at least
+		if (!(x instanceof Object)) { return false; }
+		if (!(y instanceof Object)) { return false; }
+	
+		// recursive object equality check
+		var p = Object.keys(x);
+		return Object.keys(y).every(function (i) { return p.indexOf(i) !== -1; }) &&
+			p.every(function (i) { return objectEquals(x[i], y[i]); });
 	}
 
 

src/components/header/index.html

-<div class="header">
-
-	<button class="button">Alert</button>
-
-</div>
\ No newline at end of file

src/components/header/index.js

-import Component from '../component';
-
-export default class Header extends Component {
-
-	constructor( props = {
-		buttonSelector: '.header .button'
-	} ){
-		super( props );
-
-		this.state.button = document.querySelector( this.props.buttonSelector );
-		this.state.button.addEventListener( 'click', this.buttonClick );
-	}
-
-	buttonClick(){
-		alert(1);
-	}
-	
-	render(){
-		return true;
-	}
-}
\ No newline at end of file

src/components/swiper/index.js

@@ -10,9 +10,7 @@ export default class SwiperSlider extends Component {
 	constructor( props = {
 		selector: '.swiper-container',
 		options: {
-			// Optional parameters
-			// direction: 'vertical',
-			loop: true,
+			spaceBetween: 10,
 		
 			// If we need pagination
 			pagination: {
@@ -29,15 +27,11 @@ export default class SwiperSlider extends Component {
 			scrollbar: {
 			  el: '.swiper-scrollbar',
 			},
-
-			slidesPerView: 1
 		}
 	} ){
 		super( props );
 
-		this.state.swiper = new Swiper( this.props.selector, this.props.options );
-
-		this.loadData( this.state );
+		this.loadData();
 	}
 
 	/**
@@ -53,7 +47,7 @@ export default class SwiperSlider extends Component {
 				'variables': {
 					'after': null,
 					'before': null,
-					'first': 4,
+					'first': 10,
 					'last': null,
 					'locale': 'RU'
 				},
@@ -89,30 +83,42 @@ export default class SwiperSlider extends Component {
 					}`
 			})
 		})
-			.then( ( response ) => {
-				return response.json();
-			})
-			.then( ( data ) => {
+		.then( ( response ) => {
+			return response.json();
+		})
+		.then( ( data ) => {
 
-				data.data.albums.edges.forEach( ( album, index ) => {
+			let slides = [];
 
-					const slide = `<div class="swiper-item">
-						<h3>Swiper ${index}</h3>
-						<p>Swiper ${index} slide</p>
-						<img src="${album.node.photos[0].resized.url}" alt="${album.node.title}" />
-					</div>`;
+			data.data.albums.edges.forEach( ( album, index ) => {
 
-					this.state.swiper.appendSlide( slide );
-					
-				});
+				const slide = `<div class="swiper-item">
+					<h3>Swiper ${index}</h3>
+					<p>Swiper ${index} slide</p>
+					<img src="${album.node.photos[0].resized.url}" alt="${album.node.title}" />
+				</div>`;
 
-				this.state.swiper.update();
+				slides[index] = slide;
+				
+			});
 
-				console.log(this.state.swiper)
+			console.log( slides );
 
+			this.setState({
+				slides: slides
 			});
+
+		});
 	}
 
+	render(){
+
+		// console.log( this.state.slides );
 
+		this.swiper = new Swiper( this.props.selector, this.props.options );
+		// this.swiper.appendSlide( this.state.slides );
+		console.log( 'Swiper class: render() called' );
+
+	}
 
 }
\ No newline at end of file

src/components/swiper/swiper.css

 .swiper-container {
-	width: 600px;
-	height: 300px;
+
+}
+
+.swiper-item {
+	width: 200px;
 }
 
 .swiper-item img {