React con CSS y Sass

Si presentan algún error les recomiendo cambiar la configuración de devServer en el archivo de webpack.config.js por la siguiente:

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

Comandos npm

<
npm i mini-css-extract-plugin css-loader style-loader sass sass-loader -D
> 

Sí les presenta el siguiente error

Pueden omitir esta parte

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

O cambiar

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

Por

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

No borren toda la configuración de dev server, sólo cambien la palabra contentBase, por static de la siguiente forma:

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

Después de ejecutar npm run start:

Llegados a este punto donde hemos terminado la configuracion minima de nuestro proyecto, me gustaria compartir con todos los que estamos aprendiendo, un par de recomendaciones y consejos.

.
Pero antes les dejo por aqui unos enlaces para que puedan leer y solucionar posibles problemas con que se puedan topar referentes a esta clase :
sass-loader doc

{
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
 },

.
El esquema correcto para configurar DevServer es el siguiente:

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

Por eso el error en el minuto 9:40.
En el minuto 10:18 se ve que hay un corte en el video y Oscar ya ha borrado la configuracion de DevServer.

Si quieren leer un poco mas les dejo la documentacion oficial:
DevServer Doc

.
Ahora si, los consejos:

• Este tipo de configuraciones las hacemos unicamente en proyectos que sean MUY personalizados o bien en proyectos personales donde estemos aprendiendo a utilizar dichas herramientas.
• En el mundo laboral, (dependiendo de la empresa) la mayoria de organizaciones necesitan entregar productos rapido, y que sean funcionales.
• Algunas empresas por ejm, en entrevistas tendran que hacer una prueba tecnica, y probablemente esa prueba sea un ejercicio practico live coding.
• A lo que quiero llegar con esto es que si llegan a tener una prueba tecnica similar con tiempo limitado, no cometan el error de ponerse a hacer estilos con css puro o sass, y configuraciones desde cero existiendo herramientas para ello. (Por supuesto esto depende del proyecto).
• Ultimamente create-react-app ha dejado de obtener un buen soporte y lanza muchos WARNINGS, en su lugar tambien existe Vite que personalmente me gusta mucho mas ya que es mas rapida y facil.
• Para estilos, si ya tenemos buenas bases de CSS podemos aprender al menos 3 frameworks, yo recomendaria TailwindCSS, este tiene muy buen soporte para configurarlo ya sea con create-react-app o con Vite y su doc es muy limpia y entendible, pero tambien existen otros como MaterialUI, etc.
• Las herramientas existen para facilitarnos la vida, asi que usemoslas 🤗.
  .

Psdt: No estoy desmeritando el curso, me esta encantando hasta ahora. 💚
Nada mas comparto algunos de los errores que yo cometi en mi primer entrevista y que ustedes pueden evitar si van bien preparados. ✨

React con Css y Sass

Instalaremos algunos loaders y plugins para que nuestro proyecto pueda funcionar con estilos de css y sass

npm instal mini-css-extract-plugin css-loader style-loader sass sass-loader -D
// en el video, faltaba solamente el loader de sass por los que nos dio un error

// como siempre, cada vez que instalamos dichas dependencias, en webpack debemos 
// indicar reglas y los plugins

module.exports = {
	...
		module: {
			rules: [
				...
				{
	         test: /\.s[ac]ss$/i,
           use: [
               "style-loader",
               "css-loader",
               "sass-loader"
	        ]
        }
				...
			]
		}
	...,
	plugins: [
		...
		new MiniCssExtractPlugin({
			filename: '[name].css'
    })
		...
	],
	devServer: {
        allowedHosts: path.join(__dirname, 'dist'), // contentBase corresponde a webpack 4
// ahora en Webpack 5 se usa allowedHosts
// créditos al compañero Fabian Rivera Restrepo
        port: 3005,
        compress: true,
    }
}

// creamos la carpeta styles dentro de src
// en styles, creamos el archivo global.scss

$base-color: #ff0000;
$color: rgb(black, 0.88);

body {
    background-color: $base-color;
    color: $color;
}

// en App.jsx, importamos los estilos de scss
import '../styles/global.scss';

// ahora si podemos compilar otra vez nuestra app
npm run build

No me funcionó, sin embargo omití la siguiente parte y arrancó:

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

JAJAJJAJ ni dice que saca todo, automaticamente lo hace desaparecer xddd

actualización al 25/03/2022

cuando les salga un error es porque este codigo ya no se usa:

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

hay dos soluciones que a mi me funciono, la primera fue obviar esa linea es decir eliminarla y luego aplicar:

npm run start

La segunda opcion es que esas lineas puedes ser actualizadas por la siguiente manera:

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

esto es porun tema de actualizacion de parte de webpack, nno soy experto en el tema pero buscando lo encontre, lo probe y funciono de esas dos maneras, suerte a todos.

PSD: por mas que se hagan las instalaciones grupales de las herramientas a veces aun asi falla, para eso lean que falta y vuelvan a instalarlo por ejemplo:

npm install sass-loader

Me chillaron los ojos con el background.
Cambie:

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

por:

    static: path.join(__dirname, 'dist'),
    compress: true,
    historyApiFallback: true,
    port: 3006,
    open: true,

En el curso de webpack, se revisa con mas detalle.

Recuerden que “baseContent” ha cambiado por “static”

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

Asi les queda su configuración (:

Al poner los loaders de css en webpack.config.js, para que no les de error debe si o si tener el siguiente orden:

 use: ["style-loader","css-loader", "sass-loader"],

para solucionar este error , hay q modificar la propiedad **contentBase ** y usar usar static en la configuracion de devServer.

deberia quedar asi

    allowedHosts: path.join(__dirname, "dist"), // contentBase corresponde a webpack 4
    // ahora en Webpack 5 se usa allowedHosts
    // créditos al compañero Fabian Rivera Restrepo

Si tienen problemas con el devServer pueden usar este pequeño fragmento de código:

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

Soy el único que cree, que el error en el minuto 9.25 fue de tipeo, al escribir NPM UN START?

Puse pausa y arregle el problema antes que me lo diga el profe 8)

Así quedó el archivo webpack.config.js con los ajustes del llamado para el css

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

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'
          }
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
  ],
  devServer:{
    static: path.join(__dirname, 'dist'),
    compress:true,
    port:3005,
  }
}

React con Css y Sass

Para poder trabajar con css y sass en neustro proyecto, necesitamos agregar los loaders, paquetes y plugins necesarios con:

npm install mini-css-extract-plugin css-loader style-loader sass sass-loader -D

--webpack.config.js --
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: {
            {
                test: /\.s[ac]ss$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            }
        }
    }, 
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ]
}

Configuración adicional del servidor de pruebas:

--webpack.config.js --
module.exports = {
    devServer: {
        static: path.join(__dirname, 'dist'),
        compress: true,
        port: 3000,
    }
}

Con esto listo, creamos una carpeta ‘styles’ dentro de ‘src’ y añadimos global.scss con los estilos que querramos. Luego, en nuestro archivo App.jsx podemos instanciar nuestro archivo css con:

import '../styles/global.scss';

Para la version >= 4.0.0 de webpack

    devServer: { // configuración del servidor
        static: {
            directory: path.resolve(__dirname, 'dist'), // carpeta donde están los archivos
        },
        compress: true, // comprimir
        port: 3005, // puerto
    } // webpack.config.js

SI a alguien le aparecio un error con el loader de sass(scss) , como a mi, utilicen los comandos para instalar el loader y el node-sass… les dejo el link donde encontre la solucion i nos reenvian a la documentación más detallada https://programmerclick.com/article/3870497660/

Si les tira el error MiniCssExtractPlugin is not a constructor, lo pueden solucionar con

const MiniCssExtractPlugin = require("mini-css-extract-plugin").default;

Si tienen mas detalles de esto porfa agregen.

Definitivamente hermoso gracias a;l profe oscar pude configurar un proyecto de React básico con webpack

Con la misma magia del profe solvente el problema de devServer (o sea quitandolo), porque ni con static pude arreglar el error

Compiled with problems:X
ERROR in ./src/components/App.jsx 2:0-10
Module not found: Error: Empty dependency (no request)

Comparto un resumen con todo el prework

no lenculpen al profe si les sale algun error, webpack se actualiza constantemente, pueden mantenerse al dia en el soguiente url (https://webpack.js.org/configuration/dev-server/)

No entiendo muchas cosas de lo que hace y no porque no tenga los conocimientos para poder comprenderlo, si no porque hace cosas sin mostrar un claro procedimiento, resuelve problemas que nosotros como estudiantes no logramos entender la manera en la que lo hizo, y de nuevo no es por falta de conocimiento si no por como lo resuelve.

8:14 “Nuestros ojos van a estallar” jajajaj totalmente de acuerdo profesor Barajas!! 😂

Si les da error en la configuración del devServer, es porque hubo cambio en la versión 5, se debe de colocar de la siguiente manera:

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

Adjunto link a la documentación. happy hack 😃

NOTAS

No existe:

moini-css-extract-plugin<

Para agregar la parte de configuración de “devServer”, pueden utilizar el siguiente código:

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

Para aprender más sobre las configuraciones de webpack pueden tomar el Curso de Webpack 🤓
(Oscar también es profe en ese curso 🤩)

En mi caso solo lo marque como comentario, le puse // a contentBase y me dejo visualizarlo

La nueva forma de usar dev-server en webpack

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
};

Si os sale este error, yo lo he solucionado instalando un paquete de sass que por lo que he leido es necesario.

Comando:
npm i sass --save-dev

Estuve 4 horas arreglando un problema pero por fin ya me muestra el hola mundo siuuuuuuuuuu
Si no amas, analizar he intentar solucionar problemas tal vez programar no sea para ti.

la propiedad contentBase de devServer esta descontinuada, en ves de eso se debe usar static de la siguiente manera:

devServer:{
	static: path.join(__dirname, 'dist'),
	.....
}

o

devServer:{
	static:{
		directory: path.join(__dirname, 'dist')
}
	.....
}

Hola pequeño programador que esta batallando!

Hay un error en cuanto a Invalid options object. Dever … bla bla…

Este error ocurre porque ya no se hace de esa manera, en el video hay un corte RARO pero tranquilo (NO HAY QUE BORRAR TODO Y APAGAR EL PC.)

Se soluciona reemplazandolo por lo siguiente:

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

Lo que sucede es que cambiamos ese “contentBase” por una propiedad static y dentro le colocamos otra propiedad llamada “directory” alli colocamos la logica anterior.

Googlea todo error que veas! No decaigas.

GO AHEAD.

Creo que una de las mayores ventajas de webpack en dev es que te permite cambiar de una forma muy dinámica el puerto de despliegue sin flags extra

Super curioso que la solución de la configuración del devServer sea no configurar el devServer

Al iniciar el proyecto con el devServer me salto el error, agregue el compress y el error siguio.
opte por eliminar el devServer y si me corrio el proyecto

Para agregar Css o estilos a nuestro proyecto es muy buena opcion trabajar con preprocesadores como en este caso “SASS”. Para agrega el preprocesador a nuestro proyecto lo hacemos de la siguiente maner con nuestra consola:

npm i mini-css-extract-plugin css-loader style-loader sass sass-loader -D

codigo webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

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'
                    }
                ]
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
    ],
    // devServer:{
    //  contentBase:path.join(__dirname,'dist'),
    //  compress:true,
    //  port:3005,
    // }
}

codigo global.scss

$base-color:#ff0000;
$color:rgba(black,0.88);

body{
    background-color: $base-color;
    color: $color;
}

codigo App.jsx

import React from 'react';
import '../styles/global.scss';

const App = () => {
    return (
        <h1>Hola Mundo, Bienvenidos al Curso Practico de React!</h1>
    );
}

export default App;

Luego ejecutamos el proyecto con el siguiente comando:

npm run start

Grande el profe borrando la configuraciòn del devServer pa solucionar el problema…Excelente la comunidad que aportar sus soliciones

este pana tiene el talento de hablar por 11:45 minutos sin callarse y sin embargo no decir nada, puro rellenar con cualquier cosa que se le ocurre sin explicar realmente nada, es como si narrara lo que va haciendo pero sin ningun tipo de sentido tecnico.

Curioso que funcionan todos o ninguno

Te fallo Oscar, no uso webpack para tus cursos D:

esta parte hay que modificarla así, para que funcione.
devServer:{
allowedHosts: path.join(__dirname, ‘dist’),
compress:true,
port: 3005,
}

en dev server si no les funciona pueden utilizar esto:

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