Instance in React

Question

Can someone helps me in understanding wether this will be classified as instance.

So if i got the general definition correct, This would an instance be an instance of a function in javascript

function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

//Creating an instance 
var myFather = new Person("John", "Doe", 50, "blue");

Now In react, Consider our App.js file in React

import React, { Component } from "react";
import Ccockpit from "../components/cockpit/cockpit.js";

class App extends Component {
  //State

  //All the handlers

  //Render
  render() {
    return (
      <Ccockpit
        coatiitle={this.props.title}
        cocPersonState={this.state.showPerson}
        cocperson={this.state.person.length}
        toggler={this.togglerPersonHandler}
        login={this.loginHandler}
      >
        {person}
      </Ccockpit>
    );
  }
}

Here will <Ccockpit be considered as instance of our App?

Answer 1

Here will Ccockpit be considered as instance of our App?

Just for clarification - you are using JSX syntax which is later transpiled by Babel and used by React to create instances of your Objects. This:

class ComponentOne extends React.Component {
  render() {
    return <p>Hello!</p>
  }
}

const ComponentTwo = () => <p>Hello!</p>

function ComponentThree() {
  return (
    <div>
      <ComponentOne />
      <ComponentTwo />
    </div>
  )
}

<ComponentThree />

will be transpiled to this:

class ComponentOne extends React.Component {
  render() {
    return React.createElement(
      "p",
      null,
      "Hello!"
    );
  }
}

const ComponentTwo = () => React.createElement(
  "p",
  null,
  "Hello!"
);

function ComponentThree() {
  return React.createElement(
    "div",
    null,
    React.createElement(ComponentOne, null),
    React.createElement(ComponentTwo, null)
  );
}

React.createElement(ComponentThree, null);

An instance is a concrete Object in memory.

const a = {};
const b = {};
const c = {};

a, b and c are Object instances. They have their own space taken in memory. In other words:

<Ccockpit />
<Ccockpit />
<Ccockpit />

this will create three Object instances constructed with Cockpit constructor.