Как преобразовать этот конструктор ES6 в класический JS? Вручную без Babel?

[nathan111777]

У меня есть большой код, весь на ES6, с помощью Babel преобразовал все кроме этой части. Babel выдал код аж из 42 строк...Babel выдает больше продакшн код, чем для разработки...
Как преобразовать этот конструктор ES6 в класический JS?
Помогите вручную преобразовать.

constructor() {
    super();
    this.state = { 
         size: '',  
         sort: '', 
         cartItems: [],
         products: [],
         filteredProducts: [] };
  }

[Malleys]

У вас ошибка... возможно как-то так...

class MyClass extends React.Component {
    constructor() {
        super();
        this.state = { 
             size: '',  
             sort: '', 
             cartItems: [],
             products: [],
             filteredProducts: []
        };
    }

    render() {
        return React.createElement("p", {}, "(Empty)");
    }
}

Как вы умудрились потерять исходный код?

с помощью Babel преобразовал все кроме этой части.

Такое чувство, что вы вставляли куда-то код по частям...

весь на ES6

Я так не думаю... возможно проприетарные модули, JSX... и ES2019

Babel выдает больше продакшн код, чем для разработки...

Зависит от настроек в .babelrc

[nathan111777]

Понимаешь я знаю только класический JS:
Тоесть привык что конструктор можно записать таким образом:

function Animal(name) {
this.name = name;
this.canWalk = true;
}

var animal = new Animal("ёжик");

или так:

var animal = new function() {
this.name = "Васька";
this.canWalk = true;
};

а вот это меня напрягает:

слово "constructor" ведь для создания конструктора достаточно c большой букви написать и потом обратиться через new

и слово "super"

Мне нужно как-то передалать, потому что б было вот так примерно:
function Animal(name) {
this.name = name;
this.canWalk = true;
}

var animal = new Animal("ёжик");


А вот весь код :

https://jsfiddle.net/nathan111777/01detqw2/4/

[Malleys]

constructor так и так остаётся... Вот для примера код...

<script>
class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}

	say(message) {
		return this.name + " says: '" + message + "'";
	}
}

class Cat extends Person {
	constructor(name, age, breed) {
		super("Cat " + name, age);
		this.breed = breed;
	}

	say(message) {
		return super.say("Meow! " + message);
	}
}

const cat = new Cat("Vector", 4, "Maine Coon");
alert(cat.say("Hello!"));
</script>

Вот этот же самый пример без специального синтаксиса классов... Согласитесь, специальный синтаксис упрощает написание кода...

<script>
function Person(name, age) {
	this.name = name;
	this.age = age;
}

Person.prototype = {
	constructor: Person,

	say(message) {
		return this.name + " says: '" + message + "'";
	}
};

function Cat(name, age, breed) {
	this.__proto__.__proto__.constructor.call(this, "Cat " + name, age);
	this.breed = breed;
}

Cat.prototype = {
	__proto__: Person.prototype,
	
	constructor: Cat,

	say(message) {
		return this.__proto__.__proto__.say.call(this, "Meow! " + message);
	}
};

const cat = new Cat("Vector", 4, "Maine Coon");
alert(cat.say("Hello!"));
</script>

А код, который вы показали он не является стандартным... там, как я и предвидел используется JSX... Вы можете перевести метод render в ES2019...

render() {
		return React.createElement(
			"div",
			{ className: "container" },
			React.createElement("h1", null, "E-commerce Shopping Cart Application"),
			React.createElement("hr", null),
			React.createElement(
				"div",
				{ className: "row" },
				React.createElement(
					"div",
					{ className: "col-md-9" },
					React.createElement(Filter, {
						count: this.state.filteredProducts.length,
						handleSortChange: this.handleSortChange,
						handleSizeChange: this.handleSizeChange
					}),
					React.createElement("hr", null),
					React.createElement(Products, {
						products: this.state.filteredProducts,
						handleAddToCart: this.handleAddToCart
					})
				),

				React.createElement(
					"div",
					{ className: "col-md-3" },
					React.createElement(Basket, {
						cartItems: this.state.cartItems,
						handleRemoveFromCart: this.handleRemoveFromCart
					})
				)
			)
		);
	}