In this tutorial, I’ll show you how to create a React Webpack setup from scratch, using Babel to load JS and JSX files as well as taking care of compiling Sass files.

Completed code on GitHub: https://github.com/codebubb/reactweb...

React Webpack Setup From Scratch

00:00 Introduction
00:37 Setup
04:46 React Webpack config (React, webpack, babel)
08:27 React Source files
13:17 Starting web pack
16:29 React Webpack production build
17:45 Optimisations / Plugins
20:28 Conclusion


— Follow Me —
Twitter:   / codebubb  
Facebook:   / juniordevelopercentral  
Blog: https://www.juniordevelopercentral.com/
— Thanks! —


So in this React Webpack setup tutorial, we’ll be creating a simple React component and demonstrating how this could be rendered in the browser by compiling all of the React and Sass code into a bundle that can be easily used in the browser.


You can obviously setup a React very quickly with other tools but an alternative to createreactapp and similar is to create your own configuration for React Webpack from scratch.


I’ll cover all the dependencies that are necessary to do this in the project and also we’ll look at how to create a React web pack production build so that you have production ready files that you could distribute to your hosting provider.


I will also cover how to have a React web pack SCSS configuration setup to handle you Sass files.


Before wrapping up, I’ll show you how you can add your own plugins and optimisations to your React webpack setup using plugins.




react webpack, react webpack babel 2020, react webpack production build, react webpack setup from scratch, react webpack code splitting, react webpack 2020, react webpack scss, react webpack from scratch, react webpack setup, react, webpack, tutorial, webpack tutorial Channel Handle @codebubb