Cursos Empresas Blog Live Conf Eventos Precios

0:0011:07

Recursos

Resumen

¿Cómo actualizar un proyecto a Webpack 5 y React 17?

Actualizar tu proyecto a las últimas versiones de herramientas y bibliotecas es crucial para mantenerlo eficiente y seguro. En este caso, vamos a explorar el proceso de actualización de un proyecto utilizando Webpack 5 y React 17 para optimizar su rendimiento y características. Platiquemos sobre el proyecto Platzi Store, con el que llevaremos a cabo la actualización.

¿Qué es Platzi Store y cómo configurarlo?

Platzi Store es un proyecto utilizado en varios cursos para aprender sobre pruebas unitarias, herramientas como Webpack, y otros conceptos avanzados de desarrollo. Lo primero es acceder a este proyecto mediante un clon o fork desde su repositorio, que puedes encontrar en la sección de enlaces del curso.

Clonar el proyecto: Utiliza el comando git clone URL donde URL es la dirección del repositorio de Platzi Store.
Acceder a la carpeta del proyecto: Abre el terminal y navega a la carpeta con cd platzi-store.
Abrir el proyecto en un editor: Puedes utilizar Visual Studio Code o cualquier editor de tu preferencia con code . para abrir el proyecto.

¿Cómo revisar y entender la configuración actual del proyecto?

Antes de hacer cualquier actualización, es esencial entender cómo está configurado actualmente el proyecto:

Archivos importantes: Verifica el README.md para instrucciones básicas y el archivo package.json para entender las dependencias y scripts que se ejecutan.
Configuraciones de Webpack: Este archivo define puntos de entrada y salida, extensiones a trabajar (como .js y .jsx), loaders y plugins que optimizan y procesan el proyecto.

¿Qué hay que actualizar en Webpack y React?

A continuación, verás qué dependencias necesitas actualizar para aprovechar las características más recientes:

Webpack: Actualizar a Webpack 5 es esencial, junto con su CLI y varios plugins.
React: Mover a React 17 y sus bibliotecas asociadas, como react-dom y react-redux, también es primordial.

¿Cómo realizar la actualización de Webpack y sus componentes?

Para asegurarte de que todo está actualizado a las versiones más recientes, ejecuta los siguientes comandos en la terminal:

npm install webpack@latest webpack-cli@latest babel-loader@latest webpack-plugin@latest mini-css-extract-plugin@latest

Esto te garantizará tener las versiones más recientes y resolver cualquier incompatibilidad.

¿Cómo actualizar React y sus dependencias relacionadas?

De manera similar, realiza la actualización de React ejecutando:

npm install react@latest react-dom@latest react-router@latest react-redux@latest redux@latest

¿Qué pasos seguir después de la actualización?

Una vez actualizadas las dependencias, asegúrate de configurar Webpack correctamente para el desarrollo local. En Webpack 5, el uso de webpack-dev-server ha cambiado, ahora simplemente deberías usar webpack serve.

¿Cómo revisar que todo funcione correctamente?

Finalmente, ejecuta el proyecto para verificar que todo esté en orden:

npm run start

Este comando compilará tu proyecto y abrirá el navegador en el puerto configurado para el desarrollo local, permitiéndote ver y probar tu aplicación actualizada. Es un buen momento para realizar pruebas exhaustivas y verificar que no haya errores en las rutas o sistemas de estado de Redux integrados.

Con el proyecto ahora actualizado y corriendo adecuadamente, estamos listos para optimizar aún más y seguir explorando mejores prácticas en el desarrollo moderno. ¡Continúa aprendiendo y mejorando tus habilidades!

Migración y Optimización de Proyectos con Webpack 5

Curso de Webpack con Express.js, React.js y TypeScript

Clase 7 / 22

Ver clases

Migración y Optimización de Proyectos con Webpack 5

Curso de Webpack con Express.js, React.js y TypeScript

Clase 7 de 22

Clase 7 / 22

Migración y Optimización de Proyectos con Webpack 5

Curso de Webpack con Express.js, React.js y TypeScript

Clase 7 / 22

Ver clases

Comentarios

Luis Fernando Nuñez Rangel#3209148

Cambios en React-router-dom

Como sabemos hemos actualizado la mayoria de nuestras dependencias en el proyecto de Platzi Store, lo cual conlleva a analizar si se han realizado ciertos cambios.

El cambio mas notorio es que Switch ya no es un modulo exportado de react-router-dom y ha sido remplazado por Routes en la nueva version

Ademas de unos cambios pequeños a la hora de definir las rutas de la app

Cambiando de esto:

<Route exact path='/' component={Home} />

A esto :

<Route exact path='/' element={<Home />} />

y para definir el default de la ruta en caso del notFount usaremos el path *

<Route path ='*' element={<NotFound />} />

Eliaz Bobadilla#3079614

Si es que alguien obtiene un error como: Attempted import error: 'Switch' is not exported from 'react-router-dom'

Chequen: https://stackoverflow.com/questions/63124161

Paolo Joaquin Pinto Perez#2587696

++Migracion de Webpack 4 a Webpack++

Después de tener ya el proyecto en nuestro entorno de desarrollo.

Actualizamos. Webpack y plugins:

npm install webpack@latest webpack-cli@latest babel-loader@latest html-webpack-plugin@latest mini-css-extract-plugin@latest

React:

npm install react@latest react-dom@latest react-router-dom@latest react-redux@latest redux@latest

const App = () => (
  <BrowserRouter>
    <Layout>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/checkout" element={<Checkout />} />
        <Route element={<NotFound />} />
      </Routes>
    </Layout>
  </BrowserRouter>
);

export default App;

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Home from '../containers/Home';
import Checkout from '../containers/Checkout';
import Layout from '../components/Layout';
import NotFound from '../containers/NotFound';

const App = () => (
  <BrowserRouter>
    <Layout>
      <Routes>
        <Route exact path='/' element={<Home />} />
        <Route exact path='/checkout' element={<Checkout />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </Layout>
  </BrowserRouter>
);

export default App;

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { legacy_createStore as createStore } from 'redux';
import App from './routes/App';
import reducer from './reducers';

import initialState from './initialState';

const store = createStore(reducer, initialState);

const root = createRoot(document.getElementById('app'));

root.render(
  <Provider store={store}>
    <App />
  </Provider>,
);

Comentarios

Luis Fernando Nuñez Rangel#3209148

Cambios en React-router-dom

Como sabemos hemos actualizado la mayoria de nuestras dependencias en el proyecto de Platzi Store, lo cual conlleva a analizar si se han realizado ciertos cambios.

El cambio mas notorio es que Switch ya no es un modulo exportado de react-router-dom y ha sido remplazado por Routes en la nueva version

Ademas de unos cambios pequeños a la hora de definir las rutas de la app

Cambiando de esto:

<Route exact path='/' component={Home} />

A esto :

<Route exact path='/' element={<Home />} />

y para definir el default de la ruta en caso del notFount usaremos el path *

<Route path ='*' element={<NotFound />} />

Eliaz Bobadilla#3079614

Si es que alguien obtiene un error como: Attempted import error: 'Switch' is not exported from 'react-router-dom'

Chequen: https://stackoverflow.com/questions/63124161

Paolo Joaquin Pinto Perez#2587696

++Migracion de Webpack 4 a Webpack++

Después de tener ya el proyecto en nuestro entorno de desarrollo.

Actualizamos. Webpack y plugins:

npm install webpack@latest webpack-cli@latest babel-loader@latest html-webpack-plugin@latest mini-css-extract-plugin@latest

React:

npm install react@latest react-dom@latest react-router-dom@latest react-redux@latest redux@latest

const App = () => (
  <BrowserRouter>
    <Layout>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/checkout" element={<Checkout />} />
        <Route element={<NotFound />} />
      </Routes>
    </Layout>
  </BrowserRouter>
);

export default App;

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Home from '../containers/Home';
import Checkout from '../containers/Checkout';
import Layout from '../components/Layout';
import NotFound from '../containers/NotFound';

const App = () => (
  <BrowserRouter>
    <Layout>
      <Routes>
        <Route exact path='/' element={<Home />} />
        <Route exact path='/checkout' element={<Checkout />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </Layout>
  </BrowserRouter>
);

export default App;

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { legacy_createStore as createStore } from 'redux';
import App from './routes/App';
import reducer from './reducers';

import initialState from './initialState';

const store = createStore(reducer, initialState);

const root = createRoot(document.getElementById('app'));

root.render(
  <Provider store={store}>
    <App />
  </Provider>,
);

Comentarios (16)16 comentarios

Luis Fernando Nuñez Rangel

Hace 5 años

Eliaz Bobadilla

Jesus Heriberto Lara Juarez

Hace 3 años

eres el me mejor amigo

Paolo Joaquin Pinto Perez

y npm install Importante: en package.json: Cambiamos:

"start": "webpack-dev-server --open --mode development",

Cambió, desde webpack 5 ya es:

"start": "webpack serve --open --mode development",

y npm run start

muy buena sintesis de la clase

Diego Giraldo

Para esta fecha donde estamos usando React 18, React Router Dom 6, React-redux 8, Webpack 5, etc... Para poder avanzar en esta clase, y recopilando las soluciones que leí de los otros compañeros, este es el paso a paso para lograr que el proyecto funcione.

Primero cambiar la forma de importar, y llamar dependencias en el index.js:

import ReactDOM from 'react-dom/client';
import { legacy_createStore as createStore } from 'redux';

Instalar la última versión del Webpack dev server:

npm i webpack-dev-server@latest

Cambiar el Switch por Routes en el archivo de App.jsx donde se listan las rutas de la aplicación

Alejandro Álvarez Uribe

Además en el archivo App eliminar "exact" y cambiar "component por element" de cada componente <Route> Quedaría de la siguiente manera:

ESTEBAN SALAZAR ZAPATA

Hace 4 años

Para la nueva version de React (18 al crear este comentario) se debe actualizar el index.js. Porque con react 18 se cambio la forma de iniciar el root para el React app

Tienes que cambiar a esto:

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Jhonatan Celis Rincón

Aun no entiendo bien React pero a la fecha de hoy no me funcionó y viendo los aportes entiendo que algo se actualizó. Lo que se encarga de las rutas cambió por esa razón debe modificar en App.jsx Switch por Routes:

Diego Vergara

Si tienen problemas con webpack-cli cuadno hace npm start deben instalar la ultima version de webpack-dev-server

++Haciendo Fork al Proyecto++

1.- En Github le haces Fork ( clickeas el icon del fork)

2.- git clone https://github.com/gndx/platzi-store ó la url de tu fork. Pd: No hace falta hacer git reset "id-del-commit", porque el profesor en el branch master esta con el commit de esta clase. y hay otro branch con los commit de clases posteriores llamado clase/10

Pero por si tienen algún problema: 3.- Para que regresen en el tiempo a el commit de esta clase:

git reset --hard  974426a

y listo

José Daniel Navarrete Díaz

Se generó al compilar el proyecto debido a que no se instauro la configuración de babel para soportar jsx. Lo solucioné actualizando todo lo relacionado a babel y creando el fichero de configuración de .babelrc

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

Johnnie Lopez

Consulta los módulos de webpack, los plugins y loaders son dependencias de desarrollo?

Juan Carlos Leandro Diaz Zegarra

Realmente son dependencias que te van a permitir añadir funcionalidades a tu codigo que normalmente sin ellas no tendria

Yo las agrego como dependencias de desarrollo ya que estas permiten que el programa funcione en nuestro entorno local, pero una ves mandadas a producción y transpiladas no ocuparemos, ya que lo que obtendremos es una pagina estatica con html, js, y css minificado y básico por que que los plugins, loaders y demas dependencias de webpack son unicamente de desarrollo

Jose Ever Muñoz Muñoz

Hace un año

Para que funcione en react 19 simplemente edite el archivo index.js asi:

Armando Chindoy

Para los que usan wsl2 y no les muestra nada en localhost:3000, pueden reiniciar wsl con el comando en powershell de windows

wsl --shutdown

o pueden también intentar con una configuración en webpack y buscar la ip de su wsl colocando ipconfig en el cmd o powershell de windows y tomando la ipv4 de wsl y colocándola en su navegador. esto con el fin de que dev-server acepte conexiones externas.

devServer: {
    host: '0.0.0.0',
  },

si no les sale completo la platzi store y solo les sale el navbar y el footer tienen que modificar las rutas en el archivo app.js para que tome las nuevas configuraciones de react-router-dom V6

<Switch> -> <Routes>
component -> element
ej:
<Routes>
<Route exact path="/" element={<Home/>}>
<Routes/>

Jaime Salas

Debiesen ser las nuevas rutas

Dimas Antonio Mendoza Lozano

Si manejan Yarn les dejo este comnando asi actualizan todo a la vez

 yarn upgrade-interactive --latest

Alvaro ramirez

la propiedad externals lo que hace es excluir paquetes del bundle final.

Brandon Argel Verdeja Domínguez

Les recomiendo la extensión version lens para vsc, cuando la instalan van al package.json, le dan al icono superior derecho de la V que es de la extensión y les mostrará todas las dependencias que están desactualizadas, o si están en su versión más reciente y desde ahí mismo las pueden actualizar a la más segura (LTS) o a la más reciente. ㅤ

Eric Gomez

Recursos

Resumen

Migración y Optimización de Proyectos con Webpack 5

Migración y Optimización de Proyectos con Webpack 5

Migración y Optimización de Proyectos con Webpack 5

Progreso del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Migración y Optimización de Proyectos con Webpack 5

Migración y Optimización de Proyectos con Webpack 5

Recursos

Resumen

¿Cómo actualizar un proyecto a Webpack 5 y React 17?

¿Qué es Platzi Store y cómo configurarlo?

¿Cómo revisar y entender la configuración actual del proyecto?

¿Qué hay que actualizar en Webpack y React?

¿Cómo realizar la actualización de Webpack y sus componentes?

¿Cómo actualizar React y sus dependencias relacionadas?

¿Qué pasos seguir después de la actualización?

¿Cómo revisar que todo funcione correctamente?

Comentarios

Cambios en React-router-dom

++Migracion de Webpack 4 a Webpack++

Recursos

Resumen

¿Cómo actualizar un proyecto a Webpack 5 y React 17?

¿Qué es Platzi Store y cómo configurarlo?

¿Cómo revisar y entender la configuración actual del proyecto?

¿Qué hay que actualizar en Webpack y React?

¿Cómo realizar la actualización de Webpack y sus componentes?

¿Cómo actualizar React y sus dependencias relacionadas?

¿Qué pasos seguir después de la actualización?

¿Cómo revisar que todo funcione correctamente?

Comentarios

Cambios en React-router-dom

++Migracion de Webpack 4 a Webpack++

++Haciendo Fork al Proyecto++