Grow your YouTube views, likes and subscribers for free
Get Free YouTube Subscribers, Views and Likes

Deconstructing Create-React-App with Webpack 4 u0026 Babel 7

Follow
Code Realm

In the last video, we talked about serverside vs. clientside rendering, and concluded that createreactapp is best suited for SPAs, or singlepage apps. Though you can work around server rendering in CRA without ejecting   / upgradingacreatereactappprojecttoa...   you still have to tackle the tradeoffs of an automagic zeroconfiguration setup.

There comes a day when your curiosity takes over, and you decide to explore the mysterious inner workings of Facebook's toolkit. Perhaps you need to tweak the Webpack config, pull in a missing polyfill, or enable support for a bleedingedge ESNext feature. The confines of CRA render themselves too restrictive, so you make a bold decision to eject... To only discover 100s LOC of config and scripts that can overwhelm at first sight.

There is tremendous value in learning the frontend tooling, since you can take that knowledge with you when you move on from React to Angular or Vue. If you want to learn how to scaffold a boilerplate project from ground up using cuttingedge tools like Webpack 4 and Babel 7, then this video is for you.

We will pick up right where we left off with SSR, and go away from createreactapp to a custom productionready build setup in just under 30 min. We will use the power of builtin sensible defaults in Webpack 4, and the browser targeting capabilities in Babel 7. I will also touch on polyfilling and code splitting in the second half. The resulting project will be a more configurable, upgradable, and extensible workspace with a dev server, hot reload, and optimized build.

I strongly recommend that you go over or revisit these videos first:

React App with Webpack & Babel (ES6+, source maps, hot reload, and more)    • React App with Webpack & Babel (ES6+,...  
What is ServerSide Rendering (and Why Create React App doesn't support it)    • What is ServerSide Rendering (and Wh...  

Exercises Database App on CodeSandbox https://codesandbox.io/s/qq4oz0ym69

Babel 7 is Out! https://babeljs.io/blog/2018/08/27/7.0.0

Configuring Babel https://babeljs.io/docs/en/configuration

@babel/presetenv can target specific browsers http://2ality.com/2017/02/babelprese...

"last 2 versions" considered harmful by Jamie K https://jamie.build/last2versions

Get in touch with me on Minds https://www.minds.com/CodeRealm

posted by CydayCitambumyy