Deconstructing Create-React-App with Webpack 4 & Babel 7
In the last video, we talked about server-side vs. client-side rendering, and concluded that create-react-app is best suited for SPAs, or single-page apps. Though you can work around server rendering in CRA without ejecting / upgrading-a-create-react-app-project-to-a-... you still have to tackle the tradeoffs of an automagic zero-configuration 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 bleeding-edge 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 front-end 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 cutting-edge 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 create-react-app to a custom production-ready build setup in just under 30 min. We will use the power of built-in 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 re-visit these videos first:
- React App with Webpack & Babel (ES6+, source maps, hot reload, and more) • React App with Webpack & Babel (ES6+,...
- What is Server-Side Rendering (and Why Create React App doesn't support it) • What is Server-Side 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/preset-env can target specific browsers http://2ality.com/2017/02/babel-prese...
"last 2 versions" considered harmful by Jamie K https://jamie.build/last-2-versions
Get in touch with me on Minds https://www.minds.com/CodeRealm
Смотрите видео Deconstructing Create-React-App with Webpack 4 & Babel 7 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Code Realm 02 Сентябрь 2018, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 17,49 раз и оно понравилось 49 людям.