Introducción al curso avanzado de React

1

Qué necesitas para este curso y qué aprenderás sobre React.js

2

Proyecto y tecnologías que usaremos

Preparando el entorno de desarrollo

3

Clonando el repositorio e instalando Webpack

4

Instalación de React y Babel

5

Zeit es ahora Vercel

6

Linter, extensiones y deploy con Now

Creando la interfaz con styled-components

7

¿Qué es CSS-in-JS?

8

Creando nuestro primer componente: Category

9

Creando ListOfCategories y estilos globales

10

Usar información real de las categorías

11

Creando PhotoCard y usando react-icon

12

SVGR: de SVG a componente de ReactJS

13

Creando animaciones con keyframes

Hooks

14

¿Qué son los Hooks?

15

useEffect: limpiando eventos

16

useCategoriesData

17

Usando Intersection Observer

18

Uso de polyfill de Intersection Observer e imports dinámicos

19

Usando el localStorage para guardar los likes

20

Custom Hooks: useNearScreen y useLocalStorage

GraphQL y React Apollo

21

¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC

22

Parámetros para un query con GraphQL

23

Usar render Props para recuperar una foto

24

Refactorizando y usando variables de loading y error

25

Usando las mutaciones con los likes

Reach Router

26

¿Qué es Reach Router? Creando la ruta Home

27

Usando Link para evitar recargar la página

28

Creando la página Detail

29

Agregando un NavBar a nuestra app

30

Estilando las páginas activas

31

Rutas protegidas

Gestión del usuario

32

Introducción a React.Context

33

Creación del componente UserForm; y Hook useInputValue

34

Estilando el formulario

35

Mutaciones para registro

36

Controlar estado de carga y error al registrar un usuario

37

Mutaciones para iniciar sesión

38

Persistiendo datos en Session Storage

39

Hacer like como usuario registrado

40

Mostrar favoritos y solucionar fetch policy

41

Cerrar sesión

Mejores prácticas, SEO y recomendaciones

42

Últimos retoques a las rutas de nuestra aplicación

43

React Helmet

44

Midiendo el performance de nuestra app y usando React.memo()

45

React.lazy() y componente Suspense

46

Usando PropTypes para validar las props

47

PWA: generando el manifest

48

PWA: soporte offline

49

Testing con Cypress

Conclusiones

50

¡Felicidades!

Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

Instalación de React y Babel

4/50
Recursos
Transcripción

En esta clase vamos a configurar 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'
                                                ]
                                        }
                                }
                        }
                ]
        }
}

Aportes 55

Preguntas 6

Ordenar por:

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

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