Introducci贸n al curso avanzado de React

1

Qu茅 necesitas para este curso y qu茅 aprender谩s sobre React.js

2

Proyecto y tecnolog铆as que usaremos

Preparando el entorno de desarrollo

3

Clonando el repositorio e instalando Webpack

4

Instalaci贸n de React y Babel

5

Zeit es ahora Vercel

6

Linter, extensiones y deploy con Now

Creando la interfaz con styled-components

7

驴Qu茅 es CSS-in-JS?

8

Creando nuestro primer componente: Category

9

Creando ListOfCategories y estilos globales

10

Usar informaci贸n real de las categor铆as

11

Creando PhotoCard y usando react-icon

12

SVGR: de SVG a componente de ReactJS

13

Creando animaciones con keyframes

Hooks

14

驴Qu茅 son los Hooks?

15

useEffect: limpiando eventos

16

useCategoriesData

17

Usando Intersection Observer

18

Uso de polyfill de Intersection Observer e imports din谩micos

19

Usando el localStorage para guardar los likes

20

Custom Hooks: useNearScreen y useLocalStorage

GraphQL y React Apollo

21

驴Qu茅 es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC

22

Par谩metros para un query con GraphQL

23

Usar render Props para recuperar una foto

24

Refactorizando y usando variables de loading y error

25

Usando las mutaciones con los likes

Reach Router

26

驴Qu茅 es Reach Router? Creando la ruta Home

27

Usando Link para evitar recargar la p谩gina

28

Creando la p谩gina Detail

29

Agregando un NavBar a nuestra app

30

Estilando las p谩ginas activas

31

Rutas protegidas

Gesti贸n del usuario

32

Introducci贸n a React.Context

33

Creaci贸n del componente UserForm; y Hook useInputValue

34

Estilando el formulario

35

Mutaciones para registro

36

Controlar estado de carga y error al registrar un usuario

37

Mutaciones para iniciar sesi贸n

38

Persistiendo datos en Session Storage

39

Hacer like como usuario registrado

40

Mostrar favoritos y solucionar fetch policy

41

Cerrar sesi贸n

Mejores pr谩cticas, SEO y recomendaciones

42

脷ltimos retoques a las rutas de nuestra aplicaci贸n

43

React Helmet

44

Midiendo el performance de nuestra app y usando React.memo()

45

React.lazy() y componente Suspense

46

Usando PropTypes para validar las props

47

PWA: generando el manifest

48

PWA: soporte offline

49

Testing con Cypress

Conclusiones

50

隆Felicidades!

Curso de React Avanzado

Curso de React Avanzado

Miguel 脕ngel Dur谩n

Miguel 脕ngel Dur谩n

Clonando el repositorio e instalando Webpack

3/50
Recursos
Transcripci贸n

Pasos para iniciar nuestro proyecto:

  • Paso 1: Vamos a clonar el repositorio desde github.com/midudev/curso-platzi-react-avanzado usando git clone URL_DEL_REPO en nuestra consola.
  • Paso 2: Vamos a instalar webpack y webpack-cli como dependencias de desarrollo con: npm i webpack wepack-cli --save-dev.
  • Paso 3: Crearemos una carpeta llama src y dentro de ella un archivo index.js en el cual colocaremos solo un console.log('Empezamos el curso!').
  • Paso 4: Crearemos en el root de nuestro proyecto un archivo webpack.config.js el cual tendr谩 toda la configuraci贸n de webpack
  • Paso 5: Instalaremos html-webpack-plugin con: npm i html-webpack-plugin --save-dev.
  • Paso 6: Instalaremos webpack-dev-server con: npm i webpack-dev-server --save-dev.
  • Paso 7: A帽adiremos un nuevo script llamado dev en nuestro package.json: "dev": "webpack serve".
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
        output: {
                filename: 'app.bundle.js'
        },
        plugins: [
                new HtmlWebpackPlugin()
        ]
}

Aportes 101

Preguntas 21

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Tuve muchos problemas con el

webpack-dev-server

(npm me instal贸 la versi贸n 鈥淾3.11.0鈥)

Me sal铆an muchos problemas extra帽os:

$ npm run dev

> [email protected]1.0.0 dev /home/freddy/Documentos/platzi/curso-platzi-react-avanzado
> webpack-dev-server

internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /home/freddy/Documentos/platzi/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/home/freddy/Documentos/platzi/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/freddy/Documentos/platzi/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected]1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Lo solucion茅 de la siguiente forma:

En package.json cambi茅 el script dev as铆:

"dev": "webpack serve",

Y ahora va bien, o eso me gusta pensar ):

Para usar packages de desarrollo (que instalamos para el proyecto) como webpack o webpack-cli podemos ejecutar el comando npx
por ejemplo en el caso de webpack:

npx webpack src/index.js

Este sustituye a

node_modules\.bin\webpack src/index.js

Yo ten铆a este error
![](

y lo resolvi escribiendo

npx webpack ./src/index.js

en windows el comando debe ir dentro de comillas para que lo respete
"./node_modules/.bin/webpack" src/index.js

Recomendado hacer el curso de webpack y olvidar todo lo que ya conocen鈥

Sobre todo create-react-app

Para instalar las versiones de las depedencias utilizadas por el profesor usan este comando

npm install [email protected]4.31.0 --save-dev
npm install [email protected]3.3.2 --save-dev
npm-install html-webpack-plugin@3.2.0 --save-dev
npm install webpack-dev-server@3.4.1 --save-dev

Si al script dev le agregamos la bandera --open cada que lo ejecutemos abrir谩 una pesta帽a del navegador con el proyecto.

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  }

La forma de llamar el dev Server tambi茅n a cambiado:

 "dev": "webpack serve"

He tenido un problema con la inicializaci贸n de webpack, porque no reconocia el comando

src/index.js

, pero lo solucione utilizando

npx webpack

, por defecto webpack va a buscar el archivo src/index.js. Espero que les sirva.

Resumen Clase
se instalaron las siguientes dependencias
Webpack
npm install --save-dev webpack webpack-cli
Plugins Webpack
npm install --save-dev html-webpack-cli webpack-dev-server
Se armo la configuracion basica de webpack

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports= {
  output: {
    filename: 'app.bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin()
  ]
}

Pasos versi贸n 2021 en Windows 10

git clone https://github.com/midudev/curso-platzi-react-avanzado

cd curso-platzi-react-avanzado\

code .

Abrimos la terminal (del Visual Studio Code en mi caso)

npm init -y

npm install -D webpack webpack-cli

npm install -D html-webpack-plugin

npm install -D webpack-dev-server

Crearemos en el root una carpeta llama src y dentro de ella un archivo index.js en el cual colocaremos solo un
console.log('Empezamos el curso!')

Crearemos en el root de nuestro proyecto un archivo webpack.config.js el cual tendr谩 toda la configuraci贸n de webpack
El contenido es el siguiente

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { output: { filename: 'app.bundle.js' }, plugins: [ new HtmlWebpackPlugin() ] }

En el package.json agregamos estos scripts
"build": "webpack", "dev": "webpack serve",

Finalmente ejecutamos
npm run build
npm run dev

Buen d铆a, quiz谩s a alguien le suceda lo mismo, tuve que ejecutar el comando de esta forma ya que me generaba error, ahora si hizo el build.

npx webpack --entry ./src/index.js

Resumen de las dependencias a instalar.

  1. Webpack & Webpack-cli
npm install webpack webpack-cli --save-dev
  1. Html Webpack Plugin
npm install html-webpack-plugin --save-dev
  1. Webpack dev server
npm install webpack-dev-server --save-dev

midudev nos comparte las herramientas que usa en su editor y terminal.

Mi configuraci贸n de editor, terminal, apps que uso y gadgets

Hola estudiantes del 2022:
Aqui les dejo los archivos:
package.json:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev":  "webpack serve --mode development"
  },

Tambien podemos escribir

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev":  "webpack serve"
  },

y en el archivo de webpack:

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode:'development',
    output: {
            filename: 'app.bundle.js'
    },
    plugins: [
            new HtmlWebpackPlugin()
    ]
}

para instalar webpack como dependencia de desarrollo

npm i -D webpack webpack-cli

S茅 que algunos tendr谩n inconvenientes al realizar el curso por la antig眉edad del mismo ( as铆 que les dejo mi repositorio):

Pueden dirigirse a las ramas del repositorio y est谩n divididos seg煤n el avance que realice, tienen indicaciones que espero les sirva de ayuda ( yo lo termine gracias a los comentarios que tiene el curso y muchos de estos los aplique)

Pueden ver el proyecto aqu铆:

Para los que no les funcione este comando:
./node_modules/.bin/webpack src/index.js
Corran este otro:
node_modules/.bin/webpack ./src/index.js

Si quieren quitar los warnings en el primer empaquetado antes de configurar el script de build pueden usar lo siguiente en la terminal.

$./node_modules/.bin/webpack --mode=development  ./src/index.js

Si alguien le salta error con el

"dev" : "webpack-dev-server"

yo lo cambi茅 por

"dev": "webpack serve --open"

Este es un curso avanzado de react, varios coceptos se dan por sentados, no es requerido pero si es super recomendable tomar este curso despues de conocer, ES6, webpack, CRA, componentes de clase y hooks. De otra manera va a ser mas dificil seguirle el ritmo al curso.

Me hubiese parecido mejor que el profe explique los objetivos de esta configuraci贸n. Me pregunto que ganaremos?
Porque descartamos la configuraci贸n por defecto que nos tira React?
Me resulta bastante incomodo ir tirando comandos sin saber para que. Me siento como una bestia animal de la programaci贸n! jajja!

html-webpack-plugin genera un archivo de html 5 incluyendo todos los empaquetados de webpack dentro de etiquetas script en caso de ser js o link en caso de css.

El dist/index.html ser铆a el html generado:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script></body>
</html>

colocar el parametro mode para correr webpack

.\node_modules\.bin\webpack --mode=development ./src\index.js

En la secci贸n recursos es incorrecto el nombre de la dependencia **wepack-cli ** => webpack-cli

dia 27-04-2021. tuve problemas al inicializar el webpack
utilice los comando de instalacion sin especificar la version.
solucion usar el comando en la terminal:

npx webpack
este busca por defecto el src/index.js

luego en el package.json se modifico los scripts :

鈥渟cripts鈥: {
鈥渂uild鈥: 鈥渨ebpack --mode production鈥,
鈥渄ev鈥: 鈥渨ebpack serve --mode development鈥,
鈥渢est鈥: 鈥渆cho 鈥淓rror: no test specified鈥 && exit 1鈥
},

Esto se debe ingresar a la consola

npx webpack  ./src/index.js

Debemos indicar que estamos en la misma ruta con el " ./ ", de lo contrario, podria buscar en " C://src/index.js "

si les salen este error:

> webpack-dev-server

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (C:\Users\roog7463\Desktop\platzi\curso_avanzado_react\curso-platzi-react-avanzado\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)   
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
npm ERR! code 1
npm ERR! path C:\Users\roog7463\Desktop\platzi\curso_avanzado_react\curso-platzi-react-avanzado
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c webpack-dev-server

Solucionar de la siguiente manera:
En el archiv de package.json ingresar:

Si te encuentras en windows, la instrucci贸n para generar el dist debe ser as铆:

"./node_modules/.bin/webpack" src/index.js

Nota: Lleva comillas.

Hay un typo en uno de los comandos de la descripci贸n de este video.
Para el Paso 2 (hace falta una 鈥渂鈥 en 鈥渨epack/cli鈥) ser铆a:

npm i webpack webpack-cli --save-dev

Si les tira un error cuando corren 鈥渘pm run dev鈥, en el archivo package.json, cambien el script 鈥渄ev鈥, por el siguiente:

 "dev": "webpack serve"

para los que tuvieron problemas con los scripts, intenten esto a ver si les funciona y se les quita los warning (package.json)

"scripts": {
    "build": "webpack",
    "dev": "webpack serve --mode development --env development --open"
  },

El problema con el script de webpack-dev-server lo solucione instalando
npm install [email protected] --save-dev

npm install [email protected] --save-dev

npm install [email protected] --save-dev

estuve harto tiempo viendo como se arreglaba lo de webpack /src/index,js en windows, pero con las nuevas versiones basta con escribir:

npx webpack

y listo, tienen su carpeta dist con el main compilado
espero que en el futuro no haya problema con eso jaja

No es demasiado largo el proceso con Webpack? Con create-react-app todo es mas simple

Hay un error peque帽铆n en el paso dos. En vez de wepack-cli es webpack-cli

otra opcion para ejecutar los comandos de manera mas comoda es agregarlos a lista de scripts de npm; dentro del package json podemos guardar los comandos personalizados de consola en la seccion script
por ejemplo:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"./node_modules/.bin/webpack ./src/index.js && node dist/main.js"
  },

de esta manera solo corro en terminal : npm run dev y ejecuta esos dos comandos

Ayuda! ma aparece el siguiente error al ejecutar npm run dev

$ npm run dev

> [email protected]1.0.0 dev /Users/diego_romero/ReactAvanzado/curso-platzi-react-avanzado
> webpack-dev-server

internal/modules/cjs/loader.js:969
  throw err;
  ^

Error: Cannot find module '../lib/Server'
Require stack:
- /Users/diego_romero/ReactAvanzado/curso-platzi-react-avanzado/node_modules/.bin/webpack-dev-server
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/diego_romero/ReactAvanzado/curso-platzi-react-avanzado/node_modules/.bin/webpack-dev-server:13:16)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/diego_romero/ReactAvanzado/curso-platzi-react-avanzado/node_modules/.bin/webpack-dev-server'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected]1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/diego_romero/.npm/_logs/2020-06-25T08_01_15_979Z-debug.log```

Dios mio, gracias por hacer el zoom del v铆deo tan grande, se puede ver perfecto en celular 馃槂

Hay un peque帽o typo en el paso 1 de la descripci贸n del video.
No es midudex, sino midudev.

Todo cool

const Path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: Path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: {
          loader: "html-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html"
    })
  ]
};

Instalaci贸n de webpack

npm i webpack webpack-cli --save-dev

Empaquetando

.node_modules/.bin/webpack src/index.js
npx webpack src/index.js

se crea la carpeta src con un archivo de index.js
se instalan las dependencia de web pack

npm i webpack webpack-cli --save-dev
./node_modules/.bin/webpack src/index.js

indicamos a webpack, que queremos que nos compile: se creara una carpeta que se llama dist.

npm i html-webpack-plugin --save-dev

Para compilar en html, se creara un archivo que se llama webpack.config.js, la compilacion de este plugin es exportar un objeto en el archivo se conbfigura de la siguiente manera

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports= {
  output: {
    filename: 'app.bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin()
  ]
}

en los scripts del archivo package.json
se inserta el 鈥渂uild鈥: 鈥渨ebpack鈥 sonde se va a costruir toda la aplicacion pero al indicar que es webpack siempre va a direccionar a src/index.js este hara que se generaren archivos en la carpeta de dist

se instala el sevridor de webpack

npm install webpack-dev-server --save-dev

Hola, necesito ayuda, no puedo hacer la carpeta dist de la manera en la que se especifica 馃槙 alguien tiene el mismo problema 馃槮?

agregar en el module.exports de weback.config.js

mode: 鈥渄evelopment鈥,

Si por alg煤n casual a alguna persona le da errores al cargar la aplicaci贸n en npm run dev, he tenido que a帽adir lo siguiente a mi webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",
  output: {
    filename: 'app.bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

mode: 鈥渄evelopment鈥

Tuve un error porque no tenia declarado el 鈥渕ode鈥 en el archivo de webpack.config.js
Lo solucione de la siguiente manera:

const HtmlWebpackPlugin = require(鈥榟tml-webpack-plugin鈥);
module.exports = {
  output: {
    filename: 'app.bundle.js'
  },
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin()
  ]
};

El modo puede ser 鈥渄evelopment鈥 o 鈥減roduction鈥.

Saludos!

Si al ejecutar鈥

$ npm run dev

鈥 tienes este problema

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

Solo debes agregar al archivo de configuraci贸n

mode: 'development'

Con lo cual quedar铆a algo como esto
webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    output: {
        filename: 'app.bundle.js'
    },
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

Si alguien tiene este problema "The 鈥榤ode鈥 option has not been set, webpack will fallback to 鈥榩roduction鈥 for this value."
puede solucionar escribiendo esto en el webpack.config

module.exports = {
output: {
filename: 鈥渁pp.bundle.js鈥,
},
plugins: [new HtmlWebpackPlugin()],
mode: 鈥渄evelopment鈥,
};

En la descripci贸n del curso est谩 escrito 鈥渨epack鈥 o sea sin la 鈥渂鈥, corrijanlo porfa

En la actualidad debes ponerle el modo que va a usar

modo produccion Compilado

webpack server --mode production

Modo DEV para debugear

webpack server --mode development

Tambien tuve problemas con el npm run dev

lo cual modifique el script de dev segun la documentaci贸n oficial

"dev": "webpack-dev-server --open --mode=development"

Al fin tecnolog铆as nuevas a aprender 馃槃

SI TIENES ESTE ERROR

EN EL ARCHIVO webpack.config.js TENER

<// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
        
        mode: 'development',
        output: {
                filename: 'app.bundle.js'
        },
        plugins: [
                new HtmlWebpackPlugin()
        ]
}> 

Si les tira error al abrir el server pueden probar cambiando la configuraci贸n de los puertos desde webpack.config.js

module.exports = {
...
  devServer: {
    port:3005,
    open: true
  },
...
}

SI tienen problemas al ejecutar

npm run dev

Se debe a que hay que especificar en scripts el modo en el que se va a abrir el servidor de webpack de la siguiente forma:

"dev":"webpack serve --open --mode development",

Genial

El comando deberia ir asi cuando estamos en la raiz
./node_modules/.bin/webpack ./src/index.js

el dolor de cabeza en cursos con mas de un a帽o es que para instalar webpack dependencias etc es un dolor balls

Tengo este error al correr npm run dev

"devDependencies": { "@webpack-cli/serve": "^1.0.1", "clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^4.5.0", "webpack": "^5.0.0", "webpack-cli": "^4.0.0", "webpack-dev-server": "^3.11.0" },

internal/modules/cjs/loader.js:895
throw err;
^
Error: Cannot find module 鈥榳ebpack-cli/bin/config-yargs鈥

隆Saludos! Por favor quisiera su ayuda con respecto al siguiente error que aparece cuando ejecuto npm run build:

Para iniciar autom谩ticamente el proyecto en el navegador pueden agregar en el archivo webpack.config.js:
Saludos

devServer:{
  open:true
 }

Si al querer instalar el webpack-dev-server les arroja un error:

npm ERR! code ERESOLVE
npm ERR! Cannot read property 'length' of undefined
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hectormr206\AppData\Local\npm-cache\_logs\2020-11-27T02_20_03_082Z-debug.log

Lo pude solucionar ejecutando:

npm install webpack-dev-server --save-dev --legacy-peer-deps

鈥./node_modules/.bin/webpack鈥 ./src/index.js
me sirvi贸 correr as铆 el comando ^^

Me funciono con el siguiente script

npx webpack ./src/index.js

en windows.

Please update webpack-cli to v4 and use webpack serve to run webpack-dev-server

script dev => 鈥渄ev鈥: 鈥渨ebpack serve鈥

Tengo el siguiente error:

Error: Cannot find module 'webpack-cli/bin/config-yargs

No se a que se refiera, esto al ejecutar:

npm run dev

Tengo este error cuando pongo

./node_modules/.bin/webpack src/index.js

y no se me crea la carpeta dist, 驴Que tengo que hacer?

![](

Esto si que es avanzado, me sorprende la din谩mica, con conceptos ya bastante s贸lidos.

Esto esta fenomenal, aumentando el nivel pro con React con ayuda del empaquetamiento.

Excelente. Justo lo que necesitaba.

Excelente!

yo tengo este problema

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 522 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i 锝dm锝: Compiled successfully.

Todo perfecto hasta el minuto 4:19 en donde se ejecuta en consola el comando npm run build
pero no me genera los archivos dentro de la carpeta dist.
y ahi ya no puedo seguir el curso.
La consola arroja este cartel

voy a ver si puedo seguir

Excelente curso parece鈥 muy prometedor!!

Cada vez que intento ejecutar el comando de npm run build me sale el mismo mensaje y no me crear los archivos

Maravillos clase estoy super motivado, maximo esfuerzo!!

Yo viendo como todo el curso de leonidas de Webpack lo record猫 en 6:04 minutos JAJAJAJAJ

Hola, tengo un problema, el servidor local corre perfecto pero por alguna raz贸n, el console.log nunca llega

https://github.com/maoacr/petgram

Podr铆an ayudarme a mirar que pasa ?

-D significa --save-dev (esto significa guardar como dependencia de desarrollo)

i es de install

npm install webpack webpack-cli -D
npm i html-webpack-plugin -D

Excelente! Empezando el curso con todos los animos

Pasos para iniciar nuestro proyecto:

Paso 1: Vamos a clonar el repositorio desde github.com/midudev/curso-platzi-react-avanzado usando git clone URL_DEL_REPO en nuestra consola.
Paso 2: Vamos a instalar webpack y webpack-cli como dependencias de desarrollo con: npm i webpack wepack-cli --save-dev.
Paso 3: Crearemos una carpeta llama src y dentro de ella un archivo index.js en el cual colocaremos solo un console.log(鈥楨mpezamos el curso!鈥).
Paso 4: Crearemos en el root de nuestro proyecto un archivo webpack.config.js el cual tendr谩 toda la configuraci贸n de webpack
Paso 5: Instalaremos html-webpack-plugin con: npm i html-webpack-plugin --save-dev.
Paso 6: Instalaremos webpack-dev-server con: npm i webpack-dev-server --save-dev.
Paso 7: A帽adiremos un nuevo script llamado dev: 鈥渄ev鈥: 鈥渨ebpack-dev-server鈥.

No consigo instalar webpack, alguien sabe c贸mo puede arreglar este error?

<Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: 3e67c8f4a291a95f8846
Version: webpack 4.41.5
Time: 53ms
Built at: 01/03/2020 9:05:14 PM

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in Entry module not found: Error: Can't resolve 'src/index.js' in '/home/hab11/Documents/development/platzi'>

Hola, como el buen animal sin vida que soy, perd铆 3 horas de mi vida probando la automatizaci贸n de este procedimiento, se me hicieron bastantes pasos, y vi que me da flojera, me va quitar tiempo hacer todos esos pasos, bien de igual forma aqu铆 se les dejo el c贸digo para que con un comando dejen todo listo.
https://github.com/paching12/webpack-automation

A煤n no subo las instrucciones as铆 que por favor es un archivo de shellScript para los que no esten familiarizados, solo descarguenlo coloquenlo en su home (~/) y enlacenlo en su archivo ubicado en ~/.bash_profile (o equivalente, .zshrc, .bashrc ubicados igualmente en home <<cd ~>>) obviamente no sirve en window y para mac deber谩n a帽adir -e a la instrucci贸n sed en todo el archivo donde sea usada esta instrucci贸n, bueno espero no abrumarlos
隆Suerte!

Llevo 1h haciendo este video. 1H que in煤til me siento cielos santo

Hola al ejecutar npm run build, no me salen los archivos, que puedo hacer?

[email protected] build /mnt/c/Users/SAMSUNG/Documents/PLATZI/REACT AVANZADO/curso-platzi-react-avanzado
webpack

Hash: 161a9f7a6359311baf76
Version: webpack 4.44.1
Time: 93ms
Built at: 08/24/2020 11:46:25 PM
Asset Size Chunks Chunk Names
main.js 963 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js 35 bytes {0} [built]

WARNING in configuration
The 鈥榤ode鈥 option has not been set, webpack will fallback to 鈥榩roduction鈥 for this value. Set 鈥榤ode鈥 option to 鈥榙evelopment鈥 or 鈥榩roduction鈥 to enable defaults for each environment.
You can also set it to 鈥榥one鈥 to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

Todos estos comandos hacen lo mismo 馃槂 esta bueno conocer alternativas para cuando las vemos no confundirnos

npm i webpack webpack-cli -D
npm add webpack webpack-cli -D 
npm install webpack webpack-cli --save-dev 

Si tienes el siguiente error al correr npm run build:

[webpack-cli] Error: Cannot find module 'loader-utils'

Intala loader-utils pero no como dependencia de desarrollo

npm i loader-utils

Con eso tu error se ir谩

Haber hecho previamente el curso de webpack hace que esto sea un repaso

Si tienen un warning que diga "webpack 鈥榤ode鈥 option has not been set"
Yo lo arregl茅 poniendo en el webpack.config.js justo al principio, antesde OUTPUT, lo siguiente:

 mode: 'development',

Cuando se presentan errores, trato de observar que versiones tiene el profe en su archivo de package.json y coloco las mismas y luego corro npm install, casi siempre resulta exitoso

鉃★笍TIP:
Si tienes el c贸digo html en una sola l铆nea
Para darle formato en vertical con indentaci贸n 鉁旓笍
路 Teclea sobre el archivo 鈬р尌F

路 贸

  1. Selecciona la l铆nea con todo el c贸digo
  2. Presiona: 鈱楰 鈱楩

![](
a lo que intento el comando me sale ese mensaje y no me deja avanzar :'v

en webpack 5 no me funciona esta sentencia node_modules/.bin/webpack/src/index.js

pr谩ctica:

tengo este error > [email protected] start:dev /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado

webpack-dev-server

TypeError: validateOptions is not a function
at new Server (/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/lib/Server.js:57:5)
at startDevServer (/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:106:14)
at /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:166:3
at /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/lib/utils/processOptions.js:33:9
at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start:dev: webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/matespinosa09/.npm/_logs/2020-11-07T19_22_28_965Z-debug.log
鉃 curso-platzi-react-avanzado git:(master) 鉁 npm run start:dev

[email protected] start:dev /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado
webpack-dev-server

TypeError: validateOptions is not a function
at new Server (/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/lib/Server.js:57:5)
at startDevServer (/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:106:14)
at /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:166:3
at /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/lib/utils/processOptions.js:33:9
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start:dev: webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/matespinosa09/.npm/_logs/2020-11-07T19_25_12_465Z-debug.log
鉃 curso-platzi-react-avanzado git:(master) 鉁

Os passo mi config por porque a mi no me iba:

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    devServer: {
        contentBase: __dirname + "/dist/",
        inline: true,
        host: '0.0.0.0',
        port: 8080,
        publicPath: '/dist'
      },
        output: {
                filename: 'app.bundle.js'
        },
        plugins: [
                new HtmlWebpackPlugin()
        ]
}```
en package.json



鈥渄ev鈥: 鈥渨ebpack serve鈥,```

He tenido muchos problemas con esta parte miles de veces. Hay ciertas veces que no me crea la carpeta dist. Otras que avanzo un poco m谩s con el proyecto hasta llegar al punto de utilizar Graph QL. Me gustar铆a poder hacer el proyecto pero no puedo avanzar