React Webpack Setup From Scratch
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/react-webpack
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: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/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 create-react-app 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
Видео React Webpack Setup From Scratch канала Code With Bubb
Completed code on GitHub: https://github.com/codebubb/react-webpack
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: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/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 create-react-app 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
Видео React Webpack Setup From Scratch канала Code With Bubb
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
DevTips Daily: Adding optional properties to TypeScript typesNodeJS Essentials 10: Handling ErrorsHow to set the language for text in HTMLDevTips Daily - Rick and Roll Project - Creating a responsive viewDevTips Daily: Building projects for production with Parcel.jsJavaScript RegEx Exercises 01DevTips Daily: The JavaScript forEach array methodDevTips Daily: The JavaScript map array methodThe Google Developer Scholarship #04 - Lesson 2DevTips Daily: Taking a full-page screenshot in ChromeDevTips Daily: The HTML Range Input Type3 Ways To Get An Element's Class With JavaScriptDevTips Daily - Rick and Roll Project - Running apps with PM2DevTips Daily: How to use the import and export keywords in TypeScript modulesDevTips Daily: Using the JavaScript logical or operator to provide default valuesDevTips Daily: How to setup and use Netlify FunctionsHow to add a new user on a Linux server (with SSH access)DevTips Daily: Edabit JavaScript coding challenge - Calculate PowerFront-end Project: Creating an off-screen navigation menuHow To Create A Filterable List With JavaScriptReact Project: YouTube Video Viewer