¡Bienvenida! Este es un curso especial de React Hooks

1

¿Qué aprenderás en el Curso Profesional de React Hooks?

2

¿Qué son los React Hooks y cómo cambian el desarrollo con React?

Introducción a React Hooks

3

useState: estado en componentes creados como funciones

4

useEffect: olvida el ciclo de vida, ahora piensa en efectos

5

useContext: la fusión de React Hooks y React Context

6

useReducer: como useState, pero más escalable

7

¿Qué es memoization? Programación funcional en JavaScript

8

useMemo: evita cálculos innecesarios en componentes

9

useRef: manejo profesional de inputs y formularios

10

useCallback: evita cálculos innecesarios en funciones

11

Optimización de componentes en React con React.memo

12

Custom hooks: abstracción en la lógica de tus componentes

13

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

14

Proyecto: análisis y retos de Platzi Conf Store

15

Instalación de Webpack y Babel: presets, plugins y loaders

16

Configuración de Webpack 5 y webpack-dev-server

17

Configuración de Webpack 5 con loaders y estilos

18

Loaders de Webpack para Preprocesadores CSS

19

Flujo de desarrollo seguro y consistente con ESLint y Prettier

20

Git Hooks con Husky

Estructura y creación de componentes para Platzi Conf Store

21

Arquitectura de vistas y componentes con React Router DOM

22

Maquetación y estilos del home

23

Maquetación y estilos de la lista de productos

24

Maquetación y estilos del formulario de checkout

25

Maquetación y estilos de la información del usuario

26

Maquetación y estilos del flujo de pago

27

Integración de íconos y conexión con React Router

Integración de React Hooks en Platzi Conf Merch

28

Creando nuestro primer custom hook

29

Implementando useContext en Platzi Conf Merch

30

useContext en la página de checkout

31

useRef en la página de checkout

32

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

33

Paso a paso para conectar tu aplicación con la API de PayPal

34

Integración de pagos con la API de PayPal

35

Completando la integración de pagos con la API de PayPal

36

Paso a paso para conectar tu aplicación con la API de Google Maps

37

Integración de Google Maps en el mapa de checkout

38

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

39

Continuous integration y continuous delivery con GitHub Actions

40

Compra del dominio y despliega con Cloudflare

Optimización de aplicaciones web con React

41

Integración de React Helmet para mejorar el SEO con meta etiquetas

42

Análisis de performance con Google Lighthouse

43

Convierte tu aplicación de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

44

Crea una API con Strapi CMS y consúmela con React.js

¿Qué sigue en tu carrera profesional?

45

Próximos pasos para especializarte en frontend

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Configuración de Webpack 5 y webpack-dev-server

16/45
Recursos

Aportes 47

Preguntas 15

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Hola, les dejo con shortcut o snippet para escribir la configuracion de webpacl mas rapido. Lo que deben realizar es:

  1. control + shift + p
  2. escriben snippets en el recuadro que les aparece
  3. seleccionan preferences: configure user snippets
  4. buscan javascript
  5. les aparece un json y copian lo siguiente
{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	"webpack config": {
		"prefix": "wpc",
		"body": [
		  "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\",",
		  "  },",
		  "  resolve: {",
		  "    extensions: [\".js\", \".jsx\"],",
		  "  },",
		  "  module: {",
		  "    rules: [",
		  "      {",
		  "        test: /\\.(js|jsx)$/,",
		  "        exclude: /node_modules/,",
		  "        use: {",
		  "          loader: \"babel-loader\",",
		  "        },",
		  "      },",
		  "      {",
		  "        test: /\\.html$/,",
		  "        use: [",
		  "          {",
		  "            loader: \"html-loader\",",
		  "          },",
		  "        ],",
		  "      },",
		  "    ],",
		  "  },",
		  "  plugins: [",
		  "    new HtmlWebpackPlugin({",
		  "      template: \"./public/index.html\",",
		  "      filename: \"./index.html\",",
		  "    }),",
		  "  ],",
		  "  devServer: {",
		  "    contentBase: path.join(__dirname, \"dist\"),",
		  "    compress: true,",
		  "    port: 3000,",
		  "  },",
		  "};",
		],
		"description": "webpack configuration"
	  }
}
  1. Listo ahora cuando quieran crear el archivo de configuracion de webpack solo escriben wpc en el editor de codigo y les sale todo, esto es para ahorrar tiempo en futuros proyectos. Espero les sirva.
wpc //les saldra para completar

Si se encuentran con este error, webpack-dev-server cambio la key ‘contentBase’ a ‘static’ en la version 4.0. Unicamente remplazan ‘contentBase’ por ‘static’

ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'contentBase'. These properties are valid:
   object { bonjour?, client?, compress?, dev?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, injectClient?, injectHot?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, openPage?, overlay?, port?, proxy?, public?, setupExitSignals?, static?, stdin?, transportMode?, useLocalIp? }
    at validate (/home/john/Downloads/repos/project/app/.yarn/cache/schema-utils-npm-3.0.0-e97702da81-a084f593f2.zip/node_modules/schema-utils/dist/validate.js:104:11)
    at new Server (/home/john/Downloads/repos/project/app/.yarn/$$virtual/webpack-dev-server-virtual-678ff6defa/0/cache/webpack-dev-server-https-30a54e980a-affc583bbc.zip/node_modules/webpack-dev-server/lib/Server.js:42:5)
    at /home/john/Downloads/repos/project/app/.yarn/$$virtual/@webpack-cli-serve-virtual-af6cd77f33/0/cache/@webpack-cli-serve-npm-1.1.0-4f0e34ce07-7684766d7d.zip/node_modules/@webpack-cli/serve/lib/startDevServer.js:34:24
    at Array.forEach (<anonymous>)
    at Object.startDevServer [as default] (/home/john/Downloads/repos/project/app/.yarn/$$virtual/@webpack-cli-serve-virtual-af6cd77f33/0/cache/@webpack-cli-serve-npm-1.1.0-4f0e34ce07-7684766d7d.zip/node_modules/@webpack-cli/serve/lib/startDevServer.js:25:22)
    at /home/john/Downloads/repos/project/app/.yarn/$$virtual/@webpack-cli-serve-virtual-af6cd77f33/0/cache/@webpack-cli-serve-npm-1.1.0-4f0e34ce07-7684766d7d.zip/node_modules/@webpack-cli/serve/lib/index.js:48:33

Hola, para los que están acostumbrados que con el create-react-app se les abra el servidor de desarrollo automáticamente en el navegador sin tener que navegar a él ustedes, pueden agregarle la bandera open a la configuración del devServer, de forma que les quede así:

devServer: {
		contentBase: path.join(__dirname, "dist"),
		compress: true,
		port: 3005,
		open: true,
	},

Les dejo la configuración de webpack

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",
  },
  resolve: {
    extensions: [".js", "jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 3000,
  },
};

Si devServer les genera error cambiar estos archivos

webpack.config.js

devServer: {
        static: path.join(__dirname, 'dist'),
        compress: true,
        port: 3005,
        open: true,
    },

package.json

"start": "webpack serve --mode development",
"build": "webpack --mode production"

Buenas! a los que les gusta Typescript le dejo la configuración:
webpack.config.js

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './public/index.html',
            filename: './index.html'
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3005
    }
}

tsconfig.json

{
    "compilerOptions": {
        "jsx": "react",
        "module": "commonjs",
        "noImplicitAny": true,
        "outDir": "./build/",
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es5"
    },
    "include": [
        "src/index.tsx"
    ]
}```

_.babelrc_


{
“presets”: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}```

package.json

{
  "name": "platzi-conf-merch",
  "version": "1.0.0",
  "description": "",
  "main": "index.tsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@babel/preset-typescript": "^7.12.7",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
    "mini-css-extract-plugin": "^1.3.3",
    "source-map-loader": "^2.0.0",
    "typescript": "^4.1.3",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  }
}

Adivinen quien instaló react-router-dom en vez de react-dom.

Hola a todos, resulta que mi webpack demoraba mucho en refrescar el navegador despues de guardar un cambio de javascript asi que esto funcionó para mi:

module.exports = {
    mode: 'development',//IMPORTANTE PARA QUE SEA OPTIMO
    entry:'./src/index.js',//Punto de entrada
   ...
}

Configuracion correcta en 2022:

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

/** @type {import('webpack').Configuration} */
module.exports = {
    entry: './src/index.js',
    output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'bundle.js'
    },
    mode:'development',
    resolve:{
        extensions:['.js','.jsx']
    },
    module:{
        rules:[
            {
                test:/\.(js|jsx)$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader'
                }
            },
            {
                test:/\.html$/,
                use:[
                    {
                        loader:'html-loader'
                    }
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./public/index.html',
            filename:'./index.html'
        })
    ],
    devServer:{
        allowedHosts:path.join(__dirname,'dist'),
        compress:true,
        port:3005
    }
}

Esta página te crea la configuración por ti.
https://createapp.dev/

¿PROBLEMAS CON WEBPACK DEV SERVER?


Hola, si tienes problemas con la configuracion de la ultima versión de webpack-dev-server 4.0.0

Para usar Webpack dev server se necesitan ciertas versiones de algunas dependencias.

webpack-dev-server v4.0.0+ requires node >= v12.13.0, webpack >= v4.37.0 (but we recommend using webpack >= v5.0.0), and webpack-cli >= v4.7.0.

Extraido de: webpack-dev-server

Mi solución fué seguir los pasos de intalación de la ultima versión de node para WSL: Node


Ya con esto se configura webpack dev server asi:

devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 3006
  },

Y en el package.json el script quedó:

"start": "webpack serve --mode development",

El atributo contentBase que usamos en el webpack.config.js fue cambiado de nombre, ahora se llama static por si alguien está dandole problemas eso, que cambie el nombre a static y funciona todo bien! 😄

16 clases sin errores. creo que me sirvio fallar todas las veces anteriores. Ademas, este curso esta actualizado, hasta esta parte, a fecha de enero 2021. Y se agradece. Voy genial con los temas! gracias Oscar.

✨Configuración **devServer ** en webpack 5 ✨

  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 3000,
    open: true
  }

Recuerden cambiar contendBase por static y en el package.json especificar los modos:

static: path.join(__dirname, “dist”),

“start”: “webpack serve --mode development”,
“build”: “webpack --mode production”

ContenBase no se usa mas en webpack

Si llegaras a tener algun error con webpack-dev-server, relacionado con el path es probable que el path seleccionado este configurado de una manera erronea

En el curso hacen uso de contentBase para seleccionar el path, pero en versiones mas recientes fue cambiado por static

Configuracion mas optima de devServer

devServer: {
        static: {
            publicPath: path.join(__dirname, "dist")
        },
        port: 3000,
        compress: true,
        open: true 
    }

++contentBase ++no se usa ya en la configuración de devServer. Les dejo esta otra por si les da error al ejecutar el servidor:

    devServer: {
        compress: true,
        historyApiFallback: true,
        port: 3000,
        open: true,
    },

Les facilito las documentación de webpack para que puedan ir entendiendo un poco más acerca de los puntos tratados en esta clase.

package.json:
Por si les sucede algo

{
  "name": "platzi-conf-merch",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel": "^6.23.0",
    "babel-loader": "^8.2.2",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  }
}

Aquellos que tengan problemas con contentBase, desde la actualización webpack-dev-server 4 ( creo que desde la versión 4) se hace de la siguiente manera:

devServer: {
	static: {
	directory: path.join(__dirname, "dist")
	}, 
	compress: true
	open: true,
	port: 3005
}

El open es para que se abra automaticamente el servidor de desarrollo en el navegador. De todas maneras les dejo la documentación https://webpack.js.org/configuration/dev-server/

Ojo con los warnings, una consola llena de warnings no está “todo bien” como lo indican en esta clase, consola limpia, corazón contento, y ademas senior developer contento xD

Que buen repaso de la configuracion de webpack y babel

Por que es necesario utilizar webpack ? al inicio del curso se creo con npx no se podría seguir desarrollando de esta forma

¿Por qué el primer use es un objeto, pero el segundo use es un arreglo que dentro tiene el objeto, no deberían tener la misma estructura?

webpack.config.js

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",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_module/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 3005,
  },
};

.babelrc //En este importan las comillas dobles

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

package.json

{
  "name": "platzi-conf-merch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "webpack": "^5.8.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0",
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "babel-loader": "^8.2.2",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0"
  }
}

en las nuevas versiones de webpack se debe poner el mode y envés de contentBase es static así:

Si tienen este error:

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

es porque en la configuracion de devServer deberia de ir de la siguiente manera:

devServer: {
    static: {
      directory: path.join(__dirname, "public")
    },
    compress: true,
    port: 3006,
  },

Si no les funciona con contentBase en el webpack.config.js actualmente pueden utilizar allowedHosts

allowedHosts: path.join(__dirname, 'dist'),

Si les da error de “contentBase” prueben cambiandolo a “static”, en las últimas versiones hubo esa modificación.

Si piensas que actualizar Node no debería inluir mucho en el error que te sale al intentar usar static en vez de contentBase… pues creeme que sí influye, asíque actualiza tu Node

Utilicen esto:

/** @type {import('webpack').Configuration} */

Pongalo encima de module.exports

Me paso algo raro con la versión del webpack listadas abajo, donde el “contentBase” no lo reconocia, lo tuve que cambiar por “static”, ya quie leí que se cambio en las ultimas versiones del modulo.

“webpack”: “^5.57.1”,
“webpack-cli”: “^4.8.0”,
“webpack-dev-server”: “^4.3.1”,

devServer: {
static: path.join(__dirname, ‘dist’),
compress: true,
port: 3005,
}

Si tienen algún error como este:

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

Simplemente tiene que ir al archivo webpack.config.js y cambiar contentBase por static ya que por lo que entiendo webpack renombro eso static

Espero haber podido ayudar a alguien

Si se encuentran con un error cambien a la version 4.5.0 en webpack-cli ^^ 5/10/2021
{
“name”: “platzi-conf-merch”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“start”: “webpack serve”,
“build”: “webpack --mode production”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“react”: “^17.0.2”,
“react-dom”: “^17.0.2”
},
“devDependencies”: {
“webpack”: “5.1.3”,
“webpack-cli”: “4.5.0”,
“webpack-dev-server”: “3.11.0”,
"@babel/core": “7.12.3”,
"@babel/preset-env": “7.12.1”,
"@babel/preset-react": “7.12.1”,
“babel-loader”: “8.1.0”,
“html-loader”: “1.3.2”,
“html-webpack-plugin”: “4.5.0”
}
}

Holaaa 😄

Si el archivo .babelrc lo hace asi no abra nececidad de importar reac:

{
    "presets": [
        "@babel/preset-env",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ]
    ]
}

NOOO

// import React from 'reacr'

Configuración de Webpack 5 y webpack-dev-server

Creamos en la raíz de nuestro proyecto 2 archivos. webpack.config.js:

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: './index.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3005,
  }
};

y .babelrc:

{
  "presets": [
    "@babel/preset-env", //* compila ES y ES6
    "@babel/preset-react" //* compila ES6 y sintaxís de React
  ]
}

En el archivo package.json añadimos 2 scripts:

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

Sé que el curso no es de expresiones regulares, pero les recomiendo muchísimo una extensión de VS code. Se llama “Regex explained” y les ayudará muchísimo.

me marea esta configuración

Me sale este error de acceso denegado pero no se a que se refiere

> [email protected]1.0.0 start
> webpack serve

ℹ 「wds」: Project is running at http://localhost:3005/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /mnt/c/Users/Pc/OneDrive/Proyectos/platzi-conf-merch/dist
(node:7729) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
⚠ 「wdm」: asset bundle.js 273 KiB [emitted] [minimized] [big] (name: main) 1 related asset
asset ./index.html 229 bytes [emitted]
runtime modules 430 bytes 3 modules
orphan modules 147 bytes [orphan] 1 module
cacheable modules 560 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 21.2 KiB 10 modules
  modules by path ./node_modules/html-entities/lib/*.js 58.9 KiB 5 modules
  modules by path ./node_modules/url/ 37.8 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.52 KiB 3 modules
  modules by path ./node_modules/react/ 8.5 KiB 2 modules
  modules by path ./node_modules/react-dom/ 175 KiB 2 modules
  modules by path ./node_modules/webpack/hot/*.js 1.45 KiB 2 modules
  modules by path ./node_modules/scheduler/ 6.84 KiB
    ./node_modules/scheduler/index.js 197 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.production.min.js 6.65 KiB [built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]

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/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (273 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (273 KiB)
      bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.13.0 compiled with 4 warnings in 30256 ms
ℹ 「wdm」: Compiled with warnings.
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/hiberfil.sys'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/swapfile.sys'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/pagefile.sys'

Hola. ¿Alguien sabe por qué sale este error cuando ejecuto npm run build?

Si a alguno le pase lo mismo que a mi, que el webpack tira error y no hallan en los comentarios alguna solucion para continuar con este curso. Aqui les dejo la solucion a la que llegue ivnestigando por internet.

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

const rulesForStyles = {
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ]
};

const rulesForJavascript = {
    //loader para transformar react a codigo que entienda navegador
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        presets: [ 
            [
                //se configura babel para traducir y runtime autoamtic sirve para no tener que improtar react
                // en cada componente, ya que es mala practica
                '@babel/preset-react',
                {
                    runtime: 'automatic'
                }
            ]
        ]
    }
}

const rules = [ rulesForJavascript, rulesForStyles ]

module.exports = ( env, argv ) => {
    const { mode } = argv;
    const isProduction = mode === 'production';

    return {
        // Ruta de punto de entrada
        //entry: 'src/index.js'
        // ruta donde se generara la app
        output: {
            filename: isProduction ? '[name].[contenthash].js' : 'main.js',
            path: path.resolve( __dirname, 'dist')
        },
        resolve: {
            extensions: [ '.js', '.jsx' ]
        },
        module: {
            rules:  rules 
        },
        plugins: [
            //Tener una forma de crear el index.html, ya que es mala practica tenerlo en la carpeta de build
            new HtmlWebpackPlugin( {
                template:  './public/index.html',
            })
        ],
        devServer: {
            open: true, // Abrir el navegador
            port: 8080,
            compress: true,
            client: {
                overlay: true, // abrir overlay con los errores
            },
            historyApiFallback: true,
        },
        devtool: 'source-map'
    }
};

Para el uso de React 17 que configuración debo tener en webpak y babel para que no me de error al no declarar el import de React?

Si se supone que en las últimas versiones de Rect ya no es necesario importar React (es decir, colocar el cda archivo import React from ‘react’) cuando sigo todos estos pasos no me ejecuta el npm run start hasta que escriba los import de React? alguien sabe por qué?

Precisión de cirujano para no equivocarse. Imagino que usándolo con frecuencia será más intuitivo. Va a venir bien hacer el nuevo curso de webpack.

test: /.(js|jsx)$/ = búscame .\ (cualquier nombre)(js|jsx)$ que termine con js o jsx

Me funcionó con el puerto 8080

n