Instalacion de Browserify

Clase 16 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

Leonel Contreras

student•

Si tienen problemas al ejecutar el build

Traten instalando:

npm install --save-dev babel-preset-es2015 babel-preset-react

cambien el script build en el package.json por:

"build": "browserify -t [babelify --presets [es2015 react] ] app.js > build.js"

ejecuten npm run build

Esto debido a los cambios en babelify. Ahora los presets y plugins se instalan por separado.

davidgv

student•

A mayores yo he tenido que añadir

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

Al archivo package.json para que no me diera problemas. Por lo que he leído se puede añadir tanto en el package.json como en un archivo nuevo llamado .babelrc con la siguiente estrcutura:

{
"presets": [
"es2015",
"react"
]
}

Cualquiera de los dos sirve.

Wilson Giovanny Velandia Barreto

student•

El error continua, alguna otra solución?

Adrián Rodríguez

student•

Ya que el curso no está actualizado (muy mal por su parte, al menos deberían actualizar los textos) les dejo la solución a los que tengan problemas con React.render is deprecated:

1 - Deben instalar npm install --save react-dom
2 - Hacer el import con: import ReactDOM from 'react-dom';

Para realizar la renderización con ReactDOM.render.

Francisco Urbano

student•

Hola he colocado eso, por aún no me pinta nada.

Francisco Eris

student•

Si trabajo con windows, como hago para importar el modulo react?

Sergio Guerra

student•

Tienes que tener npm instalado, npm viene con node.js o io.js

Cesar Ivan Segura

student•

Es normal que cuando instale browserify me instale como 50 módulos más? al inicio los instale 1 a 1 y noté que al instalar browserify me instalaba los demás modulos


  
  
├─┬ browserify@12.0.1   
│ ├── assert@1.3.0   
│ ├─┬ browser-pack@6.0.1   
│ │ ├─┬ combine-source-map@0.7.1   
│ │ │ ├─┬ inline-source-map@0.6.1   
│ │ │ │ └── source-map@0.4.4   
│ │ │ ├── lodash.memoize@3.0.4   
│ │ │ └── source-map@0.4.2   
│ │ └── umd@3.0.1   
│ ├── browser-resolve@1.10.1   
│ ├─┬ browserify-zlib@0.1.4   
│ │ └── pako@0.2.8   
│ ├─┬ buffer@3.5.2   
│ │ ├── base64-js@0.0.8   
│ │ ├── ieee754@1.1.6   
│ │ └── is-array@1.0.1   
│ ├─┬ concat-stream@1.5.1   
│ │ └── typedarray@0.0.6   
│ ├─┬ console-browserify@1.1.0   
│ │ └── date-now@0.1.4   
│ ├── constants-browserify@1.0.0   
│ ├─┬ crypto-browserify@3.11.0   
│ │ ├─┬ browserify-cipher@1.0.0   
│ │ │ ├─┬ browserify-aes@1.0.5   
│ │ │ │ └── buffer-xor@1.0.3   
│ │ │ ├─┬ browserify-des@1.0.0   
│ │ │ │ └─┬ des.js@1.0.0   
│ │ │ │   └── minimalistic-assert@1.0.0   
│ │ │ └── evp_bytestokey@1.0.0   
│ │ ├─┬ browserify-sign@4.0.0   
│ │ │ ├── bn.js@4.2.0   
│ │ │ ├── browserify-rsa@4.0.0   
│ │ │ ├─┬ elliptic@6.0.2   
│ │ │ │ ├── brorand@1.0.5   
│ │ │ │ └── hash.js@1.0.3   
│ │ │ └─┬ parse-asn1@5.0.0   
│ │ │   └── asn1.js@4.0.0   
│ │ ├── create-ecdh@4.0.0   
│ │ ├─┬ create-hash@1.1.2   
│ │ │ ├── cipher-base@1.0.2   
│ │ │ └── ripemd160@1.0.1   
│ │ ├── create-hmac@1.1.4   
│ │ ├─┬ diffie-hellman@5.0.0   
│ │ │ └── miller-rabin@4.0.0   
│ │ ├── pbkdf2@3.0.4   
│ │ ├── public-encrypt@4.0.0   
│ │ └── randombytes@2.0.1   
│ ├── defined@1.0.0   
│ ├── deps-sort@2.0.0   
│ ├── domain-browser@1.1.4   
│ ├── duplexer2@0.1.4   
│ ├── events@1.1.0   
│ ├─┬ glob@5.0.15   
│ │ ├─┬ inflight@1.0.4   
│ │ │ └── wrappy@1.0.1   
│ │ └── once@1.3.2   
│ ├─┬ has@1.0.1   
│ │ └── function-bind@1.0.2   
│ ├── htmlescape@1.1.0   
│ ├── https-browserify@0.0.1   
│ ├── inherits@2.0.1   
│ ├─┬ insert-module-globals@7.0.1   
│ │ ├── is-buffer@1.1.0   
│ │ └─┬ lexical-scope@1.2.0   
│ │   └── astw@2.0.0   
│ ├── isarray@0.0.1   
│ ├─┬ JSONStream@1.0.6   
│ │ ├── jsonparse@1.2.0   
│ │ └── through@2.3.8   
│ ├─┬ labeled-stream-splicer@2.0.0   
│ │ └── stream-splicer@2.0.0   
│ ├─┬ module-deps@4.0.2   
│ │ ├── detective@4.3.1   
│ │ └── stream-combiner2@1.1.1   
│ ├── os-browserify@0.1.2   
│ ├─┬ parents@1.0.1   
│ │ └── path-platform@0.11.15   
│ ├── path-browserify@0.0.0   
│ ├── process@0.11.2   
│ ├── punycode@1.3.2   
│ ├── querystring-es3@0.2.1   
│ ├── read-only-stream@2.0.0   
│ ├─┬ readable-stream@2.0.4   
│ │ ├── core-util-is@1.0.1   
│ │ ├── process-nextick-args@1.0.3   
│ │ └── util-deprecate@1.0.2   
│ ├── resolve@1.1.6   
│ ├─┬ shasum@1.0.2   
│ │ ├── json-stable-stringify@0.0.1   
│ │ └── sha.js@2.4.4   
│ ├─┬ shell-quote@1.4.3   
│ │ ├── array-filter@0.0.1   
│ │ ├── array-map@0.0.0   
│ │ ├── array-reduce@0.0.0   
│ │ └── jsonify@0.0.0   
│ ├── stream-browserify@2.0.1   
│ ├─┬ stream-http@2.0.2   
│ │ └── builtin-status-codes@1.0.0   
│ ├── string_decoder@0.10.31   
│ ├─┬ subarg@1.0.0   
│ │ └── minimist@1.2.0   
│ ├─┬ syntax-error@1.1.4   
│ │ └── acorn@1.2.2   
│ ├── through2@2.0.0   
│ ├── timers-browserify@1.4.1   
│ ├── tty-browserify@0.0.0   
│ ├─┬ url@0.11.0   
│ │ └── querystring@0.2.0   
│ ├── util@0.10.3   
│ ├─┬ vm-browserify@0.0.4   
│ │ └── indexof@0.0.1   
│ └── xtend@4.0.1

Juan Carlos Ruiz González

student•

Si, son las dependencias de browserify

Jairo Morales Morales Dl Torre

student•

Warning: React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead.

Oscar Javier Bello Rodriguez Juliana Bello R

student•

En la última actualización cambiaron varias cosas, ahora debes bajarte react-dom, por ejemplo

import React from 'react';  
import ReactDOM from 'react-dom';  
import MiComponente from './componente';  
  
ReactDOM.render(<MiComponente />, document.getElementById('application'));

En la pagina oficial de react puedes resolver esas dudas.

Omar Yahir Mendoza Vidrio

student•

Muchas gracias, yo utilizo Ubuntu 14.04 por lo que adicional tuve que instalar lo siguiente:

$ sudo apt-get install nodejs-legacy

Juan Carlos Ruiz González

student•

Por si a alguien le interesa ver como se integraría con Webpack en lugar de Browserify, les dejo mi repo del projecto , tiene tags para que puedan ver el avance incremental.

helen osman

student•

Que buen aporte !

José Luis Rosas

student•

Tengo un gran, gran problema. Cuando quiero dar el npm run build me apare este error.

Error: EMFILE, open '/Users/joseluisrosasbaza/Documents/platzi/react/pokemon/node_modules/react/package.json'  
  
npm ERR! Darwin 14.0.0  
npm ERR! argv "node" "/usr/local/bin/npm" "run" "build"  
npm ERR! node v0.10.36  
npm ERR! npm  v2.3.0  
npm ERR! code ELIFECYCLE  
npm ERR! pokechat@ build: `browserify app.js > build.js -t babelify`  
npm ERR! Exit status 1  
npm ERR!  
npm ERR! Failed at the pokechat@ build script 'browserify app.js > build.js -t babelify'.  
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!     browserify app.js > build.js -t babelify  
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/joseluisrosasbaza/Documents/platzi/react/pokemon/npm-debug.log

Ruperto Coronado

student•

Tienes que navegar hasta la carpeta de tu proyecto.
Ejemplo, yo lo tengo en D:\Proyectos\React\Pokemones
WIN + R
cmd
cd d:
cd Proyectos\React\Pokemones
npm run build

Henry Antonio Mendoza Puerta MP

student•

Me sale el mismo error, como lo solucionaste?

Jairo Morales Morales Dl Torre

student•

agregue las librerias reac-bootstrap e importe import Button from 'react-bootstrap/lib/Button', y obviamente agregue un <Button bsStyle="primary">Primary</Button>, y no me compila.

LUIS PALACIOS

student•

los videos se alentan bastante =(

Daniela Paez

student•

Para la gente pensando en como se puede mejorar el flujo de desarrollo (y no tener que correr npm run build a cada rato) pueden utilizar Watchify

Rudy Marca

student•

Error al ejecutar el comando npm run build, yo lo solucione con reemplazar el archivo package.json:

{  
  "name": "pokechat",  
  "dependencies": {  
    "babelify": "^6.1.2",  
    "browserify": "^10.2.4",  
    "react": "^0.13.3"  
  },  
  "scripts": {  
    "build": "browserify app.js > build.js -t babelify"  
  }  
}

si es que con estos no funciona el codigo, verificar que hayas escrito bien el codigo . lo que me paso a mi es que el componente PokeAvatar.js yo lo escribi PokerAvatar.js, y cuando importaba nunca podia ubicarlo. espero que le sirvan.

Rudy Marca

student•

Olvide de indicar, que luego de cambiar los datos que tiene que archivo package.json .
eliminar la carpeta node_modules, seguidamente ejecuto el comando npm install.
luego de todo eso ya pude ejecutar el comando npm run build

Stefany Zapata Naranjo

student•

a mi me sucede lo mismo y tengo instalado babelify en mi package.json y todas las dependencias correctamente, ¿ Que podría estar sucediendo ahí en ese caso?

Nicolás Accetta

student•

para que se te instalen tenes que tirar por consola (para en la carpeta root de tu proyecto, o sea la carpeta que contiene a TODOS los archivos) un 'npm install'. Si usas linux usa 'sudo npm install' y si estas en windows inicia el prompt como Administrador

Diego Monroy

student•

Buen día, tengo el siguiente error en navegador:

Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

¿Alguien me pued ayudar?

Diego Monroy

student•

Ya me fije en el problema, era algo simple de etiquetado html. Estaba llamando el script de la aplicación en el head.

Daniel Hernández

student•

al dia de hoy , que dependencias se deben agregar y como seria el comando para ejecutar browserify?

Mario Alejandro Sanzol

student•

El comando sigue siendo : npm run build
Pero tienes que importar en app.js ReacDom
En la cabecera de app.js pon:

import React from 'react';  
import ReactDOM from 'react-dom';  
import PokeTable from './components/PokeTable.js';

Modifica:

React.render()

por:

ReactDOM.render()

y en package.json:

{  
  "name": "pokechat",  
  "dependencies": {  
    "react": "^15.1.0",  
    "browserify": "^13.0.1",  
    "babelify": "^7.3.0",  
    "react-dom": "^15.1.0",  
    "babel-preset-react": "^6.5.0",  
    "babel-preset-es2015": "^6.9.0"  
  },  
  "scripts": {  
    "build": "browserify -t [babelify --presets [es2015 react] ] app.js > build.js"  
  }  
}

Te recomiendo hacer esos cambios, luego correr npm install y luego el npm run build.

Alfredo Ramirez

student•

Uncaught TypeError: _react2.default.render is not a function1../components/PokeTable @ build.js:20s @ build.js:1e @ build.js:1(anonymous function) @ build.js:1

Alfredo Ramirez

student•

Uncaught TypeError: _react2.default.render is not a function1../components/PokeTable @ build.js:20s @ build.js:1e @ build.js:1(anonymous function) @ build.js:1

Alfredo Ramirez

student•

Solo baje la versión de los modules y todo funciona bien, deberían de hacer otro curso, react ha camiado demasiado.

Aaron Chavarría

student•

Se puede minificar ese build.js final?

Sergio Daniel Xalambrí

student•

Por supuesto, solo hay que usar uglify para minificarlo.

Carlos Cruz Castillo

student•

Tienen algun source con todo el codigo ???

Carlos Martínez

student•

Armé un repositorio con los archivos de la clase hasta este punto en dejo el enlace del zip del commit con lo visto en este video

Carlos Martínez

student•

Armé un repositorio con los archivos de la clase hasta este punto en dejo el enlace del zip del commit con lo visto en este video:

  
  
├─┬ browserify@12.0.1   
│ ├── assert@1.3.0   
│ ├─┬ browser-pack@6.0.1   
│ │ ├─┬ combine-source-map@0.7.1   
│ │ │ ├─┬ inline-source-map@0.6.1   
│ │ │ │ └── source-map@0.4.4   
│ │ │ ├── lodash.memoize@3.0.4   
│ │ │ └── source-map@0.4.2   
│ │ └── umd@3.0.1   
│ ├── browser-resolve@1.10.1   
│ ├─┬ browserify-zlib@0.1.4   
│ │ └── pako@0.2.8   
│ ├─┬ buffer@3.5.2   
│ │ ├── base64-js@0.0.8   
│ │ ├── ieee754@1.1.6   
│ │ └── is-array@1.0.1   
│ ├─┬ concat-stream@1.5.1   
│ │ └── typedarray@0.0.6   
│ ├─┬ console-browserify@1.1.0   
│ │ └── date-now@0.1.4   
│ ├── constants-browserify@1.0.0   
│ ├─┬ crypto-browserify@3.11.0   
│ │ ├─┬ browserify-cipher@1.0.0   
│ │ │ ├─┬ browserify-aes@1.0.5   
│ │ │ │ └── buffer-xor@1.0.3   
│ │ │ ├─┬ browserify-des@1.0.0   
│ │ │ │ └─┬ des.js@1.0.0   
│ │ │ │   └── minimalistic-assert@1.0.0   
│ │ │ └── evp_bytestokey@1.0.0   
│ │ ├─┬ browserify-sign@4.0.0   
│ │ │ ├── bn.js@4.2.0   
│ │ │ ├── browserify-rsa@4.0.0   
│ │ │ ├─┬ elliptic@6.0.2   
│ │ │ │ ├── brorand@1.0.5   
│ │ │ │ └── hash.js@1.0.3   
│ │ │ └─┬ parse-asn1@5.0.0   
│ │ │   └── asn1.js@4.0.0   
│ │ ├── create-ecdh@4.0.0   
│ │ ├─┬ create-hash@1.1.2   
│ │ │ ├── cipher-base@1.0.2   
│ │ │ └── ripemd160@1.0.1   
│ │ ├── create-hmac@1.1.4   
│ │ ├─┬ diffie-hellman@5.0.0   
│ │ │ └── miller-rabin@4.0.0   
│ │ ├── pbkdf2@3.0.4   
│ │ ├── public-encrypt@4.0.0   
│ │ └── randombytes@2.0.1   
│ ├── defined@1.0.0   
│ ├── deps-sort@2.0.0   
│ ├── domain-browser@1.1.4   
│ ├── duplexer2@0.1.4   
│ ├── events@1.1.0   
│ ├─┬ glob@5.0.15   
│ │ ├─┬ inflight@1.0.4   
│ │ │ └── wrappy@1.0.1   
│ │ └── once@1.3.2   
│ ├─┬ has@1.0.1   
│ │ └── function-bind@1.0.2   
│ ├── htmlescape@1.1.0   
│ ├── https-browserify@0.0.1   
│ ├── inherits@2.0.1   
│ ├─┬ insert-module-globals@7.0.1   
│ │ ├── is-buffer@1.1.0   
│ │ └─┬ lexical-scope@1.2.0   
│ │   └── astw@2.0.0   
│ ├── isarray@0.0.1   
│ ├─┬ JSONStream@1.0.6   
│ │ ├── jsonparse@1.2.0   
│ │ └── through@2.3.8   
│ ├─┬ labeled-stream-splicer@2.0.0   
│ │ └── stream-splicer@2.0.0   
│ ├─┬ module-deps@4.0.2   
│ │ ├── detective@4.3.1   
│ │ └── stream-combiner2@1.1.1   
│ ├── os-browserify@0.1.2   
│ ├─┬ parents@1.0.1   
│ │ └── path-platform@0.11.15   
│ ├── path-browserify@0.0.0   
│ ├── process@0.11.2   
│ ├── punycode@1.3.2   
│ ├── querystring-es3@0.2.1   
│ ├── read-only-stream@2.0.0   
│ ├─┬ readable-stream@2.0.4   
│ │ ├── core-util-is@1.0.1   
│ │ ├── process-nextick-args@1.0.3   
│ │ └── util-deprecate@1.0.2   
│ ├── resolve@1.1.6   
│ ├─┬ shasum@1.0.2   
│ │ ├── json-stable-stringify@0.0.1   
│ │ └── sha.js@2.4.4   
│ ├─┬ shell-quote@1.4.3   
│ │ ├── array-filter@0.0.1   
│ │ ├── array-map@0.0.0   
│ │ ├── array-reduce@0.0.0   
│ │ └── jsonify@0.0.0   
│ ├── stream-browserify@2.0.1   
│ ├─┬ stream-http@2.0.2   
│ │ └── builtin-status-codes@1.0.0   
│ ├── string_decoder@0.10.31   
│ ├─┬ subarg@1.0.0   
│ │ └── minimist@1.2.0   
│ ├─┬ syntax-error@1.1.4   
│ │ └── acorn@1.2.2   
│ ├── through2@2.0.0   
│ ├── timers-browserify@1.4.1   
│ ├── tty-browserify@0.0.0   
│ ├─┬ url@0.11.0   
│ │ └── querystring@0.2.0   
│ ├── util@0.10.3   
│ ├─┬ vm-browserify@0.0.4   
│ │ └── indexof@0.0.1   
│ └── xtend@4.0.1 

Error: EMFILE, open '/Users/joseluisrosasbaza/Documents/platzi/react/pokemon/node_modules/react/package.json'  
  
npm ERR! Darwin 14.0.0  
npm ERR! argv "node" "/usr/local/bin/npm" "run" "build"  
npm ERR! node v0.10.36  
npm ERR! npm  v2.3.0  
npm ERR! code ELIFECYCLE  
npm ERR! pokechat@ build: `browserify app.js > build.js -t babelify`  
npm ERR! Exit status 1  
npm ERR!  
npm ERR! Failed at the pokechat@ build script 'browserify app.js > build.js -t babelify'.  
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!     browserify app.js > build.js -t babelify  
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/joseluisrosasbaza/Documents/platzi/react/pokemon/npm-debug.log

{  
  "name": "pokechat",  
  "dependencies": {  
    "babelify": "^6.1.2",  
    "browserify": "^10.2.4",  
    "react": "^0.13.3"  
  },  
  "scripts": {  
    "build": "browserify app.js > build.js -t babelify"  
  }  
}

{  
  "name": "pokechat",  
  "dependencies": {  
    "react": "^15.1.0",  
    "browserify": "^13.0.1",  
    "babelify": "^7.3.0",  
    "react-dom": "^15.1.0",  
    "babel-preset-react": "^6.5.0",  
    "babel-preset-es2015": "^6.9.0"  
  },  
  "scripts": {  
    "build": "browserify -t [babelify --presets [es2015 react] ] app.js > build.js"  
  }  
}

Instalacion de Browserify

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