# import React and ReactDOM
import ReactDOM from 'react-dom';
import React from 'react';
ReactDOM and React both are objects.
'react-dom' are interacting with the DOM.

# why use extends
In javascript:--
class Room{
doors(){
console.log("doors are blacks");
}

}
class House extends Room{
things(){
console.log("essential material");
}
}
const myHouse = new House();
myHouse.doors();

class House inherit kar rahi hai class Room ki properties.

In React:---
class Box extends React.Component{
//code goes here
}
class Box inherit all the properties of the class React.Component ki.

# why use new
class Room{
doors(){
console.log("doors are blacks");
}

}
class House extends Room{
things(){
console.log("essential material");
}
}
const myHome = new House();
myHome.things();
myHome.doors();
myHome;

Note:--if we call
House; or
console.log(House) or
House(); its give an error.

House is a class object and object ko direct call nahi kar sakte isliye House ko ek function banate hai new ke sath or ek varible main store kar lete hai.ab use varible ko call kar sakte hai. like this
const myHome = new House();
myHome.things();
myHome.doors();
myHome;

# object
object have two property or can say object is a collection of variables and functions.
1- variable
2-function/ action to perform any task

# why use Constuctor
in React:----

class Box extends React.Component{
constructor();
}

1-constructor ka use us class ka object initialize karne ke liye karte hai.or
2-constructor is a special metod of a class for creating and initializing an object of that class.

Syntax:-
constructor(argument0, argument1) { ... }
class components can access their props() or their properties with the (this.props) object.

in Javascript:----
class House {
constructor( gates, garden ) {
this.gates = gates;
this.garden = garden;
}

openDoor() {
console.log(this.gates, 'Door is opening......');
}
}
const myHome= new House(8,2);
console.log(myHome.gates);
console.log(myHome.garden);
console.log(myHome.openDoor());
console.log(myHome);

example:-2
class Polygon {
constructor(length, name) {
this.length = length;
this.name = 'Polygon';
}

myname() {
console.log("Hi i am"+ " " +this.name);
}
}
const poly = new Polygon(60);
console.log(poly);
poly.myname();

class Square extends Polygon{
constructor(width, height){
this.width = width;
this.height = height;
}
area() {
console.log(this.height * this.width);
}
}
const squar = new Square(10,20);
console.log(squar);
squar.area();

# what is class in javascript?/
class in css for selecting elemnt and
class in java script is object
# ReactDOM.render()?
# difference in render and ReactDom.render?
# defaultProps?

class LargeHouse extends House {
constructor(props) {
super(props);
this.bigGate = props.bigGate;
}

bigGateOpen() {
console.log(this.gates, 'Door is opening......, here number of', this.bigGate);
}
}

const myLargeHouse = new LargeHouse((gates: 10, bigGate: 2);
myLargeHouse.bigGateOpen();