No entiendo cómo funcionan las props y cómo saben el valor de las cosas que estamos usando, ¿alguien podría explicarme?

Hola Miguel. Recordemos una función en JS. Podemos crear una función para sumar que reciba dos parámetros (numero1, numero2) y que nos retorne la suma de ambos números. .

const sumar = (numero1, numero2) => {
	return numero1 + numero2;
}

Aquí creamos esa función sumar y nos podrá ser útil siempre que la necesitemos, pues los valores se los vamos a pasar cada que ejecutemos la función. Por ejemplo: .

sumar(2,3)
sumar(5,5); 

Cuando llamamos a nuestra función, debemos pasarle como argumentos los números que queremos sumar para que se realice la operación matemática y nos devuelva el resultado. . Regresando a React, recordemos que un componente funcional básicamente es una función de JS, y como cualquier función de JS puede o no necesitar unos parámetros (que en React son conocidas como props - o propiedades). En caso de tener props el componente, básicamente se les van a pasar cuando utilicemos el componente (es decir, sería lo mismo como cuando nosotros usamos una función normal en JS, solo le damos los argumentos cuando llamamos a esa función). Ej:

//Creamos un componenteA que va a renderizar un ComponenteB. El componente B recibe una propiedad que es mensaje, el cual lo va a mostrar en una etiqueta <p>

const ComponenteA = () => {
	return (
		<ComponenteB mensaje="Miguel, soy una prop" />
	);
} 

//en este caso, cuando desde el componenteA llamo a mi componenteB, le paso la propiedad que quiero o necesito(un mensaje en este ejemplo) y ese mensaje que le pasé lo recibe el ComponenteB para usarlo:

const ComponenteB = (props) => {
	return (
		<p>{props.mensaje}
	);
}

//El componenteB usó el mensaje para luego mostrarlo en una etiqueta <p>

. Básicamente una prop (o props en plural :D) viene siendo un parametro que definimos en nuestra función (componente)