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?

You are creating an instance of Ccockpit so yes. you could create multiple Ccockpit elements in your code, each being an instance. — Mike Cheel, May 23 '18 at 13:40
I would rather say *instance constructed with the function*, but in the react example you technically don't construct `Ccockpit` you just pass it to react and react does that for you. So `` is "kind of an instance" of `Ccockpit` — Jonas Wilms, May 23 '18 at 13:49
Yes. React will call the constructor on your React class: https://reactjs.org/docs/react-component.html#constructor — lux, May 23 '18 at 14:06
Cockpit is not an instance of App, it's just something that App renders (the result of the Ccockpit render function). However the Cockpit object is instantiated under the hood as React render's your app. And just call it Cockpit, we don't tend to do a C prefix in JavaScrpt, and in React we sometimes change components between classes and functions (a component can be a function not just a class) — Dominic, May 23 '18 at 14:08

score 2 · Accepted Answer · answered May 23 '18 at 19:02

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.

Instance in React

1 Answers1