React TypeScript Webpack - Setup From Scratch (1/8)

[@Codevolution]

Give Taskade a try - www.taskade.com/ Request for 1 year free upgrade by mentioning Codevolution - www.taskade.com/contact

[@marcusmelodious277]

Vishwas, you've done thousands of React developers all over one of the biggest favors in the world. You are the BEST mate!! Absolute best.

[@jairovera8065]

This is the GOD Tier React/Webpack/TypeScript tutorial!

[@abcdefgboom1]

Believe me, this is the best tutorial on KZbin on this topic to me....

[@rorycawley8334]

This is the best series of videos on setting up your TS/React coding env - thanks for going to the trouble to get some much detail, the quality of this is so high. Well done!

[@nelsonfleig5024]

Just what I was looking for. Some job interviews ask about using Webpack to set up React and I've been spoiled with CRA, React Vite, and Nextjs so I never took the time to set up everything from scratch. Thank you so much!!

[@MessiLeonelle]

Well, it's exactly what i needed. You helping me with redux tutorial first and now you helping me with WP, thank you man.

[@akashddeepchitransh4537]

Never though that creating React project from scratch would be that much fun. Thanks Vishwas 😃😃

[@anastaleb3617]

You're killing it man 💪 you have the best react content in the KZbin Keep going

[@xiaotingshao3689]

really good video for the juniors, thank you so much, Vishwas. You really understand what we need to expand our knowledge and skills. 🥰

[@rohithsatyanivas4006]

This is pure gold ⭐! Great content man! Thanks a lot!

[@jgv4945]

Yeah! Have been waiting for this. Thanks you!

[@IrvingWash]

Thank you very much, I was looking for something like this for months

[@ypucandeleteit]

thank you for making this and explaining what the different config properties are for. Webpack has been causing me a lot of pain and this video is the remedy

[@saitanush9453]

Tq bro, you're a saviour for React developers

[@todorg.6868]

You are amazing Vishvas. Thank you for this amazing videos!

[@GauravJoshi-Vlogs]

Eagerly waiting for this series and finally we have it... Thnx!!

[@aaronortiz1366]

Great video! I have a doubt: Why in github files the webpack.config.js is different in video? Github file is shorter, and if I copy-paste all webpack files inside the directory the terminal returns Cannot find module './webpack.undefined.js' error. That doesn't happen if I write the content of webpack.common.js inside webpack.config.js. Thanks for answering and again, great videos!

[@bltom6806]

He refactored his code. You can copy the 4 webpack config files (now splited) as it. You need now to precise your environment, so in `package.json`, specify the `env`: "start": "webpack serve --config webpack/webpack.config.js --env env=dev --open", Also add few packages: yarn add -D @babel/plugin-transform-runtime @pmmmwh/react-refresh-webpack-plugin react-refresh `yarn start` And All good! If at start it asks for missing package, just add it. Next lesson he'll explain that.

[@easyfinanceexplained]

Hey, You're doing great work. The way you understand every topic made me feel that you have a deep understanding of the relevant topic. Thanks again, man.......... Best of luck.

[@parasbuda9174]

thank alot for this series hope in future next js will also come

[@compeng2013]

Max released an epic course recently

[@tikeswarnaik827]

@@compeng2013 Can you share the link?

[@Dipenparmar12]

Hi, I just wanted to tell you this Setup/Config series is great enjoyable. Thanks for such an great tutorials.

[@idevbrandon]

Wow.. thank you so much. 3 things required to be FE developer here are React/TypeScript and Webpack knowledge

[@xMoSicc]

Thanks for working stuff. Lot of ppl write blogs and make so many errors. U dont! thanks a lot. I was getting crazy cuz of a lil mistake

[@grandmaster-yo-yo]

Best tutorial! Thank you so much!

[@sheikhmuhammedshoaib1124]

Thanks for this series

[@a2m2tkyo]

why is the webpack.config.js file different in the video than the one in the repo? Which is the correct one to utilize for this portion of the guide?

[@bassam.2023]

Another brilliant tutorial! Unfortunately, hard to follow along in Oct 2022, but that is always the case with web dev related stuff. Thanks though!!

[@Taskade]

Awesome video! Thanks for putting this together. 🙌

[@DIYcollection]

Absolutely great tutorial! Thank you very much!

[@chazontour8588]

Great series. I notice the link to the repo containing supporting files isn't available in the description as you said.

[@Codevolution]

Here you go - github.com/gopinav/React-TypeScript-Webpack-Starter

[@amirovuz]

Awesome! thank you Mr Wishwas.

[@grandmaster-yo-yo]

Brother what is your color theme in vs code? I like it so much

[@kollabor8]

Warning: This is outdated, but still well worth watching, make sure you keep updated with the technology, I'm writing this as there have been many changes in the stack

[@mohdnawazishalam3255]

Thanks a lot for creating this course

[@carlosayalav]

Amazing !! im just about to initialize a project in Typescript with React and Microfront Architecture with webpack federated modules. Thank you so much !!

[@МаксимПирожков-ы3т]

Thank you soo much for this video!!!

[@THEGhost902]

Why do you use babel instead of ts-loader?

[@evangeloskolimitras5276]

Are you sure this tsconfig setup is proper for browser compatibility?

[@chandramabishi4779]

please make a video on server side rendering SSR

[@rishabhsharma6084]

Sorrry Vishwas, but when my server runs it shows the directory of the project instead of rendering App.tsx ... what should I do? 😣

[@debarghyachakraborty]

npm install @babel/plugin-transform-runtime -D

[@plamenyovchev]

Why not simply use create react app typescript template?

[@nargesa.n756]

Thank you. Please note that at the time I am writing this comment we need to add '@babel/plugin-transform-runtime' as well.

[@sameeramrutia18]

Vishvas Bro...! you are just too good. The teaching methodology is amazing.. keep it up.. & Big thank you for this series. i would like to know more about Webpack 5 chunk splitting functionalities and mono repo. if you can add 2-3 more session to same..? Thanks a ton..! god bless you.

[@AshutoshSharma-ml6sv]

Why these are added as devDependancy: typescript @types/react @types/react-dom ?

[@sairarasheed3411]

after making app.tsx file in source folder i get the error "Cannot use JSX unless the '--jsx' flag is provided" can you resolve it??

[@Pspisripoff]

Somehow proxy doesnt work with this webpack setup...

[@VaibhavMane604]

Please make one video on Vite + react + TS setup

[@MrDima123123]

Hello. Thank you for awesome tutorial! But I found some problem. If I make a mistake with Typescript code, then build will be created successfully. Also "npm start" will be executed successfully too. Something like: let a = 90 a += 'dfdfdf' It is possible to prevent building process or starting app if typescript errors exists ?

[@MrDima123123]

@Ayomide Bamigboye thank you for your advice

[@soumyapriyadarshi3833]

help :)) I am getting error like this. Please help Failed to load 'D:\Documents eact-ts-nextjs\webpack\webpack' config Error: Cannot find module 'D:\Documents eact-ts-nextjs\webpack.config.js'

[@chandramabishi4779]

what about bundle.js file

[@galony3151]

:( I need Help!! When i try run the code, this return that : Content security police: The page option has been blocked

[@lunaeclipse5768]

this is wat hppens when u follow along tutorial

[@vaibhavmatere18]

.babelrc is automatically created and we don't need to create it separately now.

[@joecolas]

very good tuto . thank you

[@romimaximus]

I wish you could make a video tutotrial like this react/webpack setup, but with no "Typescript" 👍

[@PumpkinDog33]

typescript starts out feeling annoying/constricting but eventually you'll hate using regular javascript because everything feels so unkept and naked.

[@romimaximus]

@@PumpkinDog33 i think is a pain.!! , very confusing and complicated.!!, every time you create a variable, a function , a object, or even passig a "prop", you have to remember to creater a "interface", and a bunch of oher stuff....and the you have to complie back to javascript !!, its like walking backwards..and at end, it all comes down to plain compiled javascript !!! it doesn't makes sense..!! 😂😂😂

[@dinesh8112]

Dude, you are the best. Is it possible for you to make a course on redux forms please?

[@abhaykumar9806]

Unable to contribute on your support link - paypal. Please let me know,

[@Nikhilsharma-dp9tw]

Hey @codevolution, why there isn't much discussion on react typescript in the community, even most of the projects on git are using pure js. is there some reason ? I'm from angular background, so I'm conscious on types

[@madhousenetwork]

not sure about that. But I'm working in react projects since 1 and half years. we use Typescript for react

[@harrisonekpobimi4764]

Superb

[@bottletyre]

After an edit of a text in App.tsx file why it is so slow in compilation to reflect in Browser? Can the compilation time be decreased ?

[@Codevolution]

Yes, I'll cover that in part 4 :)

[@shaita8704]

please create a playlist on react native

[@iUmerFarooq]

But why we need to do this we have already npm commands to generate the same template?

[@Viveksharma0157]

Yes that’s also i want to know why we need this What’s the difference between Plz reply @codevolution

[@jgv4945]

@@Viveksharma0157 He explains it right at the beginning in the introduction.

[@Nikhilsharma-dp9tw]

To understand what exactly is happening under the hood, with this you have full control of your project

[@kalesmca]

I want build file is like react-app-cli build

[@iUmerFarooq]

Will you tech Laravel?

[@reactivicky]

Awesome

[@m.ssmanianmanian1168]

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration has an unknown property 'plugin'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? } -> Options object as provided by the user. For typos: please correct them. For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /\.xxx$/, // may apply this only for some modules options: { plugin: … } }) ] please answer me, why should this error is coming... webpack version as bellow, "webpack": "^5.36.0", "webpack-cli": "^4.6.0", "webpack-dev-server": "^3.11.2" "html-webpack-plugin": "^5.3.1",

[@ynaveenkmr5943]

Hi Vishwas I like your all videos & all are awesome & all are real time examples only, please can you upload these with latest versions of react 18+ & typescript.

[@eleah2665]

"Short" series??!!

[@muhammadyusoffjamaluddin]

I dont know if you even rewatch your video when posted. Along this tutorial I have a hard time to follow whatever you wrote on the terminal. No, serious sir please pull that terminal curtain up. Thank you.

[@iUmerFarooq]

But why you're not using JavaScript instead of Typescript?

[@MohitKumar-so4yf]

Bhai jhappi dede

[@arcan762]

Why is this still such a pain in the ass??

[@rephaelsintes7275]

hi, Thank you for this course I have some problems at the end of the video Everything is working fine until the last command 'npm start' It display an error and I can't find answer on google PS C:\Users\USER\Documents\Courses\React & Webpack> npm start > react-template@1.0.0 start > webpack serve --config ./webpack/webpack.config.js --open 'Webpack ode_modules\.bin\' is not recognized as an internal or external command, operable program or batch file. node:internal/modules/cjs/loader:1085 throw err; ^ Error: Cannot find module 'C:\Users\USER\Documents\Courses\webpack\bin\webpack.js' at Module._resolveFilename (node:internal/modules/cjs/loader:1082:15) at Module._load (node:internal/modules/cjs/loader:928:27) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) at node:internal/main/run_main_module:23:47 { code: 'MODULE_NOT_FOUND', requireStack: [] } It some how try to find the webpack.js in a non existing path 'C:\Users\USER\Documents\Courses\webpack\bin\webpack.js'

[@aguspray]

you can generate your own tsconfig.json by typing : node_modules/.bin/tsc --init

[@batm1x]

It doesn't work in oct 2022. Module build failed (from ./node_modules/babel-loader/lib/index.js):

[@srinathvu1542]

Thank you so much for this series