Webpack for React v17, a minimalistic setup

React v17 came out with a lot of buzz that has shaken up the frontend ecosystem. Finally the promise land in horizon 🏝 but it also broke my development process 😩 in current projects. Let’s say you have an opportunity to start fresh — so much free time. right? 😷

Setup babel and webpack

Let install packages quickly

npm i -D html-webpack-plugin webpack webpack-cli babel-loader @babel/core @babel/preset-react

react & react-dom

npm i react react-dom

Create webpack.config.js as a based configuration.

I know some of you experts might have spotted missing mode . Lets do it now 🙂 by creating a development configuration webpack.development.js and production configuration webpack.production.js

Voila !!!, we got our two configurations. You can also consider using webpack-merge if you have to perform more complex configuration merging. But i prefer KISS 😘

Configuring babel the tricky kid

Create .babelrc.js

Notice the runtime this is required because automatic is not default in @babel/preset-react yet in v7.x.x but will be in v8.x.x

Setting up the script

Edit your package.json and add a start and build scripts

Creating our brand new application with React v17 😎

Create an index.html that will be used by html-webpack-plugin so that we don’t need to manage how to load our assets

Loading our react application

Our first React component

Notice that we didn’t need to import react. Thats one of the changes in v17.x.x

Here we go, perform npm start and serve your assets.

P.s If you want to know how to serve the build assets during development see Part II

Conclusion

Congrats !!! 👏🏻 . I believe development setup should be as simple as possible. There is no point of making things complex specifically this year with the world fighting a pandemic. Keep safe and keep on coding.