Usando JSX y 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:

var div = <div className="foo" />;
ReactDOM.render(div, document.getElementById('example'));

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

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;

ReactDOM.render(myElement, document.getElementById('example'));

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:

var User, Profile;

// You write in JSX:
var app = <User className="vip-user"><Profile>click </Profile></User>;

// What will get outputted in JS:
var app = React.createElement(
  User,
  {className:"vip-user"},
  React.createElement(Profile, null, "click")
);

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:

var Form = FormComponent;

var App = (
  <Form>
    <Form.Row>
      <Form.Label htmlFor='login' />
      <Form.Input name='login' type='text' />
    </Form.Row>
    <Form.Row>
      <Form.Label htmlFor='password'  />
      <Form.Input name='pass' type='password' />
    </Form.Row>
  </Form>
);

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

var FormComponent = React.createClass({ ... });

FormComponent.Row = React.createClass({ ... });
FormComponent.Label = React.createClass({ ... });
FormComponent.Input = React.createClass({ ... });

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í:

// You write in JSX:
var myUser = <User username={window.signedIn ? window.username : ''} />;

// Will become this in JS:
var myUser = React.createElement(
  User,
  {username: window.signedIn ? window.username : ''}
);

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.

// Make field required
<input type="text" name="username" required />; 
<input type="text" name="username" required={true} />;

// Check by default
<input type="checkbox" name="rememberMe" value="true" checked={true} />;

// Enable a field
<input type="text" name="captcha" disabled={false} />

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 ....

 var props = {};
 props.username = username;
 props.email = email;
 var userLogin = <userLogin {...props} />;
 ```
 
You can use these prop variables multiple times. If you need to override one of the properties, it can be done by appending it to the component after the `...` spread operator, for example:


```js
var props = { username: 'jimmyRiddle' };
var userLogin = <userLogin {...props} username={'mickeyFinn'} />;
console.log(component.props.username); // 'mickeyFinn'

Comentarios en JSX

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

var components = (
  <Navigation>
    {/* child comment, put {} around */}
    <User
      /* multi
         line
         comment here */
      name={window.isLoggedIn ? window.name : ''} // Here is a end of line comment
    />
  </Navigation>
);

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:

<div data-custom-attribute="bar" />

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.

<div dangerouslySetInnerHTML={{__html: 'Top level &raquo; Child'}} />

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:

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.

{
  "name": "react-webrtc-chat",
  "version": "0.0.0",
  "description": "React WebRTC chat with Socket.io, BootStrap and PeerJS",
  "main": "app.js",
  "scripts": {
    "start-app": "node app.js",
    "start": "npm run start-app"
  },
  "keywords": [
    "webrtc",
    "react"
  ],
 "license": "MIT",
  "dependencies": {
    "express": "~4.13.3",
    "peer": "~0.2.8",
    "react": "~0.12.2",
    "react-dom": "^0.14.1",
    "socket.io": "~1.0.6"
  },
  "devDependencies": {
    "babel-preset-react": "^6.0.14",
    "babelify": "^7.1.0",
    "browserify": "^12.0.1"
  }
}

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:

{
  "name": "react-webrtc-chat",
  "main": "app.js",
  "version": "0.0.0",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "public/lib",
    "test",
    "tests"
  ],
  "dependencies": {
    "react": "~0.12.2",
    "jquery": "~2.1.4",
    "eventEmitter": "~4.2.7",
    "peerjs": "~0.3.14",
    "bootstrap": "~3.3.5"
  }
}

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:

{
  "directory": "src/lib"
}

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

$ bower install && npm install

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.

//Configure our Services
var express = require('express'),
  PeerServer = require('peer').PeerServer,
    events = require('./src/Events.js'),
    app = express(),
    port = process.env.PORT || 3001;

//Tell express to use the 'src' directory
app.use(express.static(__dirname + '/src'));

//Configure the http server and PeerJS Server
var expressServer = app.listen(port);
var io = require('socket.io').listen(expressServer);
var peer = new PeerServer({ port: 9000, path: '/chat' });

//Print some console output
console.log('#### -- Server Running -- ####');
console.log('Listening on port', port);

peer.on('connection', function (id) {
  io.emit(events.CONNECT, id);
  console.log('# Connected', id);
});

peer.on('disconnect', function (id) {
  io.emit(events.DISCONNECT, id);
  console.log('# Disconnected', id);
});

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.

peer.on('connection', function (id) {
  io.emit(events.CONNECT, id);
  console.log('# Connected', id);
});

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:

/* global EventEmitter, events, io, Peer */
'use strict';

function ChatServer() {
  EventEmitter.call(this);
  this._peers = {};
}

ChatServer.prototype = Object.create(EventEmitter.prototype);

ChatServer.prototype.onMessage = function (cb) {
  this.addListener(events.MSG, cb);
};

ChatServer.prototype.getUsername = function () {
  return this._username;
};

ChatServer.prototype.setUsername = function (username) {
  this._username = username;
};

ChatServer.prototype.onUserConnected = function (cb) {
  this.addListener(events.CONNECT, cb);
};

ChatServer.prototype.onUserDisconnected = function (cb) {
  this.addListener(events.DISCONNECT, cb);
};

ChatServer.prototype.send = function (user, message) {
  this._peers[user].send(message);
};

ChatServer.prototype.broadcast = function (msg) {
  for (var peer in this._peers) {
    this.send(peer, msg);
  }
};

ChatServer.prototype.connect = function (username) {
  var self = this;
  this.setUsername(username);
  this.socket = io();
  this.socket.on('connect', function () {
    self.socket.on(events.CONNECT, function (userId) {
      if (userId === self.getUsername()) {
        return;
      }
      self._connectTo(userId);
      self.emit(events.CONNECT, userId);
      console.log('User connected', userId);
    });
    self.socket.on(events.DISCONNECT, function (userId) {
      if (userId === self.getUsername()) {
        return;
      }
      self._disconnectFrom(userId);
      self.emit(events.DISCONNECT, userId);
      console.log('User disconnected', userId);
    });
  });
  console.log('Connecting with username', username);
  this.peer = new Peer(username, {
    host: location.hostname,
    port: 9000,
    path: '/chat'
  });
  this.peer.on('open', function (userId) {
    self.setUsername(userId);
  });
  this.peer.on('connection', function (conn) {
    self._registerPeer(conn.peer, conn);
    self.emit(events.CONNECT, conn.peer);
  });
};

ChatServer.prototype._connectTo = function (username) {
  var conn = this.peer.connect(username);
  conn.on('open', function () {
    this._registerPeer(username, conn);
  }.bind(this));
};

ChatServer.prototype._registerPeer = function (username, conn) {
  console.log('Registering', username);
  this._peers[username] = conn;
  conn.on('data', function (msg) {
    console.log('Message received', msg);
    this.emit(events.MSG, { content: msg, author: username });
  }.bind(this));
};

ChatServer.prototype._disconnectFrom = function (username) {
  delete this._peers[username];
};

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:

ChatServer.prototype.connect = function (username) {
  var self = this;
  this.setUsername(username);
  this.socket = io();
  this.socket.on('connect', function () {
    self.socket.on(events.CONNECT, function (userId) {
      if (userId === self.getUsername()) {
        return;
      }
      self._connectTo(userId);
      self.emit(events.CONNECT, userId);
      console.log('User connected', userId);
    });

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

this.peer = new Peer(username, {
    host: location.hostname,
    port: 9000,
    path: '/chat'
  });

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

this.peer.on('open', function (userId) {
    self.setUsername(userId);
 });
this.peer.on('connection', function (conn) {
    self._registerPeer(conn.peer, conn);
    self.emit(events.CONNECT, conn.peer);
 });

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:

/** @jsx React.DOM */

'use strict';

var ChatBox = React.createClass({

  getInitialState: function () {
    return { users: [] };
  },

  componentDidMount: function () {
    this.chatProxy = this.props.chatProxy;
    this.chatProxy.connect(this.props.username);
    this.chatProxy.onMessage(this.addMessage.bind(this));
    this.chatProxy.onUserConnected(this.userConnected.bind(this));
    this.chatProxy.onUserDisconnected(this.userDisconnected.bind(this));
  },

  userConnected: function (user) {
    var users = this.state.users;
    users.push(user);
    this.setState({
      users: users
    });
  },

  userDisconnected: function (user) {
    var users = this.state.users;
    users.splice(users.indexOf(user), 1);
    this.setState({
      users: users
    });
  },

  messageHandler: function (message) {
    message = this.refs.messageInput.getDOMNode().value;
    this.addMessage({
      content: message,
      author : this.chatProxy.getUsername()
    });
    this.chatProxy.broadcast(message);
  },

  addMessage: function (message) {
    if (message) {
      message.date = new Date();
      this.refs.messagesList.addMessage(message);
    }
  },

  render: function () {
    return (
      <div className="chat-box" ref="root">
        <div className="chat-header ui-widget-header">React p2p Web RTC Chat</div>
        <div className="chat-content-wrapper row">
          <UsersList users={this.state.users} username={this.props.username} ref="usersList"></UsersList>
          <MessagesList ref="messagesList"></MessagesList>          
        </div>
        <MessageInput
          ref="messageInput"
          messageHandler={this.messageHandler}>
        </MessageInput>
      </div>
    );
  }
});

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:

$ git clone git@github.com:tomtom87/react-p2p-chat.git
$ cd react-p2p-chat
$ heroku create
Creating sharp-rain-871... done, stack is cedar-14
http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git
Git remote heroku added

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:

$ git push heroku master

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

$ heroku ps:scale web=1

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

 $ heroku open

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!