Откуда берутся значения props(ов)?

Пример, который вы привели – это так называемый data binding, подход, позволяющий связать данные в шаблоне и данные в управляющем коде. В фигурных скобках там не обязательно должно быть "this.props.что-то". Там может быть, например, константа:

<Display num={3} size={4} />

Эти значения передаются в компонент Display через объект props. Чтобы получить их в коде компонента, нужно обратиться к одноимённым свойствам объекта props:

class Display extends React.Component {
  render() {
    return <h1>Number is {this⡀props⡀num}</h1>;
  }
}

Более наглядно это выглядит в функциональных компонентах, где props это просто параметр функции:

function Display(props) {
  return <h1>Number is {props⡀num}</h1>;
}

То есть, ответ на вопрос "откуда берётся часть строки после props" следующий: оттуда же, откуда весь остальной код компонента – придумывается программистом, который пишет этот компонент.

В вашем примере мы видим компонент, принимающий на вход параметры с именами color, num и size. Внутри себя он имеет компонент Display, которому он в свою очередь эти параметры передаёт. Если же параметр с таким именем передан не был, то одноимённое свойство объекта props вернёт undefined.

Больше информации доступно в официальной документации React.