Curso Práctico de React JS
Notas y recolección de información para complementar este curso.
Última actualización
¿Te fue útil?
Notas y recolección de información para complementar este curso.
Última actualización
¿Te fue útil?
Este enfoque hace posible la API declarativa de React: le dices a React en qué estado quieres que esté la IU, y se hará cargo de llevar el DOM a ese estado. Esto abstrae la manipulación de atributos, manejo de eventos y actualización manual del DOM que de otra manera tendrías que usar para construir tu aplicación.
No, son diferentes. El Shadow DOM es una tecnología de los navegadores diseñada principalmente para limitar el alcance de variables y CSS en componentes web. El DOM virtual es un concepto que implementan bibliotecas en JavaScript por encima de las APIs de los navegadores.
Create React App configura tu ambiente de desarrollo de forma que puedas usar las últimas características de Javascript, brindando una buena experiencia de desarrollo, y optimizando tu aplicación para producción. Necesitarás tener Node >= 8.10 y npm >= 5.6 instalados en tu máquina. Para crear un proyecto ejecuta:
Nota
El más pequeño de los ejemplos de React se ve así:
Este muestra un encabezado con el texto “Hello, world!” en la página.
Hoy, revisaremos qué componentes con estado y sin estado se encuentran en React, cómo puede notar la diferencia y el complejo proceso de decidir si los componentes tienen estado o no.
Primero, repasemos qué estado es.
En un componente, el estado son datos que importamos, generalmente para mostrar al usuario, que están sujetos a cambios. Podría cambiar porque la base de datos de la que estamos obteniendo puede actualizarse, el usuario la modificó, ¡hay muchas razones por las que los datos cambian!
Por lo general, también tendríamos un componenteDidMount () que tomaría nuestros datos de una base de datos, pero el ejemplo anterior debería darle una idea básica: tenemos estado y podemos representar cosas desde el estado.
Los componentes con estado y sin estado tienen muchos nombres diferentes.
También son conocidos como:
Componentes de contenedor vs presentación
Componentes inteligentes vs tontos
La diferencia literal es que uno tiene estado y el otro no. Eso significa que los componentes con estado realizan un seguimiento de los datos cambiantes, mientras que los componentes sin estado imprimen lo que se les da a través de accesorios, o siempre representan lo mismo.
Componente con estado / contenedor / inteligente:
Sin estado / Presentacional / Componente tonto:
Observe que el componente sin estado se escribe como una función. Tan bueno como es el estado, siempre debe tratar de hacer que sus componentes sean lo más simples y sin estado posible, de modo que los diferentes componentes se puedan reutilizar como piezas de Lego, incluso si no tiene planes inmediatos para reutilizar un componente. ¡Los con estado deberían sentirse afortunados de ser así!
Conocidos en inglés como Presentational Components. Este tipo de componentes solo deben centrase y enfocar sus esfuerzos en como debe renderizarse la UI. Este tipo de componentes puede componerse de otros elementos visuales y suele incluir estilos y clases. Todos los datos implicados en su renderización se deben recibir a través de props, por lo que deben ser independientes de llamadas a servicios externos. Este tipo de componentes suelen ser de tipo Stateless ya que no necesitan estado, y deben de gestionar las acciones pasándoselas a componentes padre a través de sus props.
Ejemplo:
Considera la declaración de esta variable:
Esta curiosa sintaxis de etiquetas no es ni un string ni HTML.
Se llama JSX, y es una extensión de la sintaxis de JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript.
React acepta el hecho de que la lógica de renderizado está intrínsecamente unida a la lógica de la interfaz de usuario: cómo se manejan los eventos, cómo cambia el estado con el tiempo y cómo se preparan los datos para su visualización.
Con eso fuera del camino, ¡empecemos!
En el ejemplo a continuación, declaramos una variable llamada name y luego la usamos dentro del JSX envolviéndola dentro de llaves:
En el ejemplo a continuación, insertamos el resultado de llamar la función de JavaScript, formatName(user), dentro de un elemento <h1>.
Después de compilarse, las expresiones JSX se convierten en llamadas a funciones JavaScript regulares y se evalúan en objetos JavaScript.
Esto significa que puedes usar JSX dentro de declaraciones if y bucles for, asignarlo a variables, aceptarlo como argumento, y retornarlo desde dentro de funciones:
Puedes utilizar comillas para especificar strings literales como atributos:
También puedes usar llaves para insertar una expresión JavaScript en un atributo:
No pongas comillas rodeando llaves cuando insertes una expresión JavaScript en un atributo. Debes utilizar comillas (para los valores de los strings) o llaves (para las expresiones), pero no ambas en el mismo atributo.
Advertencia:
Dado que JSX es más cercano a JavaScript que a HTML, React DOM usa la convención de nomenclatura
camelCaseen vez de nombres de atributos HTML.
Si una etiqueta está vacía, puedes cerrarla inmediatamente con />, como en XML:
Las etiquetas de Javascript pueden contener hijos:
Es seguro insertar datos ingresados por el usuario en JSX:
Babel compila JSX a llamadas de React.createElement().
Estos dos ejemplos son idénticos:
React.createElement() realiza algunas comprobaciones para ayudarte a escribir código libre de errores, pero, en esencia crea un objeto como este:
Estos objetos son llamados “Elementos de React”. Puedes pensar en ellos como descripciones de lo que quieres ver en pantalla. React lee estos objetos y los usa para construir el DOM y mantenerlo actualizado.
Vamos a explorar el renderizado de los elementos de React al DOM en la siguiente sección.
Tip:
Pasa una string como la prop className:
Es común que las clases CSS dependan de las props o del estado del componente:
Tip
Las clases CSS son generalmente mejores para el rendimiento que los estilos en línea.
Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias (llamadas “props”) y devuelven a React elementos que describen lo que debe aparecer en la pantalla.
La forma más sencilla de definir un componente es escribir una función de JavaScript:
Esta función es un componente de React válido porque acepta un solo argumento de objeto “props” (que proviene de propiedades) con datos y devuelve un elemento de React. Llamamos a dichos componentes “funcionales” porque literalmente son funciones JavaScript.
Los dos componentes anteriores son equivalentes desde el punto de vista de React.
Anteriormente, sólo encontramos elementos de React que representan las etiquetas del DOM:
Sin embargo, los elementos también pueden representar componentes definidos por el usuario:
Cuando React ve un elemento representando un componente definido por el usuario, pasa atributos JSX a este componente como un solo objeto. Llamamos a este objeto “props”.
Por ejemplo, este código muestra “Hello, Sara” en la página:
Recapitulemos lo que sucede en este ejemplo:
Llamamos a ReactDOM.render() con el elemento <Welcome name="Sara" />.
React llama al componente Welcome con {name: 'Sara'} como “props”.
Nuestro componente Welcome devuelve un elemento <h1>Hello, Sara</h1> como resultado.
React DOM actualiza eficientemente el DOM para que coincida con <h1>Hello, Sara</h1>.
Nota: Comienza siempre los nombres de componentes con una letra mayúscula.
React trata los componentes que empiezan con letras minúsculas como etiquetas del DOM. Por ejemplo,
<div />representa una etiqueta div HTML pero<Welcome />representa un componente y requiere queWelcomeesté definido.
Los componentes pueden referirse a otros componentes en su salida. Esto nos permite utilizar la misma abstracción de componente para cualquier nivel de detalle. Un botón, un cuadro de diálogo, un formulario, una pantalla: en aplicaciones de React, todos son expresados comúnmente como componentes.
Por ejemplo, podemos crear un componente App que renderiza Welcome muchas veces:
Por lo general, las aplicaciones de React nuevas tienen un único componente App en lo más alto. Sin embargo, si se integra React en una aplicación existente, se podría empezar de abajo hacia arriba con un pequeño componente como Button y poco a poco trabajar el camino a la cima de la jerarquía de la vista.
No tengas miedo de dividir los componentes en otros más pequeños.
Por ejemplo, considera este componente Comment:
Acepta author (un objeto), text (un string), y date (una fecha) como props, y describe un comentario en una web de redes sociales.
Este componente puede ser difícil de cambiar debido a todo el anidamiento, y también es difícil reutilizar partes individuales de él. Vamos a extraer algunos componentes del mismo.
Primero, vamos a extraer Avatar:
El Avatar no necesita saber que está siendo renderizado dentro de un Comment. Esto es por lo que le dimos a su propiedad un nombre más genérico: user en vez de author.
Recomendamos nombrar las props desde el punto de vista del componente, en vez de la del contexto en el que se va a utilizar.
Ahora podemos simplificar Comment un poquito:
A continuacion, vamos a extraer un componente UserInfo que renderiza un Avatar al lado del nombre del usuario:
Esto nos permite simplificar Comment aun más:
Extraer componentes puede parecer un trabajo pesado al principio, pero tener una paleta de componentes reutilizables vale la pena en aplicaciones más grandes. Una buena regla en general es que si una parte de su interfaz de usuario se usa varias veces (Button, Panel, Avatar), o es lo suficientemente compleja por sí misma (App, FeedStory, Comment), es buen candidato para ser un componente reutilizable.
En contraste, esta función es impura por que cambia su propia entrada:
React es bastante flexible pero tiene una sola regla estricta:
Todos los componentes de React deben actuar como funciones puras con respecto a sus props.
En esta sección, aprenderemos como hacer al componente Clock verdaderamente reutilizable y encapsulado. Configurarás tu propio temporizador y se actualizará cada segundo.
Podemos comenzar por encapsular cómo se ve el reloj:
Sin embargo, se pierde un requisito crucial: el hecho de que Clock configure un temporizador y actualice la interfaz de usuario cada segundo debe ser un detalle de implementación de Clock.
Idealmente, queremos escribir esto una vez y que Clock se actualice a sí mismo:
Para implementar esto, necesitamos agregar «estado» al componente Clock.
El estado es similar a las props, pero es privado y está completamente controlado por el componente.
Se puede convertir un componente de función como Clock en una clase en cinco pasos:
Agregar un único método vacío llamado render().
Mover el cuerpo de la función al método render().
Reemplazar props con this.props en el cuerpo de render().
Borrar el resto de la declaración de la función ya vacía.
Clock ahora se define como una clase en lugar de una función.
El método render se invocará cada vez que ocurre una actualización; pero, siempre y cuando rendericemos <Clock /> en el mismo nodo del DOM, se usará solo una única instancia de la clase Clock. Esto nos permite utilizar características adicionales como el estado local y los métodos de ciclo de vida.
Moveremos date de las props hacia el estado en tres pasos:
Reemplazar this.props.date con this.state.date en el método render():
Nota cómo pasamos props al constructor base:
Los componentes de clase siempre deben invocar al constructor base con props.
Eliminar la prop date del elemento <Clock />:
Posteriormente regresaremos el código del temporizador al propio componente.
El resultado es el siguiente:
A continuación, haremos que Clock configure su propio temporizador y se actualice cada segundo.
En aplicaciones con muchos componentes, es muy importante liberar recursos tomados por los componentes cuando se destruyen.
Podemos declarar métodos especiales en la clase del componente para ejecutar algún código cuando un componente se monta y desmonta:
Estos métodos son llamados «métodos de ciclo de vida».
El método componentDidMount() se ejecuta después que la salida del componente ha sido renderizada en el DOM. Este es un buen lugar para configurar un temporizador:
Nota como guardamos el ID del temporizador en this (this.timerID).
Si bien this.props es configurado por el mismo React y this.state tiene un significado especial, eres libre de añadir campos adicionales a la clase manualmente si necesitas almacenar algo que no participa en el flujo de datos (como el ID de un temporizador).
Eliminaremos el temporizador en el método de ciclo de vida componentWillUnmount():
Finalmente, implementaremos un método llamado tick() que el componente Clock ejecutará cada segundo.
Utilizará this.setState() para programar actualizaciones al estado local del componente.
Ahora el reloj cambia cada segundo.
Repasemos rápidamente lo que está sucediendo y el orden en que se invocan los métodos:
Cuando se pasa <Clock /> a ReactDOM.render(), React invoca al constructor del componente Clock. Ya que Clock necesita mostrar la hora actual, inicializa this.state con un objeto que incluye la hora actual. Luego actualizaremos este estado.
React invoca entonces al método render() del componente Clock. Así es como React sabe lo que se debe mostrar en pantalla. React entonces actualiza el DOM para que coincida con la salida del renderizado de Clock.
Cuando la salida de Clock se inserta en el DOM, React invoca al método de ciclo de vida componentDidMount(). Dentro de él, el componente Clock le pide al navegador que configure un temporizador para invocar al método tick() del componente una vez por segundo.
Cada segundo el navegador invoca al método tick(). Dentro de él, el componente Clock planifica una actualización de la interfaz de usuario al invocar a setState() con un objeto que contiene la hora actual. Gracias a la invocación a setState(), React sabe que el estado cambió e invoca de nuevo al método render() para saber qué debe estar en la pantalla. Esta vez, this.state.date en el método render() será diferente, por lo que el resultado del renderizado incluirá la hora actualizada. Conforme a eso React actualiza el DOM.
Si el componente Clock se elimina en algún momento del DOM, React invoca al método de ciclo de vida componentWillUnmount(), por lo que el temporizador se detiene.
Hay tres cosas que debes saber sobre setState().
Por ejemplo, esto no volverá a renderizar un componente:
En su lugar utiliza setState():
El único lugar donde puedes asignar this.state es el constructor.
React puede agrupar varias invocaciones a setState() en una sola actualización para mejorar el rendimiento.
Debido a que this.props y this.state pueden actualizarse de forma asincrónica, no debes confiar en sus valores para calcular el siguiente estado.
Por ejemplo, este código puede fallar en actualizar el contador:
Para arreglarlo, usa una segunda forma de setState() que acepta una función en lugar de un objeto. Esa función recibirá el estado previo como primer argumento, y las props en el momento en que se aplica la actualización como segundo argumento:
Cuando invocas a setState(), React combina el objeto que proporcionaste con el estado actual.
Por ejemplo, tu estado puede contener varias variables independientes:
Luego puedes actualizarlas independientemente con invocaciones separadas a setState():
La fusión es superficial, asi que this.setState({comments}) deja intacto a this.state.posts, pero reemplaza completamente this.state.comments.
Ni los componentes padres o hijos pueden saber si un determinado componente tiene o no tiene estado y no les debería importar si se define como una función o una clase.
Por eso es que el estado a menudo se le denomina local o encapsulado. No es accesible desde otro componente excepto de aquel que lo posee y lo asigna.
Un componente puede elegir pasar su estado como props a sus componentes hijos:
Esto también funciona para componentes definidos por el usuario:
El componente FormattedDate recibiría date en sus props y no sabría si vino del estado de Clock, de los props de Clock, o si se escribió manualmente:
A esto comúnmente se le llama flujo de datos «descendente» o «unidireccional». Cualquier estado siempre es propiedad de algún componente específico, y cualquier dato o interfaz de usuario derivados de ese estado solo pueden afectar los componentes «debajo» de ellos en el árbol.
Si imaginas un árbol de componentes como una cascada de props, el estado de cada componente es como una fuente de agua adicional que se le une en un punto arbitrario, pero también fluye hacia abajo.
Para mostrar que todos los componentes están verdaderamente aislados, podemos crear un componente App que represente tres componentes <Clock>:
Cada Clock configura su propio temporizador y se actualiza de forma independiente.
En las aplicaciones de React, si un componente tiene o no estado se considera un detalle de implementación del componente que puede cambiar con el tiempo. Puedes usar componentes sin estado dentro de componentes con estado y viceversa.
Manejar eventos en elementos de React es muy similar a manejar eventos con elementos del DOM. Hay algunas diferencias de sintaxis:
Los eventos de React se nombran usando camelCase, en vez de minúsculas.
Con JSX pasas una función como el manejador del evento, en vez de un string.
Por ejemplo, el HTML:
En React es algo diferente:
Otra diferencia es que en React no puedes retornar false para prevenir el comportamiento por defecto. Debes, explícitamente, llamar preventDefault. Por ejemplo, en un HTML plano, para prevenir el comportamiento por defecto de un enlace de abrir una nueva página, puedes escribir:
En cambio en React, esto podría ser:
Cuando estás utilizando React, generalmente, no debes llamar addEventListener para agregar escuchadores de eventos a un elemento del DOM después de que este es creado. Por el contrario, solo debes proveer un manejador de eventos cuando el elemento es inicialmente renderizado.
El problema con esta sintaxis es que un callback diferente es creado cada vez que LogginButton es renderizado. En la mayoría de los casos, esto está bien. Sin embargo, si este callback se pasa como una propiedad a componentes más bajos, estos componentes podrían renderizarse nuevamente. Generalmente, recomendamos ligar en el constructor o usar la sintaxis de campos de clases, para evitar esta clase de problemas de rendimiento.
Dentro de un bucle es muy común querer pasar un parámetro extra a un manejador de eventos. Por ejemplo, si id es el ID de una fila, cualquiera de los códigos a continuación podría funcionar:
En ambos casos, el argumento e que representa el evento de React va a ser pasado como un segundo argumento después del ID. Con una función flecha, tenemos que pasarlo explícitamente, pero con bind cualquier argumento adicional es pasado automáticamente.
git-init: crea un repositorio de Git vacío o reinicializa uno existente
Este comando crea un repositorio vacío de Git - básicamente un .git directorio con subdirectorios para objects, refs/heads, refs/tags, y los archivos de plantilla. HEADTambién se crea un archivo inicial que hace referencia al HEAD de la rama maestra.
Si se establece la $GIT_DIRvariable de entorno, especifica una ruta a utilizar en lugar de ./.gitpara la base del repositorio.
Si el directorio de almacenamiento de objetos se especifica a través de la $GIT_OBJECT_DIRECTORYvariable de entorno, los directorios sha1 se crean debajo; de lo contrario $GIT_DIR/objects , se utiliza el directorio predeterminado .
Ejecutar git init en un repositorio existente es seguro. No sobrescribirá las cosas que ya están allí. La razón principal para volver a ejecutar git init es recoger plantillas recién agregadas (o mover el repositorio a otro lugar si se da --separate-git-dir).
Inicie un nuevo repositorio Git para una base de código existente
Cree un directorio /path/to/my/codebase/.git.
Agregue todos los archivos existentes al índice.
Registre el estado prístino como el primer compromiso en la historia.
Crea un archivo package.json
Genere un paquete antiguo simple.json usando init heredado:
Generarlo sin tener que hacer preguntas:
npm init <initializer> se puede usar para configurar un paquete npm nuevo o existente.
initializeren este caso, se llama un paquete npm create-<initializer>, que será instalado por , y luego se ejecutará su bin principal, presumiblemente creando o actualizando y ejecutando cualquier otra operación relacionada con la inicialización.[npx](https://docs.npmjs.com/cli/npx)``package.json
El comando init se transforma en una npxoperación correspondiente de la siguiente manera:
npm init foo -> npx create-foo
npm init @usr/foo -> npx @usr/create-foo
npm init @usr -> npx @usr/create
Cualquier opción adicional se pasará directamente al comando, por lo que se npm init foo --helloasignará a npx create-foo --hello.
Si se omite el inicializador (simplemente llamando npm init), init recurrirá al comportamiento init heredado. Le hará un montón de preguntas y luego escribirá un package.json para usted. Intentará hacer conjeturas razonables basadas en los campos existentes, las dependencias y las opciones seleccionadas. Es estrictamente aditivo, por lo que mantendrá todos los campos y valores que ya se hayan establecido. También puede usar -y/ --yespara omitir el cuestionario por completo. Si aprueba --scope, creará un paquete con ámbito.
Usaremos las siguientes dependencias:
Usamos npm install para instalar todo esto.
Luego configuramos .babelrc para implementar el uso de @babel/preset-env que es para usar js moderno y @babel/preset-react que es para usarlo junto con React.
Vamos a configurar webpack con el archivo webpack.config.js en la raíz de nuestro proyecto.
Configuramos en nuestro package.json el siguiente script:
Corremos nuestro copilador con npm run build para que se aloje el la carpeta dist.
Primero lo primero, instale el módulo:
npm install webpack-dev-server --save-dev
Nota: Si bien puede instalar y ejecutar webpack-dev-server a nivel mundial, recomendamos instalarlo localmente. webpack-dev-server siempre usará una instalación local sobre una global.
Hay dos métodos principales recomendados para usar el módulo:
La forma más fácil de usarlo es con la CLI. En el directorio donde webpack.config.jsestá, ejecute:
node_modules / .bin / webpack-dev-server
Los scripts package.json de NPM son un medio conveniente y útil para ejecutar binarios instalados localmente sin tener que preocuparse por sus rutas completas. Simplemente defina un script como tal:
Y ejecute lo siguiente en su terminal / consola:
npm run start: dev
NPM hará referencia automática al binario node_modulespara usted y ejecutará el archivo o comando.
Cualquiera de los métodos iniciará una instancia del servidor y comenzará a escuchar las conexiones desde localhostel puerto 8080.
webpack-dev-server está configurado de manera predeterminada para admitir la recarga en vivo de archivos mientras edita sus activos mientras el servidor se está ejecutando.
Carga un archivo Sass / SCSS y lo compila en CSS.
Para comenzar, deberá instalar sass-loader:
Luego agregue el cargador a su webpackconfiguración. Por ejemplo:
file.js
file.scss
webpack.config.js
Y corre a webpacktravés de tu método preferido.
React (también llamada React.js o ReactJS) es una biblioteca de diseñada para crear con el objetivo de facilitar el desarrollo de . Es mantenido por y la comunidad de , han participado en el proyecto más de mil diferentes.
React intenta ayudar a los desarrolladores a construir que usan datos que cambian todo el . Su objetivo es ser sencillo, declarativo y fácil de combinar. React sólo maneja la en una aplicación; React es la Vista en un contexto en el que se use el patrón (Modelo-Vista-Controlador) o (Modelo-vista-modelo de vista). También puede ser utilizado con las extensiones de React-based que se encargan de las partes no-UI (que no forman parte de la interfaz de usuario) de una .
Según el servicio de análisis Javascript (en inglés "javascript analytics service"), Libscore, React actualmente está siendo utilizado en las páginas principales de Imgur, Bleacher Informe, , , SeatGeek, HelloSign, y otras.
React fue creada por Jordan Walke, un ingeniero de software en Facebook, inspirado por los problemas que tenía la compañía con el mantenimiento del código de los anuncios dentro de su plataforma. Enfocado en la experiencia del usuario y la eficiencia para sus programadores, influenciado por XHP (un marco de componentes de para ), nace el prototipo ReactJS.
El DOM virtual (VDOM) es un concepto de programación donde una representación ideal o “virtual” de la IU se mantiene en memoria y en sincronía con el DOM “real”, mediante una biblioteca como ReactDOM. Este proceso se conoce como .
Ya que “DOM virtual” es más un patrón que una tecnología específica, las personas a veces le dan significados diferentes. En el mundo de React, el término “DOM virtual” es normalmente asociado con ya que son objetos representando la interfaz de usuario. Sin embargo, React también usa objetos internos llamados “fibers” para mantener información adicional acerca del árbol de componentes. Éstos pueden ser también considerados como parte de la implementación de “DOM virtual” de React.
es un ambiente cómodo para aprender React, y es la mejor manera de comenzar a construir una nueva usando React.
En la primera línea npx no es un error de escritura: Es una .
Create React App no se encarga de la lógica de backend o de bases de datos; tan solo crea un flujo de construcción para frontend, de manera que lo puedes usar con cualquier backend. Para ello internamente usa y , pero no necesitas saber nada de estas herramientas para usar Create React App.
Cuando estés listo para desplegar a producción, ejecuta npm run build lo cual crea una compilación optimizada de tu aplicación en el directorio build. Puedes aprender más acerca de Create React App y en la .
JSX produce “elementos” de React. Exploraremos como renderizarlos en el DOM en la . A continuación puedes encontrar lo básico de JSX que será necesario para empezar.
En lugar de separar artificialmente tecnologías poniendo el maquetado y la lógica en archivos separados, React con unidades ligeramente acopladas llamadas “componentes” que contienen ambas. Volveremos a los componentes en , pero si aún no te sientes cómodo maquetando en JS, podría convencerte de lo contrario.
React usar JSX, pero la mayoría de la gente lo encuentra útil como ayuda visual cuando trabajan con interfaz de usuario dentro del código Javascript. Esto también permite que React muestre mensajes de error o advertencia más útiles.
Puedes poner cualquier dentro de llaves en JSX. Por ejemplo, 2 + 2, user.firstName, o formatName(user) son todas expresiones válidas de Javascript.
Dividimos JSX en varias líneas para facilitar la lectura. Aunque no es necesario, cuando hagas esto también te recomendamos envolverlo entre paréntesis para evitar errores por la .
Por ejemplo, class se vuelve en JSX, y tabindex se vuelve .
Por defecto, React DOM cualquier valor insertado en JSX antes de renderizarlo. De este modo, se asegura de que nunca se pueda insertar nada que no esté explícitamente escrito en tú aplicación. Todo es convertido en un string antes de ser renderizado. Esto ayuda a prevenir vulnerabilidades .
Recomendamos usar la en tu editor de elección para que tanto el código en ES6 como el código en JSX sea resaltado apropiadamente. Este sitio web utiliza el esquema de color , el cual es compatible con esto.
Si a menudo escribes código como este, el paquete puede hacerlo más simple.
Sí, ve la documentación sobre estilo .
“CSS-in-JS” se refiere a un patrón donde el CSS se compone usando JavaScript en lugar de definirlo en archivos externos. Lee una comparación de las bibliotecas CSS-in-JS .
Ten en cuenta que esta funcionalidad no es parte de React, sino que es proporcionada por bibliotecas de terceros. React no tiene una opinión sobre cómo se definen los estilos; en caso de dudas, un buen punto de partida es definir tus estilos en un archivo *.css separado como de costumbre y referirse a ellos usando .
React puede usarse para potenciar animaciones. Revisa y o , por ejemplo.
Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.Esta página proporciona una introducción a la idea de los componentes. Puedes encontrar una .
También puedes utilizar una para definir un componente:
Las clases tienen algunas características adicionales que veremos en las . Hasta entonces, usaremos componentes funcionales por su brevedad.
Para saber más sobre el razonamiento detrás de esta convención, puedes consultar .
Ya sea que declares un componente , este nunca debe modificar sus props. Considera esta función sum :
Tales funciones son llamadas por que no tratan de cambiar sus entradas, y siempre devuelven el mismo resultado para las mismas entradas.
Esta página introduce el concepto de estado y ciclo de vida en un componente de React. Puedes encontrar una .
Consideremos el ejemplo del reloj de . En , aprendimos solo una forma de actualizar la interfaz de usuario. Invocamos a ReactDOM.render() para que cambie el resultado renderizado.
Crear una con el mismo nombre que herede de React.Component.
Añadir un que asigne el this.state inicial:
Queremos cada vez que Clock se renderice en el DOM por primera vez. Esto se llama «montaje» en React.
También queremos cada vez que el DOM producido por Clock se elimine. Esto se llama «desmontaje» en React.
Anteriormente usamos una , pero se podría haber hecho igualmente con funciones comunes:
Aquí, e es un evento sintético. React define estos eventos sintéticos acorde a las , entonces no debes preocuparte por la compatibilidad a tráves de los navegadores. Mira la guía de referencia para aprender más.
Cuando defines un componente usando una , un patrón muy común es que los manejadores de eventos sean un método de la clase. Por ejemplo, este componente Toggle renderiza un botón que permite al usuario cambiar el estado entre “ENCENDIDO” y “APAGADO”:
Tienes que tener mucho cuidado en cuanto al significado de this en los callbacks de JSX. En JavaScript, los métodos de clase no están por defecto. Si olvidas ligar this.handleClick y lo pasas a onClick, this será undefined cuando se llame la función.
Esto no es un comportamiento especifico de React; esto hace parte de . Generalmente, si refieres un método sin usar () después de este, tal como onClick={this.handleClick}, deberías ligar ese método.
Si te molesta llamar bind, existen dos maneras de evitarlo. Si usas la sintaxis experimental , puedes usar los campos de clases para ligar los callbacks correctamente:
Esta sintaxis está habilitada por defecto en .
Si no estas usando la sintaxis de campos públicos de clases, puedes usar una en el callback:
Las dos líneas anteriores son equivalentes, y utilizan y respectivamente.
Cree un nuevo proyecto basado en React usando :
Cree un nuevo esmpaquete compatible con :
Babel es un y que se utiliza principalmente para convertir el (ES6 +) en una versión de compatible con versiones anteriores que pueden ejecutar los más antiguos . Babel es una herramienta popular para usar las funciones más nuevas del lenguaje de programación JavaScript. [[3]]()
Webpack (estilizado webpack ) es un módulo bundler. Es un paquete de módulos principalmente para JavaScript, pero puede transformar activos front-end como HTML, CSS e imágenes si se incluyen los complementos correspondientes. Webpack toma módulos con dependencias y genera activos estáticos que representan esos módulos.
Use con un servidor de desarrollo que proporcione recarga en vivo. Esto debe usarse solo para el desarrollo .
Utiliza debajo del capó, que proporciona acceso rápido en memoria a los activos del paquete web.
Nota : Muchas opciones de CLI están disponibles con webpack-dev-server. Explore este .
Consulte para obtener más casos de uso y opciones.
El sass-loader requiere que instales o por tu cuenta (puedes encontrar más documentación a continuación). Esto le permite controlar las versiones de todas sus dependencias y elegir qué implementación de Sass usar.
Encadene el sass-loader con el y el para aplicar inmediatamente todos los estilos al DOM o al para extraerlo en un archivo separado.
