DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Mark Hkr 😎
Mark Hkr 😎

Posted on • Originally published at marlom.dev

Upgrading to React 17 and Webpack 5

Breaking Changes!!

In my last post I showed you how to create a React app from scratch with Webpack. Since then, these libraries have been updated with new features and interesting alternatives.

At least in Webpack…

This week was released a new version of React and I couldn't be more happy about it. As they mention in this blog post this new version does not contain any new features for us, the developers. Instead, they focused this release on features that enable gradual updates.

And, the release of Webpack 5 which has many new features.

The I'm more of a code type of person

The github repo

Upgrading Packages

First, lets update react and react dom:

yarn upgrade react@17.0.1 react-dom@17.0.1
Enter fullscreen mode Exit fullscreen mode

Since React 17 we can use the new jsx transform, so we will need to upgrade our babel tools and install a new plugin:

yarn upgrade -D @babel/{core,preset-{env,react}}
Enter fullscreen mode Exit fullscreen mode
yarn add -D @babel/plugin-transform-react-jsx
Enter fullscreen mode Exit fullscreen mode

Next we will need to update our .babelrc file to look like this:

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

Starting from Babel 8, "automatic" will be the default runtime for the plugins.

Removing Unused React Imports

The new JSX transform automatically imports the necessary functions and React is no longer needed to be in the scope.

Inside our 'src/index.js' we can get rid of the import React statement:

import ReactDOM from 'react-dom'

const App = () => <div>Hello there!!</div>

ReactDOM.render(<App />, document.getElementById('root'))
Enter fullscreen mode Exit fullscreen mode

And that's it, when you create a new React component you don't need to import React anymore.

Upgrading Webpack

Webpack 5 has many breaking changes, so we will need to upgrade our dependencies and our code.

Let's start by upgrading webpack itself and the cli tool:

yarn upgrade webpack{,-cli} --latest
Enter fullscreen mode Exit fullscreen mode

Change the "start" script in your package.json file:

...
"start": "webpack serve --mode='development'"
...
Enter fullscreen mode Exit fullscreen mode

That's it.

This is still a pretty much basic (but powerful) configuration, we will need to add more tools to create a full fledged React app.

Share this on Twitter

Top comments (1)

Collapse
 
isarisariver profile image
Marian

Nice, thanks for sharing!

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!