Cuando trabaja con React, es más que probable que cree sus aplicaciones con JSX. El JSX es una sintaxis de JavaScript basada en etiquetas que parece familiar con HTML. React element es la unidad atómica y más básica que necesitas dominar antes de JSX y antes de seguir adelante con React.
Nota: para poder trabajar con React en los navegadores, debemos incluir 2 bibliotecas: React y ReactDOM. La biblioteca React es responsable de crear vistas y la biblioteca ReactDOM es responsable de representar la interfaz de usuario en el navegador.
Incluyendo Scripts: Los siguientes son los enlaces CDN para React y ReactDOM:
React: https://cdnjs.com/libraries/react ReactDOM: https://cdnjs.com/libraries/react-dom
Incluya estas dos bibliotecas antes de su archivo JavaScript principal. Mientras aprendemos cómo funciona React, crearemos una pequeña aplicación usando react y ReactDOM. En aras de la simplicidad, contiene solo 2 archivos index.html y main.js en la misma carpeta. Debe usar la versión de desarrollo de React para obtener mensajes de error y advertencias en la consola del navegador.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React | How React works</title> </head> <body> <script crossorigin src= "https://unpkg.com/react@17/umd/react.development.js"> </script> <script crossorigin src= "https://unpkg.com/react-dom@17/umd/react-dom.development.js"> </script> <script src="./main.js"></script> </body> </html>
Reaccionar Elementos:
HTML es solo un conjunto de instrucciones que eventualmente se convierten en elementos DOM. Digamos que tiene que crear una jerarquía HTML de bibliotecas y marcos de JavaScript. Seguir comandos HTML para crear jerarquías HTML para bibliotecas y marcos de JavaScript.
HTML
<section class="js-section"> <h1>JavaScript Libraries and Frameworks</h1> <ul class="list-lib-frameworks"> <li>React.js</li> <li>Angular</li> <li>Vue.js</li> <li>Node.js</li> <li>underscore.js</li> </ul> </section>
En el navegador, HTML representa una estructura similar a un árbol donde la sección es el Node raíz y contiene 2 Nodes secundarios, es decir , h1 y ul. El ul también tiene algunos hijos, es decir, 5 Nodes li . En DOM se representará como:
Representación DOM en el navegador
En el pasado, los sitios web constaban de varias páginas, y cuando el usuario hace clic en un enlace, el navegador solicita una nueva página HTML y vuelve a crear el DOM. Pero después de la invención de AJAX (JavaScript asincrónico y XML) nos trajo una aplicación de página única (SPA). En SPA, el navegador primero carga el documento HTML inicial. Cuando un usuario navega haciendo clic en los enlaces, el navegador envía la solicitud y luego el navegador actualiza la parte de un DOM. Se siente como si el usuario estuviera saltando de una página a otra. Pero el usuario siempre permanece en la misma página. JavaScript destruye lo antiguo y crea una nueva interfaz de usuario. Es JavaScript el que está haciendo el trabajo pesado debajo del capó.
¿Cómo JavaScript actualiza el DOM?
JavaScript usa la API DOM para actualizar y manipular los Nodes DOM. La API DOM es solo una colección de objetos que JavaScript usa para manipular el DOM. La manipulación aquí significa operaciones CRUD (crear, leer, actualizar y eliminar) en Nodes DOM. Si desea construir la página HTML, también podemos construir con JavaScript estándar.
Javascript
const root = document.querySelector( 'body' );
function createListElement() {
const libsAndFrameworksNames = ['React.js', 'Angular', 'Vue.js',
'Node.js', 'Underscore.js'];
const ul = document.createElement( 'ul' );
ul.classList.add( "list-lib-frameworks" );
libsAndFrameworksNames.forEach( function appoendToUnorderedList( name ) {
const listElement = document.createElement( 'li' );
listElement.innerText = name;
ul.appendChild( listElement );
} );
return ul;
}
function createWebPageWithJavaScript( root ) {
// PARENT ELEMENT
const parent = document.createElement( 'section' );
parent.classList.add( 'js-section' );
// HEADING ELEMENT
const heading = document.createElement( 'h1' );
heading.innerText = 'JavaScript Libraries and Frameworks';
// UNORDERED LIST ELEMENT
const unorderedListElement = createListElement();
// APPEND HEADING AND UNORDERED LIST ELEMENT TO PARENT
parent.appendChild(heading)
parent.appendChild( unorderedListElement );
// APPEND PARENT TO ROOT ELEMENT
root.appendChild( parent );
}
createWebPageWithJavaScript( root );
Producción:
Salida exactamente igual que antes
Pero a medida que crece nuestra aplicación, crece la complejidad y es difícil de mantener. Entonces, para superar la complejidad, vamos a usar React para manejar la complejidad por nosotros.
React es una biblioteca diseñada específicamente para interactuar con DOM para nosotros. De ahora en adelante, no actualizaremos el DOM directamente, sino que le diremos a reaccionar que actualice el DOM por nosotros. React se encargará de renderizar y reconciliar el elemento por nosotros a través del comando que le demos para reaccionar.
Hay algunas similitudes entre DOM y React. Ambos están formados por Nodes. DOM se compone de Nodes/elementos DOM y React se compone de Nodes/elementos React. Ambos se ven exactamente iguales, pero son bastante diferentes.
Creando elemento de reacción:
Como ya se describió anteriormente, el elemento React es la entidad más pequeña. El elemento React es solo un objeto de JavaScript que describe el elemento DOM en la memoria. Podemos crear un elemento React usando el método createElement de React.
Sintaxis:
React.createElement(type, [props], [...children]);
Parámetros: el método anterior acepta los siguientes parámetros:
- tipo: es el tipo de elemento que desea crear, es decir, div, ul, li, sección, etc. También podría ser otro elemento de reacción.
- accesorios: es un objeto de JavaScript que contiene propiedades o datos necesarios para construir un DOM.
- children or content: Hay child o content para mostrar otros elementos anidados. Podría ser el contenido de un Node.
Ejemplo: Cómo crear un elemento li en nuestra aplicación:
const listElement = React.createElement( 'li', null, 'React.js' ); console.log( listElement );
La salida del elemento createReact
Explicación: en el código anterior, pasamos 3 argumentos a createElement que son los siguientes:
- li: Define el tipo de elemento que queremos crear. En este caso, es el elemento de la lista.
- nulo: no queremos definir ninguna propiedad en el elemento de la lista. Podríamos haberle pasado la propiedad className , para definir la propiedad de clase en el Node de la lista. Pero en nuestro caso, no lo hacemos. Así que tenemos que pasar nulo externamente si no hay ninguna propiedad.
- React.js: el tercer elemento representa a los hijos del elemento. Cualquier Node que se inserte entre la etiqueta inicial y la etiqueta final debe definirse en el tercer parámetro. En el Node de la lista, no tenemos hijos para insertar, pero tenemos el texto. Así que pasamos el texto como una string.
Durante el proceso de renderizado, React convierte el elemento React en el elemento DOM real.
<li> React.js </li>
Pero si desea agregar una clase en el elemento list(<li>), entonces podríamos haber agregado la segunda propiedad como:
const listElement = React.createElement( 'li', {
className: 'list'
}, 'React.js' );
console.log( listElement );
Si hemos usado class en lugar de className , habríamos recibido el mensaje de advertencia de React. Este mensaje de error puede diferir de una versión a otra.
El atributo de clase se convierte en la propiedad className de propsto React. Las siguientes podrían ser las dos razones:
- El elemento/Node React que obtenemos de createElement son Nodes DOM, no elementos HTML. Como sabemos, class es el nombre del atributo HTML. Tan pronto como el navegador ve el atributo de clase en los elementos HTML, se convierte en una propiedad, es decir, className. Para probarlo, escribe el siguiente código:
const ele = document.createElement('li');
ele.classList.add('list');
console.log( ele.className ); // list
- Dado que la clase es una propiedad reservada en JavaScript, no podemos usar la clase como una propiedad. El className se agrega en la propiedad props del elemento ‘li’ React. La propiedad que definimos en el segundo argumento se asigna a la propiedad props de ese elemento React. Así que React convierte el elemento de la lista anterior en un elemento DOM como se muestra a continuación:
<li class="list"> React.js </li>
ReactDOM
Una vez que haya creado el elemento React. Entonces querrás verlo en el navegador. Pero el navegador no entiende el elemento React. ReactDOM es el intermediario que representa el elemento React en el navegador. ReactDOM viene con algunos métodos útiles, pero el método que nos interesa es renderizar . Se necesitan 2 parámetros que se describen como qué (elemento que desea renderizar) y dónde (la ubicación donde desea renderizar).
Ejemplo: para representar el elemento de la lista anterior ( listElement ) en DOM.
const listElement = React.createElement( 'li', {
className: 'list'
}, 'React.js' );
ReactDOM.render( listElement, document.querySelector( '#root' ) );
Aquí, el segundo argumento para representar el método es la ubicación o el elemento bajo el cual queremos representar el elemento listElement . Podríamos haber usado una etiqueta de cuerpo como se muestra a continuación:
document.querySelector('body');
Funciona, pero no es recomendable. React nos avisa en modo desarrollo con el siguiente mensaje:
Error si queremos renderizar el elemento React en el cuerpo.
Implementación: a continuación se muestra nuestro archivo main.js final para nuestro ejemplo.
Nombre de archivo-main.js:
Javascript
const mainReactElement = React.createElement(
"section",
{ className: "js-section" },
React.createElement( "h1", null, "JavaScript Libraries and Frameworks" ),
React.createElement(
"ul",
{ className: 'list-lib-frameworks' },
React.createElement('li', null, 'React.js'),
React.createElement('li', null, 'Angular'),
React.createElement('li', null, 'Vue.js'),
React.createElement('li', null, 'Node.js'),
React.createElement('li', null, 'underscore.js'),
)
);
ReactDOM.render(mainReactElement, document.querySelector( '#root' ));
Si ha proporcionado más de 3 argumentos al método createElement . Entonces React consideró argumentos adicionales cuando eran niños. Entonces React crea una array de estos elementos secundarios. Esta array recién creada se asignará a la array props.children . También podemos usar el método de array para hacer que nuestro código sea más breve, como se muestra a continuación:
Javascript
const listOfLibAndFrameworks = ['React.js', 'Angular', 'Vue.js',
'Node.js', 'underscore.js'];
const mainReactElement = React.createElement(
"section",
{ className: "js-section" },
React.createElement( "h1", null, "JavaScript Libraries and Frameworks" ),
React.createElement(
"ul",
{ className: 'list-lib-frameworks' },
listOfLibAndFrameworks.map((element, index) => React.createElement('li',
{ key: index }, element))
)
);
console.log( mainReactElement );
ReactDOM.render(mainReactElement, document.querySelector( '#root' ));
React es solo JavaScript. Entonces, cualquier cosa que pueda hacer con JavaScript, también puede hacerlo con React. Cuando trabaja con una array en React, se encuentra con un momento en el que reacciona se queja de la clave única. Para eliminar esta advertencia, podemos usar la tecla como se muestra arriba. Se usa para identificar la lista única por React para volver a renderizarla si se usa. Hace que nuestro código sea más eficiente. Se recomienda encarecidamente agregar propiedades clave mientras se trabaja con la lista.
Si no agrega la clave, React arroja la siguiente advertencia:
Así que no olvide agregar el atributo clave en accesorios. Si registramos el mainReactElement , podemos ver la array creada con argumentos adicionales pasados al método createElement de React.
