Components' Props

Every component is like a template. This template although fixed, can vary, and every component that comes from the same class can differentiate itself through props.

Consider that all humans come from the <Human /> component. That means that all humans share some characteristics. A date they were born, a nationality, an age, a name etc. These characteristics are different though from human to human. The template is the same, the content no. These characteristics that are unique from components instance to another components instance are called props of the component.

Components props can be accessed anytime inside the component through the {this.props.nameOfPropHere} property. You can have as many as you want. These props actually parameterize a component's look. Lets see the example above:

The props are passed always when the component mounts to the DOM (that means create a new object of this class, with these props, in this case the paragraphText).

Then inside the component we use a string in order to put it to the paragraph, if not a string then this has to be put inside {} curly braces. 

You can create and render many <MyHeading /> components with different props and change the behavior and the appearance of it.