Curso Pr谩ctico de React.js

Curso Pr谩ctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Cambios en tiempo real con Webpack

5/29
Recursos

Aportes 62

Preguntas 52

Ordenar por:

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

Siempre lo mismo con Oscar. Configuramos Webpack por su escalabilidad, adaptabilidad y personalizaci贸n, pero lo que termina pasando es que nos las muestran como una black box, exactamente lo mismo que ser铆a con create-react-app. Pero de esta forma personalizada saltan mil errores, de los que poco conozco, y me trabo nomas al arrancar

Estoy deacuerdo que los errores hacen parte del aprendizaje, pero en algo tan complejo como es este proceso de configuraci贸n que no funcione el paso a paso del profesor es muy frustrante para mi. Despu茅s voy a los comentarios y encuentro muchas 鈥減osibles鈥 soluciones鈥 empiezo a depurar una por una y nada me funciona. Al final sigue siendo complicado, la ruta no es clara y los archivos del repositorio no est谩n actualizados. Si existe un package que ya funciona al 100%鈥 us茅moslo y entendamos su comportamiento鈥 se aprende mucho haciendo ingenier铆a inversa鈥 NO es funcional aprender c贸digo escribiendo como si fuera un dictado sin parar (As铆 me sent铆 por muchos minutos) y lo que llega es la ansiedad que escribo, pauso, escribo, pauso y no aprendo nada pr谩ctico. Este curso es muy importante para mi, pero sin un orden estructurado y validado es complicado. Valoro mucho los comentarios de los otros estudiantes pero a veces enredan m谩s y NO veo una depuraci贸n o correcci贸n activa de los aportes por parte de los profesores.

A mi no me sali贸 el 鈥淗ola Mundo鈥 me salieron unos errores esto se puede solucionas de la siguiente manera ejecutando estos comandos en la terminal

npm install css-loader

npm install  -g sass

npm i mini-css-extract-plugin

 npm install style-loader --save

con estos comandos deber铆a funcionar

este es mi package.json

{
  "name": "react-shop",
  "version": "1.0.0",
  "description": "react eshop",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open",
    "build": "webpack --mode production"
  },
  "keywords": [
    "react",
    "javascript"
  ],
  "author": "Daniel Felipe Diaz R<[email protected]>",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^3.3.0",
    "webpack": "^5.56.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.1"
  }
}

Si les sale algun error que indique que es sobre el webpack.config.js o algo sobre el import de App, cambian en el test:
////
module: {
		rules: [
			{
				test: /\.js$|jsx/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader'
				} 

Dato de vital importancia:
Si agregan esto encima de module.exports

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

VSC les va a facilitar un genial auto completado, de nada y 茅xitos

Hola a todos a mi me salio error cuando ejecute el comando npm start
Mi solucion fue cambiar el script(start) por la siguiente linea de codigo : 鈥渟tart鈥: 鈥渨ebpack server --mode development --open鈥,
Y me funciono no entiendo bien el por que al profe si le funciona con serve y a mi me funciona con server pero preguntare espero le ayude

Como solucionar este error 馃憞

Despu茅s de horas investigando cual era el motivo de este error encontr茅 que esto se debe a que nodeJS no esta actualizado a la ultima versi贸n

En mi caso yo uso WSL y al instalar nodeJS me instala la versi贸n 10.19.0

Para actualizarlo a la ultima versi贸n hay que hacer muchos pasos y es engorroso 馃檮
as铆 que la forma mas r谩pida fue instalando git bash y migrar mi proyecto fuera de Linux

despu茅s de esto ir a la pagina de nodeJS
Descargas en tu pc e instalas y listo miras la versi贸n en tu terminal git bash y tendras la ultima versi贸n de nodeJS
ahora instalas npm y te lo instalara con la ultima versi贸n
Se que es una soluci贸n muy rara jjajajaja pero funciona 馃榿
T煤 c贸digo se compilara sin problemas

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 馃檪

馃槄

estudiar programaci贸n me ayud贸 a aprender de los errores 馃槉

comunidad, presten atencion de donde ponen los archivos .babelrc y webpack.config.js

a mi me salie este error que veo es muy constante en los comentarios.

esos 2 archivos para que funcione bien la ejecucion deben de estar por fuera de la carpeta src ya que dentro de ella no leera la configuracion

espero esto pueda ayudar a los q aun presentan este error.

Ya volvi del curso de webpack, jaja, estaba super perdido, ya al menos entiendo los comandos de webpack

les cuento mi experiencia, quiz谩s es un error tonto peor estuve un rato atorado con ello, no me marcaba ning煤n error la consola, ni la consola del navegador pero no se mostraba el 鈥渉ello world鈥 despu茅s de revisar la clase pasada paso por paso, me di cuenta que tenia un error de typo, en el 鈥渨ebpack.config.js鈥 en la ultima parte en la secci贸n de plugins en filename no hab铆a puesto bien la ruta

plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "/index.html",
    }),
  ],

me hab铆a comido un punto en la ruta, lo correcto es

plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ],

Me cost贸 configurar tanto Webpack, y babel, que ya siempre lo voy a usar, eso me funciono con Arch Linux

La nueva forma de hacerle render a nuestra app de react es importando createRoot en lugar de ReactDOM y de la siguiente manera.

import { createRoot } from 'react-dom/client'

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

VSCode Tip:

para incluir el id en el div escribe as铆:
div#App
y VS hace magia y lo entiende de esta manera

<div id="App"></div>

y si quieres incluir una clase en el div escribe asi:
div.App

<div class="App"></div>

Recuerden que para matar el proceso solo tiene que dar ctrl c

para los mas nuevos, react se actualizo a la version 18, por lo que el REACT-DOM ya no es mas compatible. ahora lo debemos llamar de esta manera:

import { createRoot } from 'react-dom/client'

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

Apartir de React 18 la sintaxis para renderizar nuestra app es la siguiente:

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

Aqu铆 la documentaci贸n

para los del problema que no aparece el hola mundo, la solucion esta en instalar esto:
"npm install css-loader mini-css-extract-plugin sass sass-loader style-loader -D"
recuerder tambien configurar en webpack
muy probablemente barajas los instalo bajo cortina, de igual manera en el siguiente video se instalan, pero por si cualquier cosa ahi esta la posible solucion

Yo les recomiendo que cada que trabajen con una tecnologia, tenga a la mano su documentacion pues puede que algo haya cambiado y con suerte o muy seguramente pues la doc esta actualizada:

Segun la Doc oficial de webpack para setear el mode via CLI lo hacemos de esta forma

webpack serve --mode=development

Si se encuentran con un error de este tipo

Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App from 鈥./components/App鈥
|
ReactDOM.render(<App/>, document.getElementById(鈥榬oot鈥))

yo lo solucione asi

 rules : [
            {
                test: /\.(jsx|js)$/,   
             },
        ]    

Por si el 鈥渟tart鈥 que coloco el maestro no te funciona, el que aparece en la documentacion es la siguiente! 鈥渨ebpack-cli serve --open --mode development鈥

despu茅s de varios errores sali贸 perfecto

3 de Marzo de 2022. Recomiendo fuertemente revisar los aportes de las clases del curso de Webpack para revisar las actualizaciones de c贸digo que han ocurrido desde el lanzamiento de estas clases. Durante el curso de webpack se generaban errores (por la 篓versi贸n篓 del c贸digo) que al revisar los aportes de los compa帽eros eran facilmente solucionables y lo mejor se entendia el porque. Si bien es cierto que Webpack parezca copy/paste con las clases y los aportes se entiende el porque de las cosas. Yo soy un novato 100% y estoy tomando la carrera de JavaScript por lo que toda clase es nueva para mi pero en verdad los aportes de la comunidad ayudan much铆simo a actualizar ese conocimiento y entenderlo.

En el archivo 鈥減ackage.json鈥 agregue
"resolutions": {
鈥渕ini-css-extract-plugin鈥: 鈥2.4.5鈥
},
y en la terminal ejecute:
npm i -D --save-exact [email protected]
y ya 馃槂
soluci贸n encontrada obvio en stackoverflow

Estaba buscando en los comentarios la soluci贸n a un error y veo que mucha gente se queja por errores variados que les fueron surgiendo en la configuraci贸n.
Gente en el d铆a a d铆a de un trabajo en programaci贸n vamos a tener much铆simos errores. Lo que nos hace buenos devs es ser capaces de encontrar soluciones a estos

Intente varias veces con el c贸digo que yo mismo escribi en el paso a paso pero nada me funcionaba. Decidi descargar el repositorio de la clase y me salia un error con sass-loader, el cual se soluciona con esta instalacion:

npm install css-loader

npm install  -g sass

npm i mini-css-extract-plugin

 npm install style-loader --save

Y al final instalar esto:

npm install sass-loader sass webpack --save-dev

Menciono que funcionan muy bien los grupos oficiales de Platzi en Telegram.
Si tienes alguna duda puedes escribir y siempre alguien te ayuda.
Los grupos est谩n moderados y hay embajadores.
Dejo el link

鈥渃reate-react-app proyect-name鈥 y listo B)

En rules es as铆 ahora : use: 鈥榖abel-loador鈥

Les comparto un video que vi hace tiempo y me gust贸 mucho: React.js | Configuraci贸n con Webpack y Babel | desde Cero sin usar create-react-app

me tira mil errores que np tengo ni idea !! estpy en este curso para aprender y me atraso ya en el 4 video !!

Hola alguien me puede ayudar ya intente de todo pero no me sale el hola mundo

< 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 ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import {App} from "./components/App.jsk";
|
> ReactDOM.render(<App />, document.getElementById('app'));
> 

Tengan mucho cuidado con la sintaxis, porque cualquier palabra mal escrita puede provocar mal funcionamiento o que no funcione correctamente al iniciar, f铆jense muy bien en las letras rojas que les marca su terminal.

usen este comando para actualizar nodeJS facil y rapido. npm install [email protected] -g

Hola, tuve un mont贸n de errores, mi soluci贸n fue copiar el mismo c贸digo del repo de GitHub y ejecutar el siguiente comando en la terminal:

npm i -s [email protected]3.4.7 

Y este era mas o menos mi error.

Error: Child compilation failed:
  Module build failed (from ./node_modules/babel-loader/lib/index.js):> 

Aqui la soluci贸n de Stack Overflow
link soluci贸n y problema

Espero les ayude 馃憤.

Tomando el curso en mayo 2022, las versiones que uso:

$ node -v
v16.15.0
$ npm -v
8.5.5
$ npm view react version
18.1.0
$ npm view react-native version
0.68.2

y tomando de referencia algunas respuestas anteriores en los aportes de esta clase, mi soluci贸n a los errores fue el siguiente:

instalar modulos

npm install css-loader mini-css-extract-plugin sass sass-loader style-loader 鈥揇

mis archivos:

index.js

import React, { Component } from 'react';
import { createRoot } from 'react-dom/client'
import App from './components/App'

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

App.jsx

import React from 'react';

const App = () => {
    return (
        <h1>Hello World</h1>
    );
}

export default App;

webpack.config.js

const { plugins } = require('@babel/preset-env/lib/plugins-compat-data');
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',        
    },
    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'
		}),
    ],
}

Tengo este error:

ERROR in ./src/index.js 4:16
Module parse failed: Unexpected token (4:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import ReactDom from 鈥榬eact-dom鈥;
| import App from 鈥./components/App鈥;

ReactDom.render(<App />, document.getElementById(鈥渁pp3鈥));

Desde React 18 es necesario declarar export default App;

Si les aparece un error as铆, deben de hacer un upgrading NodeJs

`[webpack-cli] D:\lifeRestart\my-project\node_modules\webpack-dev-server\lib\servers\WebsocketServer.js:10
static heartbeatInterval = 1000;
^

SyntaxError: Unexpected token =
at new Script (vm.js:83:7)
at NativeCompileCache._moduleCompile (D:\lifeRestart\my-project\node_modules\v8-compile-cache\v8-compile-cache.js:240:18)
at Module._compile (D:\lifeRestart\my-project\node_modules\v8-compile-cache\v8-compile-cache.js:184:36)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (D:\lifeRestart\my-project\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Server.getServerTransport (D:\lifeRestart\my-project\node_modules\webpack-dev-server\lib\Server.js:982:28)`

Error:

test: /\.(js | jsx)$/,

Soluci贸n:

test: /\.(js|jsx)$/,

Conclusi贸n
No dejar espacios

Si por alg煤n casual en la consola les aparece el error :

鈥渞eact-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it鈥檚 running React 17. Learn more鈥

lo pueden solucionar cambiando el c贸digo que Oscar pone en src/index.js, por:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './components/App';

createRoot
    (document.getElementById('root'))
    .render(<App />);

El error se debe, como bien dice en el warning, a que React en su version 18 cambio algunas cosas con el uso de react-dom.

Para averiguar mas sobre el tema:

https://es.reactjs.org/docs/react-dom-client.html

https://es.reactjs.org/blog/2022/03/29/react-v18.html

Trabajo con WSL y mi problema era que deb铆a actualizar la distribuci贸n de linux y adem谩s actualizar node. Luego reainstal茅 react y dom y ya todo me funcion贸.

Actualizar distribuci贸n

sudo apt update&& sudo apt upgrade

instalar modulo n y limpiar cach茅

sudo npm cache clean -f
sudo npm install -g n

Actualizar node

n stable

Probablemente te de la solucion a tu frustraci贸n

  1. Fijate que no exista ningun error de tipeo.
  2. Si persisten los problemas, o te figuran algunos tales como:
Compiled with problems:X
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):

o no te aparece el 鈥淗ola mundo en pantalla鈥 aunque la consola no te marca errores. Pasa el siguiente codigo en babel:

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

Si pude hacer que el codigo me corra sin error, pero es que de nada sirve si no puedo ver el 鈥淗ola mundo鈥 en el navegador

Bajo mi humilde opini贸n, creo que el curso se podr铆a realizar en menos videos puesto que esta configuraci贸n es similar a la que vimos en los 煤ltimos videos del curso de Webpack.

Siento como que me repito pudiendo coger el c贸digo de otro proyecto o usando el comando create-react-app y ser m谩s eficientes.

En mi caso no funciona el live reload. 驴Alguien sabe a qu茅 se podr铆a deber?

Compiled with problems:X

ERROR in ./src/index.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 鈥 @babel鈥 imported from /home/pablo/react/react-shop/babel-virtual-resolve-base.js

si les aparece este error es porq en las cadenas de string dentro de presets no se debe dejar espacios
{
鈥減resets鈥: [
"@babel/preset-env",
"@babel/preset-react"
]
}

Hola!! Les dejo un par de errores que ten铆a mi codigo y despu茅s de revisarlo durante horas los encontr茅, espero que les sirva!

El primero estaba en el file babel, habia puesto:
{
鈥減resets鈥: [
"@babel/preset-env",
"@babel-preset-react"
]
}
en lugar de:
{
鈥減resets鈥: [
"@babel/preset-env",
"@babel/preset-react"
]
}


Y el segundo error fue crear la carpeta components fuera de src, y va dentro junto con index.js

Espero que les sirva!! Saludos

Para lo que tengan problemas, pueden usar este generador de configuraci贸n del proyecto. Seleccionan las dependencias y plugins de la clase (si est谩n un poco perdidos recomiendo el curso de Webpack). Les dejo el link de createapp. Cuando para instalar las dependencias usan el comando npm install

Tambi茅n tuve muchos errores al ejecutar: npm run start, sin embargo, lo que me sirvi贸 fue comparar los archivos que est谩n en la secci贸n recursos e ir probando cada l铆nea diferente a la m铆a, hacer esta t茅cnica me tom贸 10 minutos aproximadamente encontrar mi falla.

Personalmente no estaba haciendo el export (export default App) de mi App.jsx

Saludos鉁岎煆

Error solucionado

Este error se corrige actualizando nodejs, una manera que me funciono fue esta:

Usar nvm, el administrador de versiones de Node. Este software le permite instalar y mantener varias versiones independientes de Node.js, y sus paquetes de Node asociados, al mismo tiempo.

Para instalar NVM en su equipo con Ubuntu 20.04, . Copie el comando curl:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh

Rev铆selo y aseg煤rese de estar c贸modo con los cambios que realiza. Cuando est茅 satisfecho, ejecute el comando de nuevo con | bash anexado al final. La URL que utilice cambiar谩 en funci贸n de la 煤ltima versi贸n de NVM, pero ahora la secuencia de comandos se puede descargar y ejecutar escribiendo lo siguiente:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Esto instalar谩 la secuencia de comandos nvm en su cuenta de usuario. Para usarlo, primero, debe obtener su archivo .bashrc:

source ~/.bashrc

Ahora, puede preguntar a NVM qu茅 versiones de Node hay disponibles:

nvm list-remote

Lo recomendabel ser铆a la versi贸n v16.14.0, escribe el seiguiente comando:

nvm install v16.14.0

Puede ver las distintas versiones que tiene instaladas al ingresar lo siguiente:

nvm lis

Les comparto mi soluci贸n al problema

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? }

Lo 煤nico que hice fue modificar dentro del archivo webpack.config.js, en la 煤ltima parte:

plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html",
        }),
    ],
    devServer: {
        // contentBase: path.join(__dirname, "dist"),
        static: './'
            // compress: true,
            // port: 3000,
    },

Como pueden ver, he comentado las 煤ltimas tres lineas y he agregado la siguiente linea:

static: './'

Hola compa帽eros, he aqu铆 mi soluci贸n con base al problema que muchos presentan

al agregar esa l铆nea, deber谩n reinstalar sin necesidad de desinstalar todos los recursos que el profe 脫scar menciona en el anterior video.

Solucion al mensaje de error:

Una de las forma de solucionar es deshabilitar el mapa de fuente de JS.

Vamos a terminar de configurar los archivos necesarios para poder levantar el proyecto de React.

codigo de package.json

{
  "name": "rect",
  "version": "1.0.0",
  "description": "asd",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open",
    "build": "webpack --mode production"
  },
  "keywords": [
    "react",
    "javascrit"
  ],
  "author": "Blas Rodriguez",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.3"
  }
}

codgio de src/components/index.js

import React from "react";
import ReactDom from "react-dom";
import App from './components/App';

ReactDom.render( <App /> , document.getElementById('app'));

codigo de public/inde.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"></div>
</body>
</html>

Luego con el siguiente comando levantamos el proyecto:

npm run start

un amigo me ayudo solucionando el problema con el comando yarn start, (que no utilize el comando npm run start) y funciono jajajaja

Tuve problemas con la importaci贸n de App dentro del index.js.

ERROR in ./src/index.js 3:0-35
Module not found: Error: Can't resolve './components/App' in 'C:\Users\**\code\yardReact\shop\src'

Not茅 que se deb铆a a que webpack solo estaba tomando las extensiones 鈥.js鈥 por lo tanto arrojaba el error de no encontrar el modulo en la ruta especificada. para solucionarlo, agregu茅 un resolve dentro de la regla para el babel-loader que es b谩sicamente igual al que tenemos dentro de la configuraci贸n misma.

resolve: {
	extensions: [".js", ".jsx"]
},

Quedando este, puntualmente, del siguiente modo:

{
	test: /\.(js|jsx)$/,
	exclude: /node_modules/,
	resolve: {
		extensions: [".js", ".jsx"]
	},
	use: {
		loader: 'babel-loader'
	}
},

Honestamente no se si sea la mejor soluci贸n para este error. Sin embargo, fue concretamente la que me funcion贸. Si existe una opci贸n efectiva o mejor estructurada, por favor h谩galo saber en los comentarios. Para que, todos los que tuvimos este problema obtenga una alternativa optima.

Amigos por si les sirve una opcion adicional ya que yo tambien estuve revisando y viendo en al repo de github en el archivo App.jsx tambien importe al incio del archivo:
import React from 鈥榬eact鈥;

y en index.js: le agregue la extension .jsx
import App from 鈥./components/App.jsx鈥;

Y con eso pude ver mi hola mundo sin ningun error 馃槂

Para quienes les interese la extensi贸n que subraya los tags de HTML se llama Highlight Matching Tag => https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag