Domina React.createElement con una respuesta clara, ejemplos de JSX y diferencias clave entre elemento, componente y DOM. Prepárate para la entrevista.
La mayoría de los candidatos que tropiezan con preguntas de entrevista sobre `React.createElement` ya conocen JSX. Ahí está la ironía. Han escrito cientos de componentes, entienden las props, saben qué hace un hook; pero cuando un entrevistador pregunta “¿qué devuelve realmente `React.createElement`?”, la respuesta se vuelve borrosa en unos diez segundos. Esta guía corrige eso con una respuesta clara de 30 segundos primero y, después, con exactamente la profundidad de apoyo que necesita para defenderla ante preguntas de seguimiento.
Dé primero la respuesta de 30 segundos, no la clase magistral
La respuesta que suena segura sin parecer memorizada
Aquí tiene la respuesta que funciona en una entrevista sobre `React.createElement`. Diga algo parecido a esto:
"JSX es azúcar sintáctico que Babel compila a llamadas a `React.createElement` antes de que React se ejecute. `React.createElement` toma un tipo —ya sea una cadena como 'div' o un componente de función o de clase— más un objeto de props y cualquier hijo, y devuelve un objeto plano de JavaScript llamado elemento de React. Ese objeto describe lo que debería aparecer en pantalla. El reconciliador de React lee esos objetos y decide qué crear, actualizar o eliminar en el DOM real. Así que `React.createElement` construye la descripción; `ReactDOM` maneja la página."
Eso dura menos de 60 segundos. Nombra JSX, la transformación, el objeto devuelto y la ruta de renderizado sin enredarse en detalles internos. Ahora el entrevistador tiene un modelo mental completo y un punto de partida claro para el seguimiento.
Qué hace que una respuesta breve suene mal
El error estructural que cometen la mayoría de los candidatos es tratar la pregunta como una invitación a explicar la historia de React. Empiezan con “JSX se introdujo porque escribir `React.createElement` a mano era verboso” y, cuando llegan a lo que realmente devuelve la función, el entrevistador ya ha emitido un juicio. El otro fallo es saltar directamente a Fiber o al virtual DOM, lo cual suena impresionante pero se salta la definición básica que la pregunta pedía.
La tarea real es nombrar tres cosas en una sola pasada: JSX se compila a `createElement`, `createElement` devuelve un objeto plano de elemento y React usa ese objeto para actualizar el DOM. Todo lo demás queda para las preguntas de seguimiento.
Cómo se ve esto en la práctica
Imagine un momento de entrevista simulada de 60 segundos. El entrevistador pregunta: "¿Puede explicar qué hace `React.createElement`?" El candidato responde con el párrafo anterior: tipo, props, hijos, objeto plano, reconciliador. El entrevistador hace un seguimiento: "Entonces, ¿JSX es un componente?"
El candidato no se inmuta: "No — JSX es sintaxis. Se compila a una llamada a `createElement`. Un componente es la función o clase que JSX puede referenciar como argumento `type`, pero son capas diferentes."
Esa respuesta de seguimiento tarda cinco segundos porque la respuesta original ya estableció el vocabulario. La documentación de React sobre la transformación de JSX y la especificación de elementos de React tratan esta distinción como algo fundamental, y los entrevistadores que conocen React también.
Muestre el paso de JSX a React.createElement sin convertirlo en un recorrido por el compilador
JSX es el atajo, no lo que React entiende
La confusión habitual es que JSX se siente como React: está en todos los archivos de React, se parece a la interfaz y es donde pasa la mayor parte de su tiempo. Pero JSX es una transformación en tiempo de compilación. Para cuando se ejecuta el runtime de React, cada expresión JSX ya se ha convertido en una llamada a `React.createElement` mediante Babel o el compilador de TypeScript. React nunca ve JSX. Solo ve llamadas a funciones.
Esa distinción —de JSX a `React.createElement`— es el núcleo de la respuesta, y decirlo con claridad es lo que separa a un candidato que usa React de uno que lo entiende.
Cómo se ve esto en la práctica
Tome este JSX:
Babel lo compila a:
El primer argumento es el tipo —la cadena `"button"` porque se trata de una etiqueta HTML nativa. El segundo argumento es el objeto de props. El tercer argumento es el hijo: la cadena de texto "Enviar". Si hubiera varios hijos, serían argumentos adicionales o un array en `props.children`. El REPL de Babel le permite pegar JSX y ver la salida compilada en tiempo real; es la forma más rápida de hacer que esta transformación se sienta concreta y no teórica.
Por qué esto importa en una entrevista
Si puede seguir esa transformación con claridad, deja de sonar como alguien que memorizó una definición y empieza a sonar como alguien que entiende el flujo. Las preguntas de seguimiento del entrevistador —"¿y si el tipo es un componente?" o "¿dónde terminan los hijos?"— quedan todas respondidas por el mismo modelo mental que acaba de demostrar. No necesita memorizar respuestas nuevas; solo amplía el mismo recorrido.
Describa el objeto elemento de React antes de llamarlo de otra manera
El modelo de objeto plano que es lo que realmente están evaluando los entrevistadores
`React.createElement` devuelve un objeto elemento de React: un objeto plano de JavaScript, no un nodo DOM, no una instancia de componente, ni nada exótico. Ese objeto tiene una estructura predecible: un campo `type`, un campo `props` que incluye los hijos, un `key` y un `ref`. Cuando hace `console.log` de un elemento de React en una app en ejecución, eso es exactamente lo que ve.
Esto es lo que realmente están evaluando los entrevistadores cuando preguntan por `createElement`. Quieren saber si usted entiende que React opera sobre una descripción de la interfaz —el objeto elemento— en lugar de hacerlo directamente sobre el DOM.
Cómo se ve esto en la práctica
Ejecute esto en un entorno de pruebas de React:
La salida se parece aproximadamente a esto:
En una respuesta de entrevista, los campos que importan son `type`, `props` y `children` (que vive dentro de `props`). El símbolo `$$typeof` es un mecanismo de seguridad que React usa para distinguir elementos de otros objetos; merece la pena mencionarlo si el entrevistador insiste en los detalles internos, pero no conviene empezar por ahí. La documentación de React a nivel de código fuente sobre elementos describe esta estructura con precisión.
El error más fácil de cometer aquí
Los candidatos mezclan tres cosas distintas: el objeto elemento de React (un objeto JS plano que describe qué renderizar), el elemento DOM (un nodo del navegador que existe después de que React renderiza) y una instancia de componente (lo que React crea internamente cuando procesa un componente de clase). Son tres capas separadas. Decir "createElement devuelve un elemento DOM" es incorrecto. Decir "createElement devuelve un componente" también lo es. La respuesta segura siempre es: devuelve un objeto plano que describe lo que debe renderizarse.
Marque la diferencia entre elemento de React, componente de React y elemento DOM
Por qué esta confusión sigue ocurriendo
Cuando escribe `<MyButton onClick={fn} />`, está viendo al mismo tiempo sintaxis JSX, haciendo referencia a un componente y produciendo un elemento, todo en una sola línea. Esas capas se fusionan visualmente, así que es fácil fusionarlas también mentalmente. La confusión no es descuidada; es estructural. El código parece una sola cosa, pero representa tres.
Cómo se ve esto en la práctica
Ejemplo con etiqueta nativa:
Ejemplo con componente de función:
En ambos casos, `el` es un objeto plano. El elemento DOM aún no existe. MyButton aún no se ha ejecutado. La diferencia entre elemento de React y componente es una cuestión de qué contiene el campo `type` —una cadena para etiquetas nativas, una función o clase para componentes—, y el elemento DOM está aguas abajo de todo el proceso de renderizado, no forma parte de `createElement` en absoluto. La documentación de React sobre componentes y elementos traza esta distinción explícitamente.
La distinción de una sola frase que merece la pena memorizar
Un componente es una función o clase. Un elemento es el objeto plano que devuelve `React.createElement`. Un elemento DOM es el nodo del navegador que React termina creando. Son tres cosas distintas en tres capas distintas.
Explique qué ocurre cuando React.createElement recibe una función o una clase
La parte que la mayoría de los candidatos pasa por alto
Cuando el argumento `type` es un componente de función o un componente de clase, `React.createElement` no llama a esa función ni instancia esa clase. Registra la referencia. El objeto elemento que devuelve tiene `type: MyButton` —la propia función— en el campo `type`. El reconciliador de React lee eso después, durante la fase de renderizado, y decide qué hacer con ello.
Cómo se ve esto en la práctica
Ruta de componente de función:
Ruta de componente de clase:
React llama a la función o instancia la clase durante la reconciliación, no durante `createElement`. Por eso puede crear elementos sin montarlos, pasarlos como props o almacenarlos en estado sin desencadenar ninguna lógica de renderizado.
La respuesta segura para el seguimiento en entrevista
Si el entrevistador pregunta si los componentes de función y de clase se tratan igual a nivel de elemento: sí, a nivel de `createElement` son idénticos; ambos producen un objeto elemento con la referencia del componente como `type`. La diferencia solo aparece cuando React procesa ese elemento: los componentes de función se llaman, los componentes de clase se instancian y se llama a su método `render`. Esa distinción pertenece al reconciliador de React, no a `createElement` en sí.
Separe React.createElement de ReactDOM.createRoot antes de decir algo impreciso
Dos trabajos distintos que la gente sigue mezclando en uno solo
Ambas API intervienen para llevar la interfaz a la página, y por eso los candidatos las confunden. Pero hacen tareas completamente diferentes. `React.createElement` construye una descripción: un objeto elemento plano que existe por completo en JavaScript. `ReactDOM.createRoot` conecta React con un contenedor DOM real y le da un root en el que puede renderizar. Una trata sobre la descripción; la otra, sobre el montaje.
Cómo se ve esto en la práctica
`createElement` se ejecuta primero y produce el objeto elemento. `createRoot` se ejecuta después y conecta React al nodo DOM real. `root.render()` toma el objeto elemento e inicia la reconciliación. Son secuenciales y son separadas. La documentación de React 18 sobre `createRoot` cubre la API actual; si está mencionando el antiguo `ReactDOM.render`, actualice su modelo mental, porque los entrevistadores que trabajan con React 18 lo notarán.
La frase que le mantiene fuera de problemas
"`React.createElement` construye el objeto elemento que describe la interfaz. `ReactDOM.createRoot` monta React dentro de un contenedor DOM. Son API distintas que hacen trabajos distintos: una es JavaScript puro, la otra toca el navegador."
Responda a los seguimientos que los entrevistadores realmente hacen
¿JSX es un componente?
No, y esta es una trampa que conviene conocer. JSX es sintaxis. Se compila a `React.createElement`. Un componente es la función o clase que JSX puede referenciar como argumento `type`. Puede escribir JSX que devuelva una etiqueta nativa (`<div>`) y no hay ningún componente implicado en absoluto. Confundir JSX con componentes sugiere que no ha separado las capas, que es exactamente lo que esta línea de preguntas pretende evaluar.
¿Qué es una instancia de elemento?
Esta formulación es algo imprecisa, y a veces los entrevistadores la usan deliberadamente para ver cómo responde. Un elemento de React es un objeto plano: no se instancia, no tiene métodos, no guarda estado. La frase “instancia de elemento” suele buscar aclaración: ¿sabe que los elementos son descripciones inmutables, no objetos vivos? La respuesta segura es aclararlo con suavidad: “Un elemento de React es un objeto plano, no una instancia; es una descripción de lo que hay que renderizar. Las instancias de componente son lo que React crea internamente al procesar componentes de clase.”
¿Qué cambia si el hijo es un componente en lugar de una etiqueta DOM?
El campo `type` del objeto elemento cambia de una cadena a una referencia de función o clase. Esa es la respuesta mecánica. La consecuencia de comportamiento es que el reconciliador de React ahora necesita llamar o instanciar ese tipo para obtener la siguiente capa de elementos; recorre el árbol recursivamente hasta que todo se resuelve en etiquetas nativas. Por eso React puede componer componentes: cada uno devuelve más elementos, y React sigue desdoblándolos hasta tener un árbol de cadenas que puede entregar al renderizador DOM.
Asegure la respuesta para no mezclarla bajo presión
El error que suena casi correcto
Las dos respuestas casi correctas más comunes son: "JSX es el componente" y "createElement devuelve un nodo DOM". Ambas son incorrectas de una forma que suena plausible si no se escucha con atención, que es exactamente por lo que los entrevistadores insisten en ellas. Si dice cualquiera de esas dos cosas, el seguimiento será inmediato e incómodo.
Cómo se ve esto en la práctica
Antes de cualquier entrevista sobre `React.createElement`, practique en voz alta tres líneas:
- Línea de JSX: "JSX es azúcar sintáctico; Babel lo compila a `React.createElement` antes de que React se ejecute."
- Línea del objeto elemento: "`React.createElement` devuelve un objeto plano de JavaScript con `type`, `props` y `children`, no un nodo DOM."
- Línea de renderizado: "El reconciliador de React lee esos objetos y `ReactDOM` se encarga de las actualizaciones reales del DOM."
Diga esas tres líneas en secuencia hasta que salgan sin vacilar. Esa es la respuesta completa. Todo lo demás en esta guía es munición para los seguimientos.
Cómo comprobar su respuesta en diez segundos
Después de practicar, hágase cuatro preguntas: ¿he nombrado JSX como sintaxis y no como algo de runtime? ¿He dicho que `createElement` devuelve un objeto plano, no un nodo DOM? ¿He separado el componente (función o clase) del elemento (el objeto)? ¿He puesto la manipulación del DOM en `ReactDOM` y no en `createElement`? Si puede responder que sí a las cuatro, la respuesta es segura para entrevista. Si alguna de esas distinciones se difuminó mientras hablaba, esa es la que debe entrenar.
Preguntas frecuentes
P: ¿Qué es `React.createElement` en palabras sencillas, y cómo lo explico en menos de 30 segundos en una entrevista?
`React.createElement` es una función que toma un tipo (un nombre de etiqueta o un componente), un objeto de props y los hijos, y devuelve un objeto plano de JavaScript que describe lo que debería aparecer en pantalla. En una entrevista: "JSX se compila a `React.createElement`, que devuelve un objeto plano —el elemento— que React usa para decidir qué renderizar en el DOM."
P: Cuando se compila JSX, ¿qué produce exactamente `React.createElement`?
Produce un objeto plano de JavaScript con, como mínimo, un campo `type`, un campo `props` (que incluye los hijos), un `key` y un `ref`. A este objeto a veces se le llama elemento de React. No es un nodo DOM ni una instancia de componente; es una descripción ligera de lo que debería aparecer en pantalla.
P: ¿Cuál es la diferencia entre un elemento de React, un componente de React y un elemento DOM?
Un componente de React es una función o clase que devuelve elementos. Un elemento de React es el objeto plano que devuelve `React.createElement`: una descripción de lo que hay que renderizar. Un elemento DOM es el nodo real del navegador que existe después de que React procesa esas descripciones y las aplica a la página. Tres capas distintas, tres cosas distintas.
P: ¿Qué ocurre cuando `React.createElement` recibe un componente de función frente a un componente de clase?
En ambos casos, `createElement` registra la referencia en el campo `type` del elemento y devuelve el objeto elemento; no llama a la función ni instancia la clase. El reconciliador de React hace eso más tarde durante la fase de renderizado: los componentes de función se llaman, los componentes de clase se instancian y se invoca su método `render`.
P: ¿Por qué es importante entender `React.createElement` si yo escribo sobre todo JSX?
Porque cada expresión JSX que escribe es `React.createElement` disfrazado. Cuando algo falla —una advertencia de key, un re-render inesperado, una prop que no llegó—, el modelo mental que ayuda a depurar es aquel en el que puede ver cómo se ve la llamada a `createElement` y qué contiene el objeto elemento. Dominar JSX sin entender `createElement` es dominar sin una base.
P: ¿Qué preguntas de seguimiento suelen hacer los entrevistadores después de la definición básica?
Las más comunes: "¿JSX es un componente?" (no, es sintaxis), "¿Cómo es el objeto devuelto?" (type, props, children), "¿Cuál es la diferencia entre un elemento y un componente?" (objeto vs función/clase) y "¿Qué hace distinto `ReactDOM.createRoot`?" (monta React en el DOM, no construye elementos). Saber esas cuatro cubre la gran mayoría de los seguimientos sobre `React.createElement`.
P: ¿Cómo evito el error común de decir que JSX o un componente es lo mismo que un elemento?
Mantenga activo el modelo de tres capas: sintaxis (JSX), descripción (objeto elemento) y nodo del navegador (elemento DOM). Cuando esté a punto de decir "JSX es" o "un componente es", haga una pausa y pregúntese de qué capa está hablando realmente. JSX es sintaxis en tiempo de compilación. Un componente es una función o clase. Un elemento es el objeto plano que devuelve `createElement`. Si esas tres definiciones están claras, la confusión no ocurre.
Cómo Verve AI puede ayudarle a prepararse para su entrevista sobre React.createElement
La parte más difícil de una entrevista sobre `React.createElement` no es conocer la definición, sino decirla con claridad bajo presión en vivo sin mezclar las capas. Eso es una habilidad de ejecución, no de memorización, y solo se desarrolla mediante repetición frente a preguntas de seguimiento reales.
Verve AI Interview Copilot está diseñado exactamente para esa brecha. Escucha en tiempo real mientras usted explica su respuesta y reacciona a lo que realmente dijo, no a un prompt memorizado. Si mezcla elemento y componente en su respuesta, Verve AI Interview Copilot lo detecta. Si su explicación de JSX deriva hacia el runtime, la pregunta de seguimiento que genera refleja ese error concreto. Verve AI Interview Copilot permanece invisible mientras practica, de modo que la fricción del entrenamiento se mantiene baja y la retroalimentación sigue siendo precisa. Para un concepto como `React.createElement` —donde la respuesta es breve pero el árbol de seguimientos es amplio—, ese tipo de práctica adaptativa es lo que cierra la brecha entre conocer el material y sonar como si lo dominara.
Conclusión
No necesita sonar como un ingeniero del runtime de React para aprobar una entrevista sobre `React.createElement`. Necesita sonar lo bastante preciso para separar cuatro cosas sin vacilar: JSX es sintaxis en tiempo de compilación, `React.createElement` devuelve un objeto plano de elemento, un componente es la función o clase que ese objeto puede referenciar, y el elemento DOM solo existe después de que React renderiza. Esa es toda la respuesta. Todo lo demás en esta guía es la respuesta misma o munición para los seguimientos.
Practique ahora mismo la versión de tres líneas en voz alta —línea de JSX, línea del objeto elemento, línea de renderizado— y después póngala a prueba con las preguntas de seguimiento de la Sección 7. Si puede responder “¿JSX es un componente?” y “¿cómo es el objeto elemento?” sin hacer pausa, ya está preparado.
Verve AI
Contenido