Instalación de React y Babel

La extensión que utiliza para ver cuanto pesa el import es Import Cost

Adicionando lo aprendido en el curso de Webpack!!

• El archivo .babelrc le adicione los preset:
  {
  “presets”: ["@babel/preset-env", “@babel/preset-react”]
  }
  Todo me esta funcionando genial!!

Así va el webpack.config.js

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

module.exports = {
    output: {
        filename: 'app.bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env', 
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ]
    }
}

Si desean apartar la lógica de babel fuera de webpack lo primero que deben hacer es crear un archivo .babelrc en el directorio raíz del proyecto y dentro de .babelrc codear lo siguiente:

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

y en webpack quedaria de la siguiente manera:

module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }

sigan el curso de webpack para que puedan entender, esta muy bueno 😋

Porque no utilizamos npx create-react-app my-app ???

Gracias!!! que diferencia hay?

Es recomendable crear en nuestra raíz del proyecto el archivo .babelrc y allí configurar nuestros presets.

Para hacerlo como en el curso de webpack sería creando en la raiz el archivo “.babelrc” el cual tiene lo siguiente:

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

y en webpack sería

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
    ],
  },

En windows me marcó un error con babel, lo instalé así:

$  npm install -D babel-loader @babel/core @babel/preset-env

Instalar react y react-dom como dependencias

npm i -S react react-dom

Si las opciones de Babel las establecemos con el runtime en automatic, podremos usar React sin hacer import React from 'react'.

options: {
  presets: [
    ["@babel/preset-env"],
    [
      "@babel/preset-react",
      {
        runtime: "automatic", // por defecto es classic
      },
    ],
  ],
}

De hecho @midudev en su más reciente curso de Webpack (En su canal de Youtube) dice que hacer este import de forma manual, ya es una mala practica. 😄

Me parece perfecto no usar create-react-app asi nosotros podemos hacerlo sin necesidad de un comando, y a veces instalmos dependencias que no usamos

Algo muy importante que falto fue la instalacion de babel jeje

npm install babel

Que placer un curso donde a 1x se entienda todo 🤩💚

Los códigos usandos durante la clase:
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Slava Stalin!</h1>, document.getElementById('app'));

y el archivo webpack.config.js:

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

module.exports = {
  // mode:'development',
  output: {
    filename: 'app.bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react'
            ]
          }
        }
      }
    ]
  }
}

Otra opcion es no usar options en el webpack, sino usar el archivo .babelrc:

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

estoy con el mismo error del comentario anterior, el codigo corre

Genial las explicaciones desde lo basico y añadiendo las cosas segun salen los errores. Eso me clarifica aun mas el porque se usan y para que sirven. 👌

Hola, Si alguien tiene problemas con el comando npm run dev, puede solucionar dicho inconveniente cambiando la configuración de los scripts en package.json de la siguiente manera.

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

Espero les sea de ayuda, Saludos 😃

webpack podemos hacerlo personalizado, pero la configuración es manual y eso quita tiempo. se hace una vez pero aun asi.

Hola tengo el siguiente porblema:
internal/validators.js:125
throw new ERR_INVALID_ARG_TYPE(name, ‘string’, value);
^
TypeError [ERR_INVALID_ARG_TYPE]: The “id” argument must be of type string. Received type undefined

Hice exactamente lo mismo. Puede ser un problema de versiones?

Recuerden que pueden abreviar el ‘npm install’ con ‘npm i’

Me sale un error al cargar los source maps, alguien tiene documentación al respecto para pasarme?

Alguien sabe por que se me puede estar presentando este warning?

En la descripción del video, babel-loader esta con @ y tienen que instalarlo sin el @

npm i -D @babel/core @babel/preset-env babel-loader

si estas usando react 18.1.0 te dejo la nueva manera de hacer el render

import React from "react";
import { createRoot } from "react-dom/client";

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<h1>TrakaDev was here!</h1>);

Nueva forma de renderizar con React Dom

A fecha 18 de abril 2020 hay una nueva actualización de React, por tanto si ejecutamos
$ npm install react react-dom
saldrá error al momento de renderizar, ya que se instala la última versión React v18

Para instalar la version de React v17 y seguir el curso sin inconvenientes ejecuten la línea
$ npm install [email protected] [email protected]

Se necesitaría actualizar el curso con React v18, hay varios cambios que en v17 ya no son soportados

Por lo que veo el uso de funciones en React es mas reciente de lo que creía

Configuracion webpack con React.js

Les comparto mi configuracion del archivo webpack.config.js, para poder trabajar con react de la mejor manera, reconociendo la extension de jsx

// Usamos path para referirnos a la carpeta donde estemos
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "development",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    //El resolve permite manejar las extensiones con las que trabajaremos
    resolve:{
        extensions: ['.js', '.jsx']
    },
    module:{
        rules: [
            //Js and JSX loader
            {
		//Esta configuracion des test cargara el loader con cualquier extension
                test: /\.(js|jsx)$/,
		//Es importante ignorar la carpeta node_modules
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        })
    ],
	//Mi configuracion del servidor 
    devServer : {
        static: {
            directory: path.join(__dirname, 'dist/'),
        },
        compress: true,
        port: 3000, 
        open: true,
    },
}

Ademas es inportante configurar el .babelrc con los presets que usaremos

{
	"presets":[
		"@babel/preset-env", //permite compatibilidad
		"@babel/preset-react", //Permite trabajar con react
}

De esta manera aseguramos un correcto flujo de trabajo

npm install html-web-pack-plugin --save-dev a dia de hoy esta sentencia no funciona : Error Not Found

Genial

la extensión para el peso de los archivos es muy útil.

Por qué algunos paquetes llevan el @ y otros no? es un poco tocar las narices 😅

Sin errores, pero no logro hacer que me funcione como debería:

Qué estoy haciendo mal ?

webpack.config.js

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

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

.bablerc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "babel-plugin-styled-components",
        "@babel/plugin-transform-runtime"
    ]
}

Si a alguno le dió el error 'Error: Cannot find module ‘webpack-cli/bin/config-yargs’ al ejecutar npm run dev, solamente vayan al package.json y cambien el script de desarrollo de webpack-dev-server a solamente webpack serve:

  "dev": "webpack serve"

Códigos, prácticas y errores:

Hola tengo el siguiente error, alguna idea

index.js:1 Uncaught Error: 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
|
|

ReactDOM.render(<h1>Seguimos con el curso avanzado!</h1>, document.getElementById(‘app’))

Tengo el siguiente problema. Por favor agradecere su ayuda
(webpack)-dev-server/client?http://localhost:8080
Module build failed: Error: ENOENT: no such file or directory, open ‘C:\Users\Quiroga\Documents\Miguel_Personal\PROGRAMING\PRACTICE\curso-platzi-react-avanzado\node_modules\webpack-dev-server\client\index.js’

Consulta, si en esta clase se implemento “React-Dom”, ya no necesitariamos “html-webpack-plugin”?, o si no, para que estamos utilizando “html-webpack-plugin”?

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 ｢wdm｣: Compiled successfully.

Error in ./src/index .js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module ‘@babel-preset-react/babel-preset’

Me tiene frenado este error:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel-preset-react/babel-preset’
pareciera una incompatibilidad entre versiones de babel-loader y babel-react …
Busco en Internet y no encuentro solución. A alguien le pasó y pudo resolverlo?

siento que esta un poco tedioso la creacion de el entorno de desarrollo, pero es algo nuevo que aprender

Yo estoy usando parcel para esto webpack me desespera.

Alguien conoce el nombre de la tipografía y el theme? están geniales

Ya entiendo mejor para que sirve babel, siempre lo instalaba y no sabia para que

React instalando las dependencias npm i react react-dom y Babel para poder transpilar código jsx a JavaScript Vanilla con: npm i @babel/core @babel/preset-env babel-loader @babel/preset-react --save-dev.

Ahora añadiremos en nuestro webpack.config.js lo siguiente:

// webpack.config.js

{/…/}
module.exports = {
{/…/}
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
options: {
presets: [
’@babel/preset-env’,
’@babel/preset-react’
]
}
}
}
]
}
}

hola a todos , recomiendo trabajar con los archivos del curso, por alguna razon los archivos de Git Hub no me funcionaron, pero comence de nuevo con los archivos del curso y me va todo genial…

Hola compañeros,

Me gustaría saber si hay alguna razón por la cual es mejor utilizar Webpack y no Parcel. La verdad he venido utilizando Parcel y se puede instalar lo mismo sin problemas, no necesita ningún tipo de configuración, y se puede usar todo de igual forma que con webpack.

Pero no se si existe algún tipo de proceso que si se pueda hacer con webpack y no en Parcel.

Agradezco sus respuestas.

g

al compilar obtuve los siguientes warnings: alguien entiende el porque ? gracias compañeros,
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
app.bundle.js (271 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 (271 KiB)
app.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.10.0 compiled with 3 warnings in 5101 ms
ℹ ｢wdm｣: Compiled with warnings.

En lugar de cargar los presets en webpack.config.js se pueden cargar dese un archivo externo .babelrc

//webpack.config.js
{
                test: /\.js|jsx$/,
                exclude: /node_modules/,
                use:'babel-loader'
            }

//.babelrc

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

Hola, para los que están instalando webpack V 5.24> y además tienen un error: Error: Cannot find module 'webpack-cli/bin/config-yargs' . la solucion es usar en el script: "dev": "webpack serve"

Se me hizo muy entendible el uso de webpack