React Tutorial Part 6: Algunas características del curso, JSX y JavaScript

Hoy publicamos la continuación del curso de capacitación React. Aquí hablaremos sobre algunas características del curso, en particular, sobre el estilo del código. Aquí hablamos con más detalle sobre la relación entre JSX y JavaScript.



→ Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX
→ Parte 2: componentes funcionales
→ Parte 3: archivos de componentes, estructura del proyecto
→ Parte 4: componentes principales y secundarios
→ Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo
→ Parte 6: sobre algunas características del curso, JSX y JavaScript
→ Parte 7: estilos en línea
→ Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes
→ Parte 9: propiedades del componente
→ Parte 10: Taller sobre trabajo con propiedades de componentes y estilo
→ Parte 11: generación de marcado dinámico y método de matrices de mapas
→ Parte 12: taller, tercera etapa de trabajo en una aplicación TODO
→ Parte 13: componentes basados ​​en clases
→ Parte 14: taller sobre componentes basados ​​en la clase, estado de los componentes.
→ Parte 15: talleres de componentes de salud
→ Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos
→ Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes
→ Parte 18: la sexta etapa de trabajo en una aplicación TODO
→ Parte 19: métodos del ciclo de vida de los componentes.
Parte 20: la primera lección de representación condicional
→ Parte 21: segunda lección y taller sobre representación condicional
→ Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas
→ Parte 23: primera lección sobre trabajar con formularios
→ Parte 24: Segunda lección de formularios
→ Parte 25: Taller sobre trabajo con formularios
→ Parte 26: arquitectura de la aplicación, patrón de contenedor / componente
→ Parte 27: proyecto del curso

Lección 13. Acerca de algunas características del curso.

→ Original

Antes de continuar, me gustaría hablar un poco sobre algunas de las características del código que demuestro en este curso. Es posible que haya notado que los puntos y comas generalmente no se usan en el código. Por ejemplo, como puede ver, en ejemplos como los siguientes, no son:

import React from "react" import ReactDOM from "react-dom" function App() {    return (       <h1>Hello world!</h1>    ) } ReactDOM.render(<App />, document.getElementById("root")) 

Puede estar acostumbrado a punto y coma siempre que sea posible. Entonces, por ejemplo, las dos primeras líneas del fragmento de código anterior se verían así:

 import React from "react"; import ReactDOM from "react-dom"; 

Recientemente decidí que prescindiría de ellos, como resultado, obtengo el código que ves en los ejemplos. Por supuesto, hay construcciones en JavaScript que no pueden funcionar sin punto y coma. Diga, cuando describa un bucle for , cuya sintaxis se ve así:

 for ([]; []; [ ]) 

Pero en la mayoría de los casos, puede hacerlo sin punto y coma al final de las líneas. Y su ausencia en el código no interferirá con su trabajo. En realidad, la cuestión del uso de punto y coma en el código es una cuestión de las preferencias personales del programador.

Otra característica del código que estoy escribiendo es que, aunque ES6 técnicamente le permite usar funciones de flecha en los casos en que las funciones se declaran usando la palabra clave de function , no la uso.

Por ejemplo, el código anterior se puede reescribir así:

 import React from "react" import ReactDOM from "react-dom" const App = () => <h1>Hello world!</h1> ReactDOM.render(<App />, document.getElementById("root")) 

Pero no estoy acostumbrado. Creo que las funciones de flecha son extremadamente útiles en ciertos casos en los que las características de estas funciones no interfieren con el correcto funcionamiento del código. Por ejemplo, cuando usualmente usan funciones anónimas, o cuando escriben métodos de clase. Pero prefiero usar las características tradicionales. Muchos, al describir componentes funcionales, usan funciones de flecha. Estoy de acuerdo en que este enfoque tiene ventajas sobre el uso de diseños tradicionales. Al mismo tiempo, no busco imponer ninguna forma particular de declarar componentes funcionales.

Lección 14. JSX y JavaScript

→ Original

En la próxima lección hablaremos sobre los estilos incorporados. Antes de pasar a estos temas, necesitamos aclarar algunas características de la interacción entre JavaScript y JSX. Ya sabe que, utilizando las capacidades de React, podemos, desde el código JavaScript ordinario, devolver construcciones que se parecen al marcado HTML normal, pero son código JSX. Esto sucede, por ejemplo, en el código de componentes funcionales.

¿Qué sucede si hay una determinada variable cuyo valor necesita ser sustituido en el código JSX devuelto por el componente funcional?

Supongamos que tenemos un código como este:

 import React from "react" import ReactDOM from "react-dom" function App() { return (   <h1>Hello world!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

Agregue al componente funcional un par de variables que contengan el nombre y apellido del usuario.

 function App() { const firstName = "Bob" const lastName = "Ziroll" return (   <h1>Hello world!</h1> ) } 

¡Ahora queremos que el componente funcional no sea un encabezado de primer nivel con el texto Hello world! , y un encabezado que contiene un saludo como Hello Bob Ziroll! que se forma usando las variables disponibles en el componente.

Intentemos reescribir lo que devuelve el componente, así:

 <h1>Hello firstName + " " + lastName!</h1> 

Si observa lo que aparece en la página después de procesar dicho código, resulta que no parece que lo necesitemos. A saber, el texto Hello firstName + " " + lastName! . Al mismo tiempo, si el proyecto estándar creado por las herramientas create-react-app se usa para ejecutar el ejemplo, se nos advertirá que las constantes firstName y lastName valores asignados que no se usan en ninguna parte. Es cierto que esto no impedirá la aparición en la página del texto que es exactamente lo que devolvió el componente funcional, sin sustituir en lugar de lo que nos parecían los nombres de las variables, sus valores. El sistema considera que los nombres de las variables en este formulario son texto sin formato.

Le preguntaremos cómo aprovechar JavaScript en el código JSX. De hecho, hacer esto es bastante simple. En nuestro caso, es suficiente simplemente encerrar lo que debe interpretarse como código JavaScript entre llaves. Como resultado, lo que devuelve el componente se verá así:

 <h1>Hello {firstName + " " + lastName}!</h1> 

Al mismo tiempo, el texto Hello Bob Ziroll! . Puede usar construcciones JavaScript regulares en estas piezas de código JSX, resaltadas con llaves. Esto es lo que generará el código en el navegador:


Una página con marcado generado por JSX y JavaScript

Dado que cuando se trabaja con cadenas en condiciones modernas, las funciones de ES6 se usan principalmente, reescribimos el código usándolas. Es decir, estamos hablando de literales de plantilla dibujados usando backticks ( ` ` ). Dichas cadenas pueden contener construcciones de la forma ${} . El comportamiento estándar de los literales de plantilla implica calcular las expresiones contenidas en llaves y convertir lo que sucede en una cadena. En nuestro caso, se verá así:

 <h1>Hello {`${firstName} ${lastName}`}!</h1> 

Tenga en cuenta que los nombres y apellidos están separados por un espacio, que se interpreta aquí como un carácter regular. El resultado de ejecutar este código será el mismo que se muestra arriba. En general, lo más importante que debe entender ahora es que lo que está encerrado entre llaves ubicado en el código JSX es JS ordinario.

Considere otro ejemplo. Es decir, reescribimos nuestro código para que, si se llama por la mañana, muestre el texto Good morning , si en la tarde - Good afternoon y si en la noche - Good night . Para empezar, escribiremos un programa que informe qué hora es. Aquí está el código del componente funcional de la App que resuelve este problema:

 function App() { const date = new Date() return (   <h1>It is currently about {date.getHours() % 12} o'clock!</h1> ) } 

Aquí se crea una nueva instancia del objeto Date . JSX usa código JavaScript, gracias al cual descubrimos llamando al método date.getHours() , que ahora es una hora, luego de lo cual, calculando el resto de dividir este número por 12 , convertimos la hora a un formato de 12 horas. De manera similar, al verificar el tiempo, podemos formar la línea que necesitamos. Por ejemplo, podría verse así:

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } 

Hay una variable timeOfDay , y analizando la hora actual usando la construcción if , descubrimos la hora del día y la escribimos en esta variable. Después de eso, usamos la variable en el componente devuelto por el código JSX.

Como de costumbre, se recomienda experimentar con lo que aprendimos hoy.

Resumen

En esta lección, hablamos sobre algunas de las características de estilo de código utilizadas en este curso, así como la interacción de JSX y JavaScript. El uso de código JavaScript en JSX abre grandes oportunidades, cuya utilidad práctica sentiremos en la próxima lección, cuando trataremos con estilos incorporados.

Estimados lectores! ¿Utiliza punto y coma en su código JavaScript?