Lo que ve dentro de un componente Reaccionar ‘técnicamente’ no es HTML.
Tomarlo como HTML es el concepto erróneo más común sobre la biblioteca React.
Retrocedamos un paso. Primero debemos analizar cómo funcionan los barebones de React.
- ¿Qué necesito saber para crear y diseñar un sitio web?
- ¿Existe una plataforma de encuestas donde pueda ver los resultados de los formularios con todos los participantes y su imagen cargada en una lista?
- ¿Dónde puedo encontrar una buena comparación de WordPress vs Joomla?
- Cómo comenzar mi carrera como desarrollador de sitios web front-end a los 30 años
- ¿Cuál es el mejor marco de Javascript para principiantes?
En React, NO escribimos ningún html directamente. Utilizamos nodos ‘Reaccionar DOM’ para especificar cómo debe estructurarse la página.
así que este ‘Hola Mundo’ en HTML simple:
¡Hola, mundo!
en ‘simple’ Reaccionar, sería:
var div = React.DOM.div
var h1 = React.DOM.h1
var HelloWorldComponent = (
div (nulo,
h1 (nulo, ‘¡Hola, mundo!’)
)
)
ReactDOM.render (HelloWorldComponent, document.getElementById (‘aplicación’))
Ver líneas 5 y 6. div y h1 son en realidad nodos React.
Para un nodo React, el primer argumento son las propiedades y el segundo argumento es su hijo .
así que para el nodo de reacción ‘div’ en la línea 5, las propiedades son nulas y el hijo es el nodo de reacción h1. El nodo de reacción h1 tendrá su propio conjunto de propiedades y su hijo.
Imagina un árbol de nodos si quieres.
Luego tomamos este árbol de nodos de reacción y se lo damos a ReactDom.render en la línea 10
ReactDOM sabe cómo convertir cada ‘Nodo de reacción’ a su etiqueta html correspondiente. Convierte cada nodo en el árbol en una etiqueta html y adjunta la estructura html resultante a la id ‘aplicación’ como se especifica en la línea 10.
Eso es.
Por lo tanto, cualquier html que deseamos escribir debe escribirse mediante programación en términos de nodos de reacción.
Veamos un HTML un poco más complejo
TODO
- Uno
- Dos
- Tres
La estructura de Nodos de reacción correspondiente para el HTML anterior sería:
React.createElement (
‘div’,
nulo,
React.createElement (
‘h3’,
nulo,
‘QUE HACER’
),
React.createElement (
‘ul’,
nulo,
React.createElement (
‘li’,
nulo,
‘Uno’
),
React.createElement (
‘li’,
nulo,
‘Dos’
),
React.createElement (
‘li’,
nulo,
‘Tres’
)
)
);
El equipo de React decidió que es doloroso escribir React ‘simple’ (es decir, usar React Node’s directamente).
Así que decidieron, construyamos una forma intermedia de ‘código de búsqueda html’, que luego se puede convertir en Nodos de reacción.
Este ‘código de búsqueda HTML’ se llama JSX o JavaScript XML, algo que la mayoría de la gente confunde con HTML.
Entonces, la idea es que los programadores escriban su código en JSX y un transpilador (como babel) lo convierte en React Nodes, que a su vez se convierte en HTML por ReactDOM.
El ‘árbol de nodos’ del que hablamos anteriormente se llama un DOM virtual.
React crea un DOM virtual utilizando los datos que le das. Si los datos cambian, se crea un nuevo DOM virtual. React luego compara este nuevo DOM virtual con el anterior. En caso de cambios, sabe qué nodos exactos actualizar. Eso es lo que hace que React sea rápido .
