Probablemente haya oído hablar del popular marco JavaScript de Facebook:React. Es utilizado por muchos sitios web populares, incluido el propio Facebook e Instagram. En este artículo, encontrará 5 ejemplos prácticos que se han creado con React y que le darán una ventaja inicial con el marco.
¿Qué tiene de especial React?
React se basa en el concepto de componentes. Esto contrasta con marcos como Angular y Ember, que utilizan enlaces de datos bidireccionales para actualizar el HTML de la página. En mi opinión, React es más fácil de aprender que Angular y Ember:es mucho más pequeño y funciona bien con jQuery y otros marcos. También es extremadamente rápido, porque utiliza un DOM virtual y sincroniza solo las partes modificadas con la página subyacente (acceder al DOM sigue siendo la parte más lenta de una aplicación web moderna, razón por la cual el marco mejora el rendimiento al optimizarlo). ).
Sin embargo, la otra cara de la moneda es que se necesita un poco más de código en React para lograr las mismas cosas que se pueden hacer fácilmente con un enlace de datos, como puede ver en los ejemplos a continuación. Para una comparación, vea nuestro artículo sobre Angular.
¿Cómo usarlo?
Para usar React, debe incluir un solo archivo JavaScript en su página. Facebook proporciona amablemente un CDN al que puede vincular directamente:
<script src="http://fb.me/react-0.10.0.min.js"></script>
Esto le da acceso a Reaccionar global objeto, que contiene una serie de métodos útiles, algunos de los cuales se pueden ver en estos ejemplos. La forma recomendada de escribir aplicaciones web React es usando un lenguaje llamado JSX . Esta es una versión ligeramente mejorada de JavaScript que le permite inicializar los componentes de React usando una sintaxis similar a HTML directamente en su código. Se compila en JavaScript antes de que el navegador lo interprete. JSX es completamente opcional; puede usar JavaScript normal si lo prefiere.
Pero basta de hablar, ¡veamos un poco de código!
1. Temporizador
Como mencioné, los componentes básicos de las aplicaciones de reacción son componentes. Se crean llamando a React.createClass() con un objeto de opciones y métodos. Cada componente tiene un estado (un objeto con datos) y cada uno está a cargo de su propia representación:el render() Se llama al método cada vez que cambia el estado. Aquí hay un ejemplo para construir un temporizador simple:
(Haga clic en el enlace Resultado para ver el ejemplo en acción)
Puede incrustar cualquier expresión de JavaScript entre llaves {} al crear un componente. En este ejemplo, pasamos una fecha de inicio, que se usará en cada llamada a la función tick() para calcular los segundos transcurridos.
2. Menú de navegación
Veamos cómo podemos manejar los eventos de clic en React creando un menú de navegación:
Probablemente haya notado en el código de estos ejemplos que usamos atributos como className que en realidad no existen en HTML. Esto se debe a que cuando devuelve un nuevo elemento
no devuelve HTML, sino una instancia del componente React.DOM.p . Puedes leer más sobre esto aquí.
3. Búsqueda en tiempo real
Hemos aprendido una y otra vez que la gente odia esperar. Así es como puede usar React para crear una experiencia de búsqueda en tiempo real. (Para una comparación, vea nuestra versión con AngularJS).
Este ejemplo también demuestra otro concepto importante en React:las actualizaciones del estado de su controlador deberían afectar el HTML, no al revés. En este caso, una vez que haya establecido el valor del cuadro de texto, permanecerá igual, ignorando las pulsaciones de teclas del usuario, a menos que lo actualice en onChange función (puede cambiar este comportamiento, pero es la forma recomendada de hacer las cosas).
4. Formulario de pedido
El verdadero poder de React surge cuando combina varios componentes. Esto le permite estructurar mejor su código e introducir una separación de preocupaciones. También hará que su código sea reutilizable en diferentes partes de su aplicación web. Este es un ejemplo de un formulario de pedido que ayuda a los clientes a planificar sus presupuestos (consulte la versión de Angular aquí):
El primer problema que surge cuando se combinan múltiples componentes es cómo hacer que se comuniquen. Una forma es pasar los datos que necesita en los atributos mientras los inicializa. Esto solo funciona de componentes principales a secundarios. Para la comunicación en la otra dirección, puede pasar uno de los métodos del componente principal como un atributo al elemento secundario. El niño puede llamar a este método y notificar al padre de los eventos. Puedes leer más sobre esto aquí.
5. Aplicación de imagen con AJAX
Este ejemplo demostrará cómo puede combinar reaccionar con jQuery y cómo cargar resultados a través de AJAX. Mientras que los marcos como Angular tienen sus enfoques personalizados al hacer AJAX, React le permite usar cualquier otra biblioteca con la que se sienta cómodo (vea la versión de Angular aquí).
Tenga en cuenta que nuestro ejemplo utiliza el mismo componente de imagen al representar la lista de imágenes y la lista de favoritos. Esta reutilización es uno de los beneficios de organizar su código en componentes.
Pon a prueba lo que has aprendido
¿Qué es Reaccionar?
¿Quién creó React?
Google Twitter Facebook
¿Para qué se utiliza React?
¿Qué tiene de especial React?
DOM virtual
¿Qué idioma es este?
JavaScript JSX
¿Qué hace este componente?
¿Qué hace este código?
¿Qué hace este código?
¡Buen trabajo!
.
Ahora pon celosos a tus amigos:
Responder12 de 22
¿Hacia dónde sigue?
React le permite dar una estructura limpia a su aplicación y promover la reutilización de código. Y gracias a su poderoso dominio virtual, el marco puede acelerar interfaces complejas. React es adecuado para renderizar tanto en el lado del servidor como en el del cliente, y permite crear aplicaciones isomórficas que se transicionan sin problemas entre el cliente y el servidor.
Pero todavía hay más que aprender sobre reaccionar. Te sugiero que empieces aquí:
- Página de inicio de React.
- Kit de inicio y guía de inicio.
- Tutorial detallado paso a paso.
- Complementos de React.
- Etiqueta de desbordamiento de pila.