const BasicFunctionalComponent = props => { return ( <div> {constantVariable} </div> ) } export default BasicFunctionalComponent const constantVariable = '**how I am initialized**?'en el ejemplo anterior, solo creo un componente funcional básico y, después de exportarlo, solo inicialicé una variable constante establecida como una cadena. luego lo usé dentro de JSX arriba esperado para arrojar el error 'No se puede acceder a 'constantVariable' antes de la inicialización'. pero todo está bien
Porque BasicFunctionalComponent se llamará mucho más tarde. Es básicamente una función asincrónica desde la perspectiva de este archivo que nos mostraste. En el momento en que se llame a esa función, se definirá constantVariable .
Empecemos con un ejemplo mucho más claro:
const fx = () => { console.log(v) } // fx() // Call it here and it throws error const v = 1 // fx() // Call it here and it's ok console.log('Fin!') La razón por la que no arroja ReferenceError es básicamente porque la función del componente no se llama antes de la inicialización de la variable constantVariable .