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

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 » 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!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post