How data is passed to components in React?

Here is how data is passed to components in React?

App.js

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';


class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Vinit Khandelwal</h1>
        <p>And here is my resume</p>
        <Person name="VK" age="29" />
        <Person name="HK" age="28" >My Hobby: Shopping</Person>
      </div>
    );
  }
}

export default App;

Person > Person.js

import React from 'react';

const person = (props) => {
    return (
        <div>
            <p>I am {props.name}. I am {props.age} years old!</p>
            <p>{props.children}</p>
        </div>
    );
}

export default person;

That is how data is passed to components and displayed.

It displays an output as follows:

Vinit Khandelwal

And here is my resume

I am VK. I am 29 years old!

I am HK. I am 28 years old!

My Hobby: Shopping