No video

Django & React Tutorial #3 - React Integration Using Webpack & Babel

This django and react tutorial covers how to integrate react with django and perform all of the necessary setup steps. We will be using webpack and babel to bundle our react app and have the django backend render a template that react will control.
💻 AlgoExpert is the coding interview prep platform that I used to ace my Microsoft and Shopify interviews. Check it out and get a discount on the platform using the code "techwithtim" algoexpert.io/...
📋 Credit to this blog for most of these steps: www.valentinog...
📝 Series Code: github.com/tec...
📕 Node.js & NPM: www.npmjs.com/...
Code for Specific Files
babel.config.js: github.com/tec...
package.json: github.com/tec...\
webpack.config.json: github.com/tec...
⌨ NPM Setup Commands ⌨
npm init -y
npm i webpack webpack-cli --save-dev
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
npm i react react-dom --save-dev
npm install @material-ui/core
npm install @babel/plugin-proposal-class-properties
npm install react-router-dom
npm install @material-ui/icons
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
💰 Courses & Merch 💰
💻 The Fundamentals of Programming w/ Python: tech-with-tim....
👕 Merchandise: teespring.com/...
🔗 Social Medias 🔗
📸 Instagram: / tech_with_tim
📱 Twitter: / techwithtimm
⭐ Discord: / discord
📝 LinkedIn: / tim-ruscica-82631b179
🌎 Website: techwithtim.net
📂 GitHub: github.com/tec...
🔊 Podcast: anchor.fm/tech...
🎬 My KZread Gear 🎬
🎥 Main Camera (EOS Canon 90D): amzn.to/3cY23y9
🎥 Secondary Camera (Panasonic Lumix G7): amzn.to/3fl2iEV
📹 Main Lens (EFS 24mm f/2.8): amzn.to/2Yuol5r
🕹 Tripod: amzn.to/3hpSprv
🎤 Main Microphone (Rode NT1): amzn.to/2HrZxXc
🎤 Secondary Microphone (Synco Wireless Lapel System): amzn.to/3e07Swl
🎤 Third Microphone (Rode NTG4+): amzn.to/3oi0v8Z
☀️ Lights: amzn.to/2ApeiXr
⌨ Keyboard (Daskeyboard 4Q): amzn.to/2YpN5vm
🖱 Mouse (Logitech MX Master): amzn.to/2HsmRDN
📸 Webcam (Logitech 1080p Pro): amzn.to/2B2IXcQ
📢 Speaker (Beats Pill): amzn.to/2XYc5ef
🎧 Headphones (Bose Quiet Comfort 35): amzn.to/2MWbl3e
🌞 Lamp (BenQ E-reading Lamp): amzn.to/3e0UCr8
🌞 Secondary Lamp (BenQ Screenbar Plus): amzn.to/30Dtafi
💻 Monitor (BenQ EX2780Q): amzn.to/2HsmUPZ
💻 Monitor (LG Ultrawide 34WN750): amzn.to/3dSD7tS
🎙 Mic Boom Arm (Rode PSA 1): amzn.to/30EZw9m
🎚 Audio Interface (Focusrite Scarlet 4i4): amzn.to/2TjXsih
💸 Donations 💸
💵 One-Time Donations: www.paypal.com...
💰 Patreon: / techwithtim
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
⭐️ Tags ⭐️
- Tech With Tim
- React and Django
- Django and React
- Wepback and Babel
- React Webpack and Babel
- React and Django Setup
- Django and React Integration
- Webpack django
- Webpack react
- Babel React
⭐️ Hashtags ⭐️
#Django #React #JavaScript

Пікірлер: 585

  • @TechWithTim
    @TechWithTim3 жыл бұрын

    Quick note: There is easier and different ways to setup react that can be used here. I wanted to show you the from scratch setup so that you have the most amount of information possible about what is going on here! Hopefully you appreciate that and are looking forward to the rest of the videos in this series :)

  • @kropaize

    @kropaize

    3 жыл бұрын

    Show easier way, please.

  • @jasonschannel

    @jasonschannel

    3 жыл бұрын

    Loved it Tim. Everything ran without issue! 🙏🙏

  • @migueldomingos4570

    @migueldomingos4570

    3 жыл бұрын

    @@kropaize if you have node installed you can run npx create-react-app [type react app name]

  • @TechWithTim

    @TechWithTim

    3 жыл бұрын

    Oh and one more note. I see some comments on the class based components vs functional. I am not a front end web developer and hence don't have a strong opinion on which should be used. From some light research it seems as though functional components are recommended. In this series we do use CLASS based components. As most of the videos are already filmed it will be hard to reverse this decision but I will make a video discussing how to translate them to functional near the end of the series. Regardless class based components are still a part of react and their what was used solely in the microsoft code base I worked in. Just to make clear I am not recommending class based components it's just what I happened to use, I should have done more research before making that decision!

  • @migueldomingos4570

    @migueldomingos4570

    3 жыл бұрын

    @@TechWithTimJust want to point out that while class components will probably never deprecated newer features will predominantly added to functional components and with hooks they are a lot more powerfull

  • @dembashow
    @dembashow2 жыл бұрын

    If you get the following error: Conflicting values for 'process.env.NODE_ENV' Replace "production" with "development" in the following snippet of the webpack.config: plugins: [ new webpack.DefinePlugin({ "process.env": { // This has effect on the react lib size NODE_ENV: JSON.stringify("development"), }, }), ]

  • @veneneify

    @veneneify

    2 жыл бұрын

    try replacing NODE_ENV: JSON.stringify("development") with 'process.env.NODE_ENV' : JSON.stringify('production')

  • @Dancesonfire00

    @Dancesonfire00

    2 жыл бұрын

    Hey, I know I'm a month late, but I ended up fixing the error for "Conflicting values" but now my compiler hangs after being successful. Do you know why this is so?

  • @pilote111

    @pilote111

    2 жыл бұрын

    Thank you 😄

  • @jonathanwebber2041

    @jonathanwebber2041

    2 жыл бұрын

    @@Dancesonfire00 Same here. Ever figure out this hanging issue and not starting the server?

  • @Dancesonfire00

    @Dancesonfire00

    2 жыл бұрын

    @@jonathanwebber2041 So I realized that I didn’t actually have a problem with the process hanging, it’s meant to hang and you just look for the file in the directory he mentioned. I can’t remember what I did to resolve the issues because I ran into like 3 problems after and realized there’s some sort of compatibility issue with my environment and the project so I kind of just dropped the project. I’m sorry man

  • @mkalanithi8747
    @mkalanithi87473 жыл бұрын

    15:00; Guys, instead of typing that much; if you see in the right-bottom corner; if it is written "Django HTML", change it to "HTML" by clicking it and selecting this... then simply type "doc" in the editor and press RETURN or TAB, and watch the magic. Make sure that it is an "Emmet Abbreviation".

  • @symbolminded5167

    @symbolminded5167

    3 жыл бұрын

    Or ! and TAB or RETURN

  • @ireshkalki

    @ireshkalki

    3 жыл бұрын

    you are a genius bro. thanks for information

  • @marcoagostinello9735

    @marcoagostinello9735

    5 ай бұрын

    love u

  • @SamuelGuebo
    @SamuelGuebo3 жыл бұрын

    No need to apologize. You did a great work breaking it down and going from scratch. I appreciate the efforts you've put into this!

  • @miguelcoding3568
    @miguelcoding35682 жыл бұрын

    Thank you Tim for your stuff, is so good. I have a problem with the install of material-ui, it has changed the name to mui, I have installed with: npm install @mui/material npm install @mui/icons-material

  • @latabakaa2911

    @latabakaa2911

    2 жыл бұрын

    thank you so much! i could not install it, you saved me :D

  • @sitaramsatwik331

    @sitaramsatwik331

    2 жыл бұрын

    since most these packages are outta date try adding --legacy-peer-deps and should solve

  • @danielros7798

    @danielros7798

    2 жыл бұрын

    Thank you so much!

  • @kishorel.9411

    @kishorel.9411

    Жыл бұрын

    I used npm install --legacy-peer-deps to resolve the dependency errors. It is installed, will see if I get any other error.

  • @narendrasudrik7763

    @narendrasudrik7763

    2 ай бұрын

    Many thanks ! saved me a lot. 👍

  • @ThisIsAli_Off
    @ThisIsAli_Off3 жыл бұрын

    For anyone who can't run the 'npm run dev' command, be sure to cd (change actual directory of the terminal) to your frontend before using the command, or it won't find the package.json file

  • @zahid8566

    @zahid8566

    3 жыл бұрын

    thanks a lot!

  • @twinklechatterjee5139

    @twinklechatterjee5139

    3 жыл бұрын

    You saved me from getting mad for real :)

  • @s.spambot9095

    @s.spambot9095

    2 жыл бұрын

    King

  • @erikadeveckova6580

    @erikadeveckova6580

    Жыл бұрын

    and install node JS of course

  • @kagam1nonly

    @kagam1nonly

    8 ай бұрын

    > backend@1.0.0 dev > webpack --node development --watch [webpack-cli] Invalid value 'true' for the '--node' option [webpack-cli] Expected: 'false' Mine didn't work edit: > webpack --mode development --watch (just a typo)

  • @naiadbaksh3996
    @naiadbaksh39963 жыл бұрын

    Tough set up but Im sure it'll be worth it. It'd be awesome if you could make a video going over why it needs to be set up this way / how data flows so we could understand better how to build our own React / Python apps.

  • @naiadbaksh3996

    @naiadbaksh3996

    2 жыл бұрын

    Update: used this tutorial to build a great app that allows you to listen to podcasts with friends. Anyone know how to deploy this? I’d love to share with you all.

  • @ismailaskhatir6708

    @ismailaskhatir6708

    Жыл бұрын

    @@naiadbaksh3996 Great idea Naiad!

  • @andronickmartusheff4036
    @andronickmartusheff40363 жыл бұрын

    to anyone who has trouble with installing material UI, react 17 (which you may have installed) doesn't support material ui. I had to use the following command to make it work . same goes with material ui icons npm install --save --legacy-peer-deps @material-ui/core

  • @yuvalnoyman1660

    @yuvalnoyman1660

    3 жыл бұрын

    thank you !

  • @chantindy2090

    @chantindy2090

    2 жыл бұрын

    thank you!

  • @andrewm3674

    @andrewm3674

    2 жыл бұрын

    Thanks!

  • @sowmyak7094

    @sowmyak7094

    7 ай бұрын

    ur a god

  • @KUSHALLOYA

    @KUSHALLOYA

    2 ай бұрын

    Thank you so much…..adding to this “-legacy-peer-deps” also resolves react-router error

  • @zechariahbryan1568
    @zechariahbryan15683 жыл бұрын

    14:40 you can also change the language from django-html to html in the bottom right corner of vscode and then type html:5 and hit tab. That autofills the basic html template and then you can fill in the rest

  • @LordTails
    @LordTails3 жыл бұрын

    Word of warning to people with this: if you have issue relating to collecting static make sure you check where you do {% load static %} in index.html. Took me longer than I care to admit that I accidentally used instead. If you have other issues with it, know this is related to django and not react. Also great video Tim! I'm trying to reformat my website and this has helped a lot since I already built it on Django and wanted to use React while not giving up the luxuries coming with Django.

  • @MrValVet
    @MrValVet10 ай бұрын

    Two years after posting this tutorial is still great! Thanks Tim!

  • @zaynmalice7106

    @zaynmalice7106

    2 ай бұрын

    Is it? I feel like all the React stuff is totally deprecated. That's not Tim's fault ofc, but I couldn't get it to actually render my component

  • @kelvinquinonez8808
    @kelvinquinonez88083 жыл бұрын

    It's really interesting how the amount of views goes down as the series goes down. It has nothing to do with the quality of the videos. I am just wondering if it is because people just get bored, or this is over their head, or maybe some people already know how to do this, or some people think this isn't for them. Just curious. Either way I'm loving this series and I am learning alot. Thanks for the quality tutorial Tim!!

  • @faisalrehman8175

    @faisalrehman8175

    3 жыл бұрын

    I would say that if you are beginner,you are just wasting your time here as it is not beginner friendly

  • @ahmedyasser8416

    @ahmedyasser8416

    3 жыл бұрын

    same wondering , specially while I'm having a lot of problems trying to figure out how to make it work, i've been setting for almost 10 hours now and still in this third video without any out put in my html page, but i'm still here

  • @FakeAssHandsomeMcGee_

    @FakeAssHandsomeMcGee_

    3 жыл бұрын

    That is what I am thinking but in general KZread videos in a series usually show this trend as well. Even TraversyMedia said that he likes to do one big video on a subject instead of many as views tend to go down per video.

  • @Raleford

    @Raleford

    3 жыл бұрын

    I find for myself, watching things like this, after I get a ways into it, I start thinking of what I learned and how to apply it and get distracted on working on the project or finding more specific information about something that caught my eye. I did that when first learning Python through tutorials. The downside is I missed (and am still probably missing) some of the valuable core understanding that I missed by not sticking it out to the end of the lessons. Later when I finally learn it, I often go "Oooh. That would've been much easier than what I did..."

  • @spqri3

    @spqri3

    3 жыл бұрын

    @@foreversleepy4379 Getting complex things to function is complex by definition. You'd rather not understand anything about programming and be 100% ignorant as compared to just 50% ignorant etc?

  • @dan0_0nad76
    @dan0_0nad763 жыл бұрын

    This was a real nuisance, but totally worth it, keep it up Tim!

  • @Diablerick
    @Diablerick2 жыл бұрын

    Dude!! This is the most complete tutorial I have seen about Django-React. Good job and thanks for the explanations

  • @TechWithTim

    @TechWithTim

    2 жыл бұрын

    You're very welcome!

  • @emmanuelstech
    @emmanuelstech2 ай бұрын

    I am successfully following through with this tutorial in June 2024. Many thanks to the Tech with Tim team.

  • @rcodp
    @rcodp2 жыл бұрын

    I loved this tutorial, I usually use Express and it's boring, using python for the backend it's fun. After 2 years this tutorial is still relevant. Excellent one, thanks, Tim!

  • @Dhruvrocks700

    @Dhruvrocks700

    Жыл бұрын

    any resource to find my error?

  • @cristobaljvp
    @cristobaljvp3 жыл бұрын

    You got so quickly to this. It took me some weeks to really understand how the Django - React integration worked when I was learning just Django but following this course looks so easy lol Really liking the videos man

  • @StevenLightning
    @StevenLightning3 жыл бұрын

    Small note, in the description it says "webpack.config.json" which should be "webpack.config.js".

  • @minihohtis5906

    @minihohtis5906

    2 жыл бұрын

    THANK YOU! I was looking why this failed for hours. To Tim: Very nice tutorial so far, but you should fix this in the description. I am gratefull for tutorial though. Dont hate me :(

  • @pravarsharma
    @pravarsharma3 жыл бұрын

    Wonderfully explained, pls make the react component function based insted of class that would be more helpful. Thanks again👍🏻🙏

  • @TechWithTim

    @TechWithTim

    3 жыл бұрын

    Just gonna paste the comment that is in the pinned comment thread: "Oh and one more note. I see some comments on the class based components vs functional. I am not a front end web developer and hence don't have a strong opinion on which should be used. From some light research it seems as though functional components are recommended. In this series we do use CLASS based components. As most of the videos are already filmed it will be hard to reverse this decision but I will make a video discussing how to translate them to functional near the end of the series. Regardless class based components are still a part of react and they're what was used solely in the microsoft code base I worked in. Just to make clear I am not recommending class based components it's just what I happened to use, I should have done more research before making that decision!"

  • @henrylecompte4533

    @henrylecompte4533

    3 жыл бұрын

    @@TechWithTim I don’t think the difference really matters, it is just a syntax difference.

  • @pravarsharma

    @pravarsharma

    3 жыл бұрын

    @@TechWithTim 🙏

  • @ayush.kumar.13907

    @ayush.kumar.13907

    3 жыл бұрын

    @@henrylecompte4533 functional components prevent code duplication and more linear style of writing programs and you can also use react hooks which make maintaining state and lifecycle management much easier.

  • @user-si9jy3zs1j

    @user-si9jy3zs1j

    2 жыл бұрын

    @@henrylecompte4533 year before the course is completely unstable and can't work with react 6. SO no, it's not just a syntax difference

  • @bensassiprogramming
    @bensassiprogramming3 жыл бұрын

    I would like to really thank you for all the efforts you put for the community , keep it up man , your awesome !! GOD bless U

  • @harir7676
    @harir7676 Жыл бұрын

    if you encounter error while installing npm install @material-ui/icons, do the below commands one by one npm config set legacy-peer-deps true npm i

  • @bigjoepro75
    @bigjoepro753 жыл бұрын

    Just spent about 20 minutes trying to find out why "Testing React Code" was not appearing in the browser. Turns out I typed const appDive instead of const appDiv....gotta love coding sometimes... On another note, seriously great series so far Tim! I was really interested in web apps using Django and your series has been a great introduction to this topic. Thanks for all the work you do!

  • @kamellaandbowserJr

    @kamellaandbowserJr

    Жыл бұрын

    I had the same issue, forgot to add the closing tag in the index.html file, hopefully this helps someone find their mistake lol

  • @haqimazhar2968
    @haqimazhar2968 Жыл бұрын

    guys im having trouble with the "Testing react code" prompt, I have set up everything accordingly but it was still not showing any ideas why ?

  • @usmanmir5663
    @usmanmir56633 жыл бұрын

    Daily uploads. Tim never disappoints 👍🏻. Keep up the great work

  • @MagicByIzzy
    @MagicByIzzy3 жыл бұрын

    In school now will watch asap thanks for the tutorial Tim!

  • @MagicByIzzy

    @MagicByIzzy

    3 жыл бұрын

    @FO Stofer lol do u know what mine means?

  • @MagicByIzzy

    @MagicByIzzy

    3 жыл бұрын

    @FO Stofer yeah same

  • @knbabu5473
    @knbabu54733 жыл бұрын

    Bro, no need to apologise, we all love you and rsspect the efforts you take to teach us nice things.

  • @Rodourmex
    @Rodourmex2 ай бұрын

    Great tutorial man, now 3 years have pass and material-ui/core needs to run with react 17 and react-dom 17 too. To install this react versions you should run this command npm i react@17.0.0 react-dom@17.0.0

  • @jasonschannel
    @jasonschannel3 жыл бұрын

    Yes! I look forward to this series every day!

  • @yashainu6047
    @yashainu6047 Жыл бұрын

    thanks a lot! as a backend developer often use java/spring tried multiple times to learn react but always end with confusion. you explain the details so clear and so logically that really very easy understand.

  • @deemo16
    @deemo162 жыл бұрын

    Just began messing around with React in Django, and so far this tutorial is AMAZING! Thanks for such great content.

  • @princezuko7073

    @princezuko7073

    Жыл бұрын

    I am also on the same track of Django and react. How is it going for you?

  • @deemo16

    @deemo16

    Жыл бұрын

    @@princezuko7073 Pretty good. React is powerful, but also all the dependencies (and the disorganization of so many libraries) can get a bit exhausting. All in all I think the pairing is worth the effort! Happy coding :-)

  • @princezuko7073

    @princezuko7073

    Жыл бұрын

    @@deemo16 Thanks for the insight Michael. Is it possible to have a chat with you on anywhere like discord? We could share our experiences.

  • @deemo16

    @deemo16

    Жыл бұрын

    @@princezuko7073 That would probably be helpful. I've been looking to get on discord and join some community discussions. I should sign up. From the time I did this tutorial, my studies have taken some crazy turns. I've been diving into Machine Learning lately, but can't wait to get back to React and tie it all together!

  • @theCataras
    @theCataras3 жыл бұрын

    Great Tutorial!! What is the advantage of creating the frontend app inside of django? I've seen other tutroials where they use React completely seperated. I'm a complete beginner and i wonder what the best practices are and why? Thanks! :)

  • @kin5605

    @kin5605

    3 жыл бұрын

    Django has built in Security features to stop attacks suchs as SQL injections, XSS and CSRF.

  • @SanjayKumar-xn2xm

    @SanjayKumar-xn2xm

    3 жыл бұрын

    @@kin5605 what it does not make any sense nerd you better keep quiet

  • @kavitharajni8962
    @kavitharajni89623 жыл бұрын

    Honestly Tim, You are one of the best youtuber in this genre.

  • @yuriyarin4027
    @yuriyarin40272 жыл бұрын

    9:12 🤣🤣🤣🤣 "if that means nothing to you, don't worry, just go along with what I'm doing, and all we're going to do is just paste this inside of here" -- every tutorial out there, thank god it keeps going

  • @dakota_dll
    @dakota_dll3 жыл бұрын

    bro i love your videos so much theres actually no way i’d learn this without you

  • @Yassinius
    @Yassinius2 жыл бұрын

    This is a really great tutorial. I usually wouldn't dare looking at webpack and babel but you did a good job of going through all the components. Really educative man!

  • @twidoh9128
    @twidoh912828 күн бұрын

    **Note for 2024 viewers** You may have to downgrade your version of react to install material-ui and other packages To do so do the following: in your terminal write "npm install react@17.0.0" and then navigate to the package.json file and change the version of react-dom to 17.0.0 if it is not already that Please leave any feedback if this helps :)

  • @bread16141

    @bread16141

    28 күн бұрын

    Thank you!

  • @sipandchipgolf
    @sipandchipgolf Жыл бұрын

    Can confirm this still works. There are a few things that need to be changed but some quick googles and you can probably figure it out. Would not recommend if you are new to programming tho

  • @LiveWelLounge
    @LiveWelLounge6 ай бұрын

    Tough setup leaving this video now

  • @entername2954
    @entername29543 жыл бұрын

    Thank you for this awesome series! Your tutorials are just the best

  • @someuser257
    @someuser2573 жыл бұрын

    Tim, I like your tutorials very much, however I understand that I wouldn't have written such code on my own. Since I don't wanna just rewrite what you are doing, how can I actually learn?

  • @mycul_

    @mycul_

    3 жыл бұрын

    I think the best thing to do here is learn through brute force. Build an app with Tim and once you have, try to manipulate it into something you want on your own with either info you've learned from other tuts or something you have created in your own mind. Hope you're getting along with it, good luck.

  • @cjsport1254

    @cjsport1254

    3 жыл бұрын

    Don't be afraid to copy what he is doing. How can you learn about something you've never done before. Just copy. Then copy again. Later it will make sense.

  • @alfie2591

    @alfie2591

    3 жыл бұрын

    change the variable names, that way it'll make you think about stuff differently on your end

  • @sadik2594

    @sadik2594

    3 жыл бұрын

    The best way to learn would be to follow his tutorial and do it one time and redo it without seeing the video.

  • @josephlee392

    @josephlee392

    3 жыл бұрын

    I’m no expert but the way I’m planning is by making comments along with copying what Tim writes. That way, I can understand what i’m actually copying. In addition, after each video, I will list the skills I gained from the tutorial. The idea is here to list the skills so that they’re generalizable to other apps I make in the future. The whole idea is to recognize patterns.

  • @peddabooster1
    @peddabooster13 жыл бұрын

    Great tutorial, had no problems following your explanations. Of course from the beginners perspective you're tiping waaay to fast but with a good setup and regular pause/play its not a problem. Huge compliment from me

  • @victoritodo7544
    @victoritodo7544 Жыл бұрын

    Hi Tim, thanks so much for this tutorial. It covers a whole lot about React and Django! Really helpful!

  • @dimashadziq6007
    @dimashadziq6007 Жыл бұрын

    well its certainly had some problem now, and since i dint really have experience using npm its takes me few hourse to solve the problem 1. @material-ui/core is now replaced by @mui/material 2. error on getting @babel/plugins-proposal-class-properties, i solve it by creating new babel config and disable the previous one, im using .js config and call plugin and preset on config by removing preset or plugin name on module, ie. i m using @babel/react instead @babel/preset-react 3. warning on running npm on dev mode, i solve it by canging "pruduction" to "development" on webpack.config.js plugin section

  • @hakor_

    @hakor_

    Жыл бұрын

    Thank you

  • @unknownman5296
    @unknownman52963 жыл бұрын

    Your videos are always very clear and easy to understand

  • @greyhat59
    @greyhat592 жыл бұрын

    instead of installing all that stuff run these commands: 1) npm install create-react-app 2) create-react-app [app_name] and thats it. for styling: 4) npm install tachyons

  • @DallasGraves
    @DallasGraves Жыл бұрын

    These tutorials are so fast for a beginner, I've never been so relieved to see/hear an add read, LOL

  • @efschannel3043
    @efschannel30432 жыл бұрын

    For everyone having troubles with 'npm run dev': 1. wrong dir (cd .\frontend) 2. module not found ( delete node_modules , package-lock.json + 'npm install' AND / OR move node_modules to required path - named in error, in my case outside project folder) 3. change NODE_ENV: JSON.stringify("production") to NODE_ENV: JSON.stringify("development") Worked in my case.

  • @amen652

    @amen652

    2 жыл бұрын

    How do I delete the node_modules? And where is the NODE_ENV line? Thank you!

  • @amen652

    @amen652

    2 жыл бұрын

    ignore all that ok so once i delete node_modules and package-lock.json, i just run npm install again right?

  • @efschannel3043

    @efschannel3043

    2 жыл бұрын

    @@amen652 yeah

  • @DylanOkyere

    @DylanOkyere

    2 жыл бұрын

    thanks for the help I changed production to development and it worked fine

  • @sabcam2000

    @sabcam2000

    2 жыл бұрын

    @@DylanOkyere It compiles but the webpage is not reachable

  • @sheezazainab1903
    @sheezazainab19033 жыл бұрын

    You just win our hearts by making video at this topic ❤️

  • @nickozb58
    @nickozb582 жыл бұрын

    @Tech With Tim You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

  • @jergussnahnican4112

    @jergussnahnican4112

    Жыл бұрын

    Did you fix it? If yes, How?

  • @deepam.g4558
    @deepam.g45583 жыл бұрын

    I understood nothing in #3. yet i am gonna watch it again

  • @maxxgripp467
    @maxxgripp467 Жыл бұрын

    I did run into this issue and found a pretty quick solution to it: 25:10 When running npm run dev I was getting the error "Conflicting values for 'process.env.NODE_ENV' After looking through it a little, inside the webpackconfig js I changed the NODE_ENV: JSONstringify to development. I'll never understand how, for example, I will get these issues and someone doing the same doesn't. 🤔

  • @good-tn9sr

    @good-tn9sr

    7 ай бұрын

    thank you so much man, your solution worked 😎

  • @Amitbidermoon
    @Amitbidermoon3 жыл бұрын

    Loved the series, but feels like I am doing a lot of copy paste. Did you write the code for webpack.config.js and for babel.config .json yourself? I am just wondering if for my next website I should just copy these, use another format from somewhere or write one from scratch? Thanks !

  • @EnoughAds
    @EnoughAds3 жыл бұрын

    Thank God you put those npm commands in the description

  • @kavinbharathi
    @kavinbharathi3 жыл бұрын

    for people who were getting errors while running the 'dev' script using npm in the terminal, make sure you are in the right directory before running the script. It will show up an 'No such file or directory' error if you are not in the right directory.

  • @thewritingwriter1

    @thewritingwriter1

    3 жыл бұрын

    You saved my life with this. Such a simple error but I was trying to run dev from the project directory instead of the frontend directory, in which case it (obviously) couldn't locate package.json.

  • @kavinbharathi

    @kavinbharathi

    3 жыл бұрын

    I am glad I could help 😄

  • @kevalrajpal4244

    @kevalrajpal4244

    2 жыл бұрын

    here there I know it's been long time for you but please can you help me fixing this issue 'React' is not recognized as an internal or external command, operable program or batch file. node:internal/modules/cjs/loader:936 throw err; Thanks in advance Module Installations 4:45:00 running app 25:05:00

  • @kavinbharathi

    @kavinbharathi

    2 жыл бұрын

    @@kevalrajpal4244 I think you don't have react installed or added to PATH. Anyway, try this command, ```npx create-react-app my-app```. If this doesn't work, then reinstall node.js

  • @kevalrajpal4244

    @kevalrajpal4244

    2 жыл бұрын

    @@kavinbharathi First of all, thanks for responding. npm PATH doesn't seem to be a problem I guess cause I was able to use other commands. The alternative you suggested is to create another folder but we have to have packages in frontend

  • @Lion8808
    @Lion88083 жыл бұрын

    I believe that in this amount of code and settings there will be a cure for cancer

  • @mskyba
    @mskyba3 жыл бұрын

    Nice video! I thought that I would mess something up, or something would change in a new version, but everything worked after I finished following the steps

  • @alialavizadeh2775
    @alialavizadeh27753 жыл бұрын

    u really show how to setup react and bundle it with django that awesome tnx Tim

  • @asyncxeno
    @asyncxeno3 жыл бұрын

    this is actual insanity i could barely keep up

  • @foreversleepy4379

    @foreversleepy4379

    3 жыл бұрын

    Because web development is a complete clusterfuck of bullshit with framework built on top of framework. It's essentially a huge spaghetti monster. I'm only doing this crap because it's required for university. Honestly, it sucks. You don't really learn how anything works and you spend hours and hours fighting with the frameworks instead of actually learning the fundamentals of computing.

  • @harishchandrapal1774
    @harishchandrapal17743 жыл бұрын

    I am getting error : music_controller\frontend ode_modules\.bin\' is not recognized as an internal or external command, operable program or batch file. internal/modules/cjs/loader.js:883 throw err; ^ Error: Cannot find module 'C:\Users\Harish\Documents\Projects eact_project\webpack\bin\webpack.js'

  • @shahaman6428
    @shahaman64283 жыл бұрын

    Thank you brother. You are doing a great job.

  • @jamilovalisher6865
    @jamilovalisher68652 жыл бұрын

    You are awesome bro! Very nice tutorials to watch

  • @StoneHold2
    @StoneHold23 жыл бұрын

    Man this video is so clutch, thanks tim

  • @d3bug646
    @d3bug6463 жыл бұрын

    thanks Tim for all the tutorials, ur the best

  • @codingwithsamanja8315
    @codingwithsamanja83154 ай бұрын

    Leave no gap in between the double quotes like this and the link tag too like that . Otherwise you will get an error.

  • @kirillkondratenko9026
    @kirillkondratenko90263 жыл бұрын

    a neat little trick in vsc html files is to type ! and the first suggestion to come up will automatically bring up the html template instead of having to type it :)

  • @logic_ok
    @logic_ok Жыл бұрын

    why dont you create standart react app by using npx createreactapp instad of creating it manually

  • @GodSpeedeRs
    @GodSpeedeRs Жыл бұрын

    If you have a problem with installing material-ui/core it is because the latest version of react doesn't support it yet. you can downgrade your react like this. npm install --save react@16.13.0 react-dom@16.13.0

  • @ilyasslakehal1466

    @ilyasslakehal1466

    Жыл бұрын

    tyy ♥

  • @mukhtarhussain2659
    @mukhtarhussain26593 жыл бұрын

    great job sir, waiting for more videos.

  • @merthyr1831
    @merthyr18313 жыл бұрын

    lol o was gonna try to fall asleep to this tutorial as im trying to learn webdev with my job and i can't turn off because this is such useful info! amazing job

  • @unknowncomedian2688
    @unknowncomedian26882 ай бұрын

    Getting error " cannot use import statement outside a module" and render is not working in App.js

  • @cjsport1254
    @cjsport12543 жыл бұрын

    You do a wonderful job of explaining things.

  • @anandvmclt
    @anandvmclt3 жыл бұрын

    After Running the Python server and " npm run dev" My Index.html page is not loading fully. It shows a Blank white colour page instead. But The title appears. So i thing The react component is not working properly. after some trial i have cloned your code from GitHub and tried. still same error. How can i solve this ?

  • @harvardcourse_cs5033

    @harvardcourse_cs5033

    2 жыл бұрын

    same

  • @cristianou3221
    @cristianou32213 жыл бұрын

    Thank you for whole this series. Everything you've done so far is amazing. I've done the first 2 tutorials and it went great, but after this tutorial when I was trying to run the app with 'npm run dev' I had one warning which was related to DefinePlugin in webpack.config.js and it says: Conflicting values for 'process.env.NODE_ENV' '"production"' !== '"development"'. So, instead of NODE_ENV: JSON.stringify("development"), I replaced the parameter with "production". I am not sure if this a good approach in the long run so I'm curious if it's ok to continue like this. I hope I explained properly my issue.

  • @danielchiappori1901

    @danielchiappori1901

    3 жыл бұрын

    Was getting the same warning. Would be awesome to get a run down on why this happens.

  • @adygombos4469

    @adygombos4469

    2 жыл бұрын

    it's a dev build thing, in the production build (npm run build) it will disappear.

  • @AdityaSharma-zz5gn
    @AdityaSharma-zz5gn3 жыл бұрын

    Your tutorials are the best

  • @omicode8035
    @omicode80353 жыл бұрын

    By far the toughest code written without understanding which ironically WORKED... hush

  • @enriquesnetwork
    @enriquesnetwork3 жыл бұрын

    Great Vid tim! just a quick question, are you going to show us how to upload it to aws or something similar? I have been looking around but cant find any good tutorial, Thanks man! cant wait for the rest of the series!

  • @vedantraghuwanshi555
    @vedantraghuwanshi5553 жыл бұрын

    As usual, Tim's back with great tutorial series again. Way to go

  • @diegoabdo2555
    @diegoabdo25553 жыл бұрын

    When doing npm run dev i get this error: Module not found: Error: Can't resolve '../src/index.js' in 'C:\Users\abdom_000\Documents\Programación\Python\React_Django\music_controller\frontend'

  • @TrustMe947

    @TrustMe947

    3 жыл бұрын

    had the same error until I noticed that I created the src-folder as a subfolder in static instead of directly in the frontend-folder

  • @brydenbarbee4528

    @brydenbarbee4528

    3 жыл бұрын

    I had the same error and created the index file as a sub file to component folder instead of as a sub file to the src folder.

  • @lucasgb7

    @lucasgb7

    2 жыл бұрын

    Hahaah same problem by a little mistake: my "src" folder was named as "scr".

  • @saiteja8359
    @saiteja83593 жыл бұрын

    Shows error when 'npm run dev' command is used

  • @wayne1318

    @wayne1318

    3 жыл бұрын

    npm install react react-dom --save my error was Module not found: Error: Can't resolve 'react-dom' that solved my issue

  • @PiErDzoncy7

    @PiErDzoncy7

    3 жыл бұрын

    I get "presets": [ ^ SyntaxError: Unexpected token ':'

  • @cameronline3780

    @cameronline3780

    3 жыл бұрын

    Are you in the frontend directory?

  • @DaveGomes
    @DaveGomes Жыл бұрын

    As someone who is new to programming, these videos have been helpful but the hardest thing to follow or understand is what file you're in and which app or folder, because when you zoom in on your code, you lose all context of where you are at. I found I was constantly scrubbing back and forth to keep track of which file we were in (since there are so many and so many named the same...)

  • @Pranav-ie1ik

    @Pranav-ie1ik

    9 ай бұрын

    these videos are not at all for beginners bro

  • @amandathompson9697
    @amandathompson96973 жыл бұрын

    My brain is melting, but in a good way!

  • @JesusGil90
    @JesusGil903 жыл бұрын

    you should use single quote inside static tag

  • @robin2080
    @robin2080 Жыл бұрын

    It's 1:23 am.. but I finally got it working!

  • @matiascoco99
    @matiascoco993 жыл бұрын

    Hi guys!, i'm having a problem when trying to init "npm run dev". It says that "frontend ode_modules\.bin" is not recognized by external or internal command. I ask this on stackoverflow but, until now, no response. Plz Help. Thanks!

  • @siddharthlotlikar880
    @siddharthlotlikar8803 жыл бұрын

    I like functional components than class components. I would recommend this for beginners.

  • @johansaputro2291
    @johansaputro22913 жыл бұрын

    Hi, I managed to run the server but the "Test react code" is not shown on the web. Its only blank without text or anything. note that I changed the webpack exclude into this exclude: path.resolve(__dirname, '/node_modules') also, the and / text color in the App.js is grey and not white any idea how to fix this?

  • @BlykalmGPT

    @BlykalmGPT

    3 жыл бұрын

    I ran into the same problem as you , have you managed to find a fix

  • @jonathanLess

    @jonathanLess

    3 жыл бұрын

    Hi, you can change babel.config.js to => .babelrc the content should be { "presets": ["@babel/preset-env","@babel/preset-react"], "plugins": ["@babel/plugin-proposal-class-properties"] } that helps for me

  • @alexisalmeida

    @alexisalmeida

    2 жыл бұрын

    For react-router-dom, version 6.0.2 (this is my case), doesn't exist "Switch". This component was replace by "Routes". So, my code is working this way:

  • @KUSHALLOYA

    @KUSHALLOYA

    2 ай бұрын

    Did you find the solution for it, I am having the exact same problem

  • @taylormuhrline2051
    @taylormuhrline20513 жыл бұрын

    great series so far!

  • @zaid_imtshaik4276
    @zaid_imtshaik42763 жыл бұрын

    Excellent ... Thanks for sharing the code... Keep uploading this kind of staff Good Bless you.. Imtiaz Shaik

  • @paologonzales4361
    @paologonzales43613 жыл бұрын

    im getting this warning when I npm run dev WARNING in DefinePlugin Conflicting values for 'process.env.NODE_ENV'

  • @Flameandfireclan
    @Flameandfireclan2 жыл бұрын

    Just started to learn Kivy, since I am at the point that I am better able to grasp OOP. Still got A LOT to learn. Saw 1st video and was like: “Looks interesting” realized 3 videos later that this is only set up. Good God. Well I enjoyed it though. Gonna watch the 4th now

  • @chedisLoL
    @chedisLoL3 жыл бұрын

    Note: if you have node-JS installed but havent updated use the command " npm install -g npm " - if this errors like mine did delete the appdata Roaming folders of npm and npm cache. Then reinstall node and it should be updated.

  • @rgvn8406
    @rgvn84063 жыл бұрын

    I hope you do function-based coding on the frontend side :) 🙏

  • @aishikbandyopadhyay8191
    @aishikbandyopadhyay81913 жыл бұрын

    Can you please put up a video demonstrating the react setup using the module "create-react-app"?

  • @jakobadler6034
    @jakobadler60344 ай бұрын

    YEAH, COOOOOOL. using 20 million packages that are all outdated and throw exceptions

  • @gamingllama7464
    @gamingllama74643 жыл бұрын

    this is a very very tiny thing but in the description you put webpack.config.json when it should be .js, a very minor thing but just mentioning it other than that great series as always :)

  • @maxteer3533
    @maxteer35332 жыл бұрын

    Quick question--if you had used a virtual environment for your python work, where would you have created the folder? Does it go in the project folder? Or as a sibling to the project folder? I have mine as the latter, but would be curious to hear your take. Thank you so much!! One of the best on youtube!

  • @grenadecodes2281
    @grenadecodes22813 жыл бұрын

    Thanks once again tim, you inspire me and thousands of others to keep coding :)

  • @vedkorla300
    @vedkorla300 Жыл бұрын

    I literally smashed my table in celebration after I finally cleared a whole list 69 gazillion errors. I am so happy!

  • @bubblyducks95
    @bubblyducks953 жыл бұрын

    if you are having difficulties installing the packages, just npm install them individually one-by-one. for me i am getting some file permission errors from my OS and i tried them seperately

  • @neckpillow
    @neckpillow Жыл бұрын

    I really love you, thanks