Realtime apps en ReactJS

Clase 25 de 33 • Curso Profesional de React.js 2017

Contenido del curso

Introducción a ReactJS

Ciclo de vida de un componente, States, Props y Browserify

Realtime y rutas con ReactJS

Complementos del curso

Tomar examen

Comentarios

Aaron Chavarría

student•

Ademas deben instalar npm install --save babel-cli
ya que ha cambiado con respecto al ejemplo, tambien tienen que agregar en el package.json

"babel": {
"presets": [
"es2015"
]
}

Xavi Gonzalez

student•

disculpa como seria el script para compilar es2015

Xavi Gonzalez

student•

listo ya lo aregle muchas gracias

Francisco Eris

student•

montar server real time

- npm install --save express
framework de noe.js para monta servidor web
- npm install --save socket.io
paquete para mantener la comunicacion abierta
- npm install --save socket.io-client
libreria por el lado del cliente para utilziar browserify
- npm install --save babel
para correr nuestro servidor y poder correr codigo de ecmascript 6

Javier Ruiz Vázquez

student•

{
"name": "pokechat",
"dependencies": {
"babel-cli": "^6.5.1",
"babel-core": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"express": "^4.13.4",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"socket.io": "^1.4.5",
"socket.io-client": "^1.4.5",
"uid": "0.0.2"
},
"scripts": {
"build": "browserify -t [babelify --presets [es2015 react] ] app.js > public/app.js",
"start": "babel-node index.js"
}
}

obtengo un error con npm start

babel-node index.js

sh: babel-node: command not found

npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.2.6
npm ERR! npm v2.14.12
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! pokechat@ start: babel-node index.js
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the pokechat@ start script 'babel-node index.js'.
npm ERR! This is most likely a problem with the pokechat package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel-node index.js
npm ERR! You can get their info via:
npm ERR! npm owner ls pokechat
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/javaruiz/Documents/platzi/react/realtime/npm-debug.log

Ranferi Palacios Valencia

student•

Esto esta buenisimo

Aitor Chicharro

student•

Es posible unir el express con un servidor django?

Jesús Frías

student•

Al lanzar el npm start, me devuelve el siguiente error:

import express from 'express';
^^^^^^
SyntaxError: Unexpected reserved word
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at loader (C:\xampp\htdocs\platzi\react\pokechat\node_modules\babel-cli\node_modules\babel-register\lib\node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (C:\xampp\htdocs\platzi\react\pokechat\node_modules\babel-cli\node_modules\babel-register\lib\node.js:136:7)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at C:\xampp\htdocs\platzi\react\pokechat\node_modules\babel-cli\lib\_babel-node.js:161:27
at Object.<anonymous> (C:\xampp\htdocs\platzi\react\pokechat\node_modules\babel-cli\lib\_babel-node.js:162:7)
at Module._compile (module.js:460:26)

También he probado a añadir los presets que he visto por los comentarios de aquí pero sigo sin solucionarlo. ¿alguna idea?

Ana Belen Medina Garcia

student•

Me da el mismo error, conseguiste solucionarlo?

Francisco Urbano

student•

Han logrado solucionar el error?

Realtime apps en ReactJS

Introducción a ReactJS

Código del proyecto

¿Qué es React.js?

Del escritorio al browser: Single Page Apps

Patrones de arquitectura en Frontend

Filosofia de Componentes

Componente básico con React

React Developer Tools

Hola mundo en React.js

PropTypes y Render

Creando mas componentes

Preguntas y Respuestas

Conceptos básicos de JSX y ReactJS

Empieza con ReactJS, la librería Javascript de Facebook

Cómo definir una vista con ReactJS

Cómo usar Web Components con ReactJS y AngularJS

Ciclo de vida de un componente, States, Props y Browserify

Instalacion de Browserify

Teoría sobre ciclos de vida en ReactJS

Event handling, State y Browserify

Integración con Librerías de Terceros

Preguntas y Respuestas

Cómo filtrar una lista con ReactJS

Manejo de datos en tiempo real con RethinkDB y ReactJS

Realtime y rutas con ReactJS

Tools CSS: Reset

La teoría detrás de una aplicación RealTime