React App with Webpack & Babel (ES6+, source maps, hot reload, and more)
In this tutorial, we will set up a React project from the ground up using popular tooling including Webpack and Babel. By the end of this video, you will understand the basic inner workings of boilerplate libraries such as create-react-app, and will learn to scaffold a development environment for your own apps.
If you are brand new to modern front-end development and have only ever worked with script tags in HTML templates, then I strongly encourage you to read "Modern JavaScript Explained For Dinosaurs" / modern-javascript-explained-for-dinosaurs
For a beginner-friendly introduction to Webpack 4, I recommend "Webpack 4 Tutorial: from 0 Conf to Production Mode" https://www.valentinog.com/blog/webpa...
Note that I decided to go with Babel 6, since v7 is still in beta; in fact, they just authored a breaking change in 7.0.0-beta.52 the other day!
What does Stage 2 mean? And what is TC39? Read this http://2ality.com/2015/11/tc39-proces...
JavaScript modules with Webpack https://medium.freecodecamp.org/javas...
What's new in Webpack 4 (February, 2018) / webpack-4-released-today
FAQ
Why do we need a module bundler like Webpack?
Because some people still use older browsers that don't support ES6 modules (e.g. IE11), and because HTTP/2 is yet to fully replace HTTP 1.1.
Why do we need a transpiler like Babel?
For cross-browser support, because older browsers don't support ES6+ features natively.
Why do we need a source map?
Because it's very hard to debug minified, uglified, and transpiled code. To fix a bug in production, you need to trace it back to its original source.
Why not create-react-app?
If you need to change a small setting, are you comfortable ejecting and sifting through its 100s LOC config? It's worthwhile to bootstrap the workspace yourself so you can tailor it towards your app.
TODO
In a future video, I could cover polyfills, linting, testing, code coverage, and version control. Topic requests are welcome. Thanks!
Watch video React App with Webpack & Babel (ES6+, source maps, hot reload, and more) online without registration, duration hours minute second in high quality. This video was added by user Code Realm 05 August 2018, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,18 once and liked it 17 people.