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

Подписаться 28 тыс.

Просмотров 17 тыс.

50% 1

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-rea... 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...
- What is Server-Side Rendering (and Why Create React App doesn't support it) • What is Server-Side Re...
Exercises Database App on CodeSandbox codesandbox.io...
Babel 7 is Out! babeljs.io/blo...
Configuring Babel babeljs.io/doc...
@babel/preset-env can target specific browsers 2ality.com/2017...
"last 2 versions" considered harmful by Jamie K jamie.build/la...
Get in touch with me on Minds www.minds.com/...

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 40

@JoaoFerreira-ni8jy 6 лет назад

This tutorial is so good, you have so much knowledge. Gonna try to implement this in one of my projects thank you!

@indrasusila9749 5 лет назад

great tutorial & clear explanation, can't wait for Webpack costum config for SSR use express

@frostyghostman6430 5 лет назад

Subscribed. Excellent content mate. Refreshing to see someone actually take the time to explain the how and why, as opposed to sending viewers off on a wild "just go check the docs" goosehunt.

@victorighalo 6 лет назад

Super and Excellent. Just exactly what I was looking for. You gave all the information I need. Thanks, keep up the work.

@sweetfigs1 4 года назад

Great tutorial, simple and to the point.

@aadams99 5 лет назад

Amazing presenter, you cover all the details most do not! Please cover how to setup Apollo Express GraphQL server, along with subscriptions and consuming them in React + Redux + Saga! Also, if you have continue with content this good, please provide your patreon account so I can pay you! Keep up the good work!

@dvcorreia96 6 лет назад

Amazing vídeo :)

@mjabadilla 5 лет назад

You have basically saved me a lot of time researching and understanding the complexities of react/webpack/babel. Awesome explanation. Hope to find more content like this!

@catlord69 2 года назад

no joke this would take me a few days to get up and running all by myself

@maxiequa567 5 лет назад

Awesome content! Have you successfully proxied to an Express app with this build? Doesn't seem to want to play with fetch() for some reason?

@CodeRealm 5 лет назад

Proxying as in getting around CORS? Or setting up SSR? With this particular app, I had no issues server-side. I even posted a video on SSR in MUI with Express ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gpGoxdVspx4.html What's your issue with fetch though?

@playforada97 5 лет назад

hi.. great video .. trying to setup but got error -unexpected token you may need an appropriate loader to handle this file type

@CodeRealm 5 лет назад

Sounds like you're missing babel-loader, or the webpack configuration is incorrect

@neosarchizo 6 лет назад

Thanks for good video!! But I think 'create-react-app' will be easier to use. Which one do you recommend? 'create-react-app' or without it?

@CodeRealm 6 лет назад

Depends what it's for. CRA is good for a toy or demo app, and it's definitely easier to use, but I found that it produces heavy bundles, at least with Material UI. Maybe it's because they're still using Webpack 3. Either way, I wouldn't use it for an actual site myself. But that's just me; I prefer to be in control and know what's happening behind the scenes.

@chuanxie 5 лет назад

Hi , where is the video after this one? thanks

@CodeRealm 5 лет назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gpGoxdVspx4.html

@tofuman9526 5 лет назад

Hello, thank you for this informative video.. does this setup transpile a jsx files

@CodeRealm 5 лет назад

I believe webpack has built-in support for .jsx files, yes. So long as you configure babel-loader, they will be transpiled.

@tofuman9526 5 лет назад

@@CodeRealm unfortunately, I had to explicitly tell webpack to transpile .jsx files, I use babel loader8 I think, webpack 4...

@mohamedgharbi845 5 лет назад

think you this tutorial help me a lout

@daniellaerachannel 6 лет назад

excellent!

@insaneviruss 6 лет назад

Amazing tutorial! Thanks for using all the latest babel, webpack stuff and talking about all options in depth!

@NotFound-hy7qb 4 года назад

Can we use next.js ?

@LifestylePro201 5 лет назад

not working error found webpack-dev-server --open --port 4000 -compress --mode development internal/validators.js:125 throw new ERR_INVALID_ARG_TYPE(name, 'string', value);

@andriiauziak1178 6 лет назад

Thank you Alex, for doing such videos about webpack, babel and react-router. And that thing with "plugins": ["@babel/proposal-class-properties"] was useful and important for me

@lalumierehuguenote 4 года назад

What to do now that polyfill is deprecated?

@CodeRealm 4 года назад

They recommend using core-js directly instead. See github.com/zloirock/core-js#babel

@exactzero 4 года назад

Great tutorial! Very detailed. Thanks for explaining the purpose of each package.

@ITaLiaNsCliP 5 лет назад

Very clear and complete explanation. You gave a reason to every single thing you did. Well done!

@yilliot 6 лет назад

great help thanks. just in need

@govindkarthikeyan 4 года назад

Wah, amazing content, keep up the great work.

@sheryarshirazi2799 5 лет назад

Lot of information in single video.

@AbhishekKumar-mq1tt 6 лет назад

Thank u for this awesome video

@mariobross4658 5 лет назад

Pretty awesome! As usual, thank you!

@pratikkumar939 5 лет назад

very very informative

@akshaypradhan2498 4 года назад

how can i use the bundled js file in react jsx?

@CodeRealm 4 года назад

Not sure I understand. JS bundle is an asset that you deploy to production. JSX is just sugar for React.createElement and is only used for development.