Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Usando JSX y React

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Getting Starting with React.
Data Persistence and Sessions With React

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product image
What You'll Be Creating

JSX es similar a una mezcla de XML y HTML. Utilizaras JSX dentro del código React para crear fácilmente componentes para tus aplicaciones. JSX se transforma en JavaScript cuando React compila el código.

La belleza de React es que puedes crear código reutilizable y estructurar fácilmente tu aplicación desde una mentalidad basada en componentes. Por último, la brecha entre probar estructuras de ideas formadas semánticamente y aplicarlas nunca ha estado más cerca.

Su primer contacto con JSX

Aquí hay un ejemplo de JSX que se utiliza para procesar HTML:

Para crear un componente, simplemente use una variable local que empiece con una letra mayúscula, por ejemplo:

Nota: Hay palabras reservadas en JSX, ya que es esencialmente JavaScript después de todo—por lo que las palabras clave como class y for se desaconsejan como nombres de atributo. En su lugar, los componentes React esperan que los nombres de propiedad React como className y htmlFor, por ejemplo.

Anidamiento de Etiquetas

Especifique los hijos dentro de su JSX de la siguiente manera:

Probando a JSX

Utilice el Babel REPL para probar JSX.

Sub-componentes y espacios de nombres

La creación de formularios es fácil con JSX y los subcomponentes, por ejemplo:

Para que esto funcione, debe crear los subcomponentes como atributos del componente principal:

Expresiones

Para usar algún JavaScript para crear un resultado para usarlo en un valor de atributo, React solo necesita que lo envuelvas en {} así:

También puede pasar un valor booleano para atributos de formulario como disabled, checked y así sucesivamente. Estos valores también pueden ser escritos en el archivo si quiere con solo escribir HTML.

Distribución de atributos

Cuando desee establecer varios atributos, asegúrese de hacer esto en la declaración de su componente y nunca después. Declaración posterior se convierte en un anti-patrón peligroso que significa que podría no tener los datos de la propiedad hasta mucho más tarde en la ejecución.

Agregue varias propiedades a su componente como tal, utilizando el nuevo operador de ES6 ....

Comentarios en JSX

Puede usar los comentarios de estilo // y /* ... */ multilínea dentro de su JSX. Por ejemplo:

Errores comunes con JSX

Hay algunas cosas que pueden confundir a algunas personas con JSX, por ejemplo al agregar atributos a elementos HTML nativos que no existen en la especificación HTML.

React no procesará ningún atributo en elementos HTML nativos que no estén en la especificación a menos que añada un prefijo data- asi:

Además, la representación de HTML dentro del contenido dinámico puede resultar confusa debido a sanitizacion y la protección XSS que React ha incorporado. Por esta razón, React proporciona el dangerouslySetInnerHTML.

Aplicación de ejemplo de chat

Es posible que haya visto la aplicación Gitter. Es una aplicación de chat en tiempo real que está dirigida principalmente a los desarrolladores. Muchas personas lo están utilizando para discutir sus proyectos en GitHub, debido a su fácil integración con GitHub y ser capaz de crear un canal para su repositorio.

Este tipo de aplicación se puede crear fácilmente con React implementando la API WebRTC para crear una charla p2p en el navegador. Para ello, utilizaremos los módulos PeerJs y socket.io para Node.

Para darle una idea clara de la arquitectura de la aplicación, aquí hay un diagrama básico de bajo nivel UML:

file

ChatServer recibe mensajes de señal con PeerJS, y cada cliente lo utilizará como un proxy para cuidar el NAT traversal.

Comenzaremos la aplicación desde cero para darle una buena idea de cómo crear una aplicación React. Primero cree un nuevo directorio para su aplicación, y en su interior haga un package.json.

Este archivo package.json es utilizado por npm para configurar fácilmente su aplicación. Especificamos nuestras dependencias: express, un marco web que usaremos para servir nuestra aplicación; Peer, el servidor peerjs que usaremos para la señalización; Socket.io que se utilizará para el sondeo y la implementación webRTC. React-bootstrap y bootstrap son paquetes para usar el CSS de Twitter para diseñar nuestra aplicación.

También necesitaremos algunos paquetes adicionales, y para eso usaremos bower.

Cree un bower.json y añada lo siguiente:

Con esta configuración, reducimos react, jQuery, bootstrap, eventEmitter para activar eventos y la biblioteca peerJS Client para envolver el WebRTC.

Por último, especifique dónde instalarlo configurando el archivo .bowerrc:

Desde aquí, sólo tiene que sentarse e instalar sus dependencias a través de:

Una vez que este comando haya terminado, verá un nuevo directorio node_modules y src/lib. Estos contienen los módulos listos para su uso.

Ahora cree un app.js en el directorio principal junto con su package.json, etc. Este será el punto de entrada principal de su aplicación.

Esto simplemente creará un servidor Express, haciendo que los archivos src/ que acabamos de obtener con bower estén ahora accesibles vía HTTP. Entonces, se creó una instancia socket.io para escuchar en el objeto expressServer. Esto se utiliza para votar y facilitar el siguiente paso para el PeerServer, que realmente hará la parte de chat de WebRTC.

Para configurar un PeerServer, todo lo que necesita hacer es especificar port y path en el que se ejecutará el servidor y, a continuación, comenzar a configurar eventos con el método .on. Estamos usando un archivo separado llamado Events.js para especificar los eventos de nuestra aplicación.

Aquí utilizamos el evento events.CONNECT para especificar cuándo un usuario se ha conectado a nuestra aplicación. Esto será utilizado por los estados de nuestros componentes de vista para actualizar sus pantallas en tiempo real.

Para ello, necesitamos crear el Servidor para nuestras conexiones punto a punto a través de proxy.

Cree un archivo en src/Server.js y agregue lo siguiente:

Esta es la parte principal de la aplicación. Aquí configuramos el objeto ChatServer con todas sus funciones.

Primero usamos socket.io para establecer la señalización de un nuevo usuario conectado a través de los events.CONNECT asi:

A continuación, para conectarse al PeerServer, utilizamos lo siguiente:

A continuación, escuchamos los eventos mediante el método on:

También tenemos nuestro JSX dentro de componentes en el directorio components/chat. Tómese su tiempo para mirarlos a  todos en el repositorio. Me centraré en el componente ChatBox por ahora:

Esta clase toma el uso del ChatServer que creamos antes, utilizándolo como un proxy para el componente ChatBox.

Los componentes y las bibliotecas se procesaran finalmente en la página con index.html y se sirven a través del nodo express.

Para iniciar la aplicación, ejecute npm start y apunte su navegador a http://localhost:3001 para echar un vistazo a la conversación.

Servir desde la nube en Heroku

Servir desde la nube es realmente fácil con Heroku. Regístrese para una cuenta gratuita y, a continuación, puede instalar el cinturón de herramientas heroku en su sistema. Lea más acerca de cómo instalar a Heroku en el Centro de Dev Heroku.

Ahora que tiene Heroku disponible, inicie sesión y cree un nuevo proyecto de la siguiente manera:

Aquí obtendrás un nombre aleatorio de Heroku y la URL de tu aplicación—en nuestro ejemplo es http://sharp-rain-871.herokuapp.com/. Heroku también crea un repo git para esta aplicación.

Ahora es tan simple como empujar su código a heroku:

Una vez finalizado el proceso, podrá iniciar su servicio web con lo siguiente:

Ahora solo visita la URL que se proporciona, o como atajo, utiliza el comando open asi:

Conclusiones

Ha aprendido a crear componentes JSX ya relacionarlos con React, con un ejemplo detallado de la aplicación de chat. Tómese su tiempo para revisar el código y ver cómo React y los components/chat directorio están trabajando.

¡Combinado con Heroku, puedes comenzar a hackear y crear sus propias aplicaciones de React para la nube!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.