How to upgrade a project to Webpack 5 and React 17?
Upgrading your project to the latest versions of tools and libraries is crucial to keep it efficient and secure. In this case, we will explore the process of upgrading a project using Webpack 5 and React 17 to optimize its performance and features. Let's talk about the Platzi Store project, with which we will perform the upgrade.
What is Platzi Store and how to configure it?
Platzi Store is a project used in several courses to learn about unit testing, tools like Webpack, and other advanced development concepts. The first thing to do is to access this project through a clone or fork from its repository, which you can find in the links section of the course.
- Clone the project: Use the command
git clone URL
where URL is the address of the Platzi Store repository.
- Access the project folder: Open the terminal and navigate to the folder with
cd platzi-store
.
- Open the project in an editor: You can use Visual Studio Code or any editor of your choice with
code .
to open the project.
How to review and understand the current configuration of the project?
Before making any updates, it is essential to understand how the project is currently configured:
- Important files: Check the
README.md
for basic instructions and the package.json
file to understand the dependencies and scripts that run.
- Webpack configurations: This file defines entry and exit points, extensions to work with (such as
.js
and .
jsx
), loaders and plugins that optimize and process the project.
What needs to be updated in Webpack and React?
Below, you'll see which dependencies you need to upgrade to take advantage of the latest features:
- Webpack: Upgrading to Webpack 5 is essential, along with its CLI and various plugins.
- React: Moving to React 17 and its associated libraries, such as
react-dom
and react-redux
, is also paramount.
How to upgrade Webpack and its components?
To make sure everything is updated to the latest versions, run the following commands in the terminal:
npm install webpack@latest webpack-cli@latest babel-loader@latest webpack-plugin@latest mini-css-extract-plugin@latest
This will ensure you have the latest versions and resolve any incompatibilities.
How to update React and its related dependencies?
Similarly, perform the React upgrade by running:
npm install react@latest react-dom@latest react-router@latest react-redux@latest redux@latest redux@latest
What steps to follow after the update?
Once the dependencies have been updated, make sure to configure Webpack correctly for local development. In Webpack 5, the use of webpack-dev-server
has changed, now you should simply use webpack serve
.
How to check that everything works correctly?
Finally, run the project to verify that everything is in order:
npm run start
This command will compile your project and open the browser on the port configured for local development, allowing you to view and test your updated application. This is a good time to test thoroughly and verify that there are no errors in Redux's built-in paths or state systems.
With the project now updated and running properly, we are ready to further optimize and continue exploring best practices in modern development - keep learning and improving your skills!
Want to see more contributions, questions and answers from the community?