Cambios en tiempo real con Webpack

Ahora configuraremos webpack de modo que podamos compilar nuestra App, y ver los resultados en una pestaña de nuestro navegador.

// en package.json
{
	"scripts" : {
		"start": "webpack serve --open", // compilar para desarrollo
    "build": "webpack --mode production" // compilar para producción
	}
}

// en webpack.config.js
module.exports = {
	...
	mode: 'development',
	...
}

// en index.js nos habíamos olvidado de importar App
import App from './components/App';

//por último, el index.html//
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Shop</title>
</head>
<body>
    <div id="app">// en index, escribimos que debería agregarse al elemento con 
//el id "app", por eso creamos un div con dicho id, para poder insertarlo
            
    </div>
</body>
</html>

//ahora, en la terminal corremos el comando
npm run start
// y listo, tenemos nuestra app

Los errores son amigos nuestros, por ello, debemos aprender a leerlos y comprenderlos, para así realizar las correciones correspondientes. Si no, recordemos que siempre podemos googlear 🙂