ReactJS: Where does "props" come from?

Question

I'm currently doing the official reactJS tutorial: https://reactjs.org/tutorial/tutorial.html#passing-data-through-props

I already like reactJS, although I definitely don't understand everything thats going on yet. One of those things is "props". I'm familiar with OOP and I know what properties are. I also have at least some understanding about inheritance. However, what's setting me of is that seemingly, "props" comes out of nowhere here:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

Usually, when I fiddled around with OOP in Javascript, I made my classes inherit by putting the parent object into the parameter when instantiating an object, for example:

var ParentObjectInstance = new ParentObject()
var ChildObjectInstance = new ChildObject(ParentObjectInstance)

I never used the "X extends Y" syntax, which uses super inside the constructor, like in the tutorials code above. However, after I understood what super() does (calling the parent's constructor), I wondered where the "props" in the childs constructor parameter come from? Oo

In the whole tutorial code, no object is ever instantiated from the classes, see here: https://codepen.io/gaearon/pen/gWWZgR?editors=0010

Therefore, I wondered how the childs constructor parameter can ever be filled by anything? Oo

Answer 1

I'm familiar with OOP and I know what properties are.

React props are not OO properties.

However, what's setting me of is that seemingly, "props" comes out of nowhere here

constructor(props) {
    ...
}

You are defining a function. props is the name given to the first argument. As always, you can name an argument whatever you like.

(props is a sensible name here because the super constructor will assign the value of it to this.props later on).

The value of the argument is determined by the code which calls the function, which isn't in the code you've quoted.

Keep reading the tutorial. The part you are on is explaining how to make a component that can do something with the props it is passed.

Later it shows you how to use that component.

In the whole tutorial code, no object is ever instantiated from the classes

Yes, it is. It just uses JSX syntax to do it:

renderSquare(i) {
    return <Square value={i} />;
}

The props are passed as attributes in the JSX that loads the component.