Hey, great tutorial! For those using react-router-dom v6, the API has changed a bit. Took me quite a bit to nail it down lol. 1. The switch has been replaced with Routes. 2. Components for routes are now passed through the element prop. 3. The exact prop is no longer needed as routes match exactly by default in v6. Here's how you'd update the code: import React, { Component } from "react"; import RoomJoinPage from "./RoomJoinPage"; import CreateRoomPage from "./CreateRoomPage"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; export default class HomePage extends Component { constructor(props) { super(props); } render() { return ( ); } } Hope this helps! 👍

@johnkinyanjui2435

8 ай бұрын

i did the same as you but on the browser its just a white blank page. then i used this and it worked ... import React, { Component } from "react"; import Roomjoinpage from "./Roomjoinpage"; import CreateRoomPage from "./CreateRoomPage"; import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; export default class App extends Component { render() { return ( ); } } class HomePage extends Component { render() { return ( the Home Page ); } } can someone talk about this..

@croose

8 ай бұрын

Thank you so much, this was very helpful.

@muhdmahmood

7 ай бұрын

you are a life save...i send you a xmas gift if i was santa.....=)

@JaquelineKyle

7 ай бұрын

I can't thank you enough!

@ClementSuresh612

6 ай бұрын

You just saved hours of work. Thank you 🙂

In 2022, if your components aren't rendering, make these changes: These are updates required for React Router 6

@mabbiera250

Жыл бұрын

It worked for me, thanks

@5Rassel5

Жыл бұрын

badass

@collingodfrey2787

Жыл бұрын

Cannot thank you enough!

@King-yj2jx

Жыл бұрын

Thank you sir!

@robin2080

Жыл бұрын

thanks boss

in case you get this error: "export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'" Change: This is the home page to The reason is "switch" has been replaced with "routes" in newer versions.

@kowdhon1562

2 жыл бұрын

This comment help me my bad, Thank you very much !!!

@MiloCoder

2 жыл бұрын

And then a hero came along. Thank you.

@khd1451

2 жыл бұрын

What is suspense

@cloudboysmusic5223

2 жыл бұрын

@@khd1451 Just ignore it

@pilote111

2 жыл бұрын

YES!!! it didn't worked until I saw your comment. Thx 😄

Manual setup is painful to go through but it teaches you so much. Totally worth it. Thank you for the detailed explanation.

Bro, I don't know how you are doing it so many high quality tutorials! Unbelievable!

If anyone having problem with displaying paths, 2 options: n1 Swtich == Routes, Components == Elements, elements = { } n2 npm uninstall react-router-dom npm install react-router-dom@5.2.0 works just fine :)

@johnanthony6612

2 жыл бұрын

Thanks for this I was actually having this error now. In order to use the latest version of react-router-dom do this in your homepage: import { BrowserRouter as Router, Routes, Route, Link, Redirect, } from "react-router-dom"; export default class HomePage extends Component { constructor(props) { super(props); } render() { return } }

@gee9099

2 жыл бұрын

@@johnanthony6612 THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!

@johnanthony6612

2 жыл бұрын

@@gee9099 templates seem like the way to go I don't remember if this makes use of two servers or proxies to connect the frontend and backend but with this you only need to run the backend and react will compile directly to the template folder

@doug5240

2 жыл бұрын

@@johnanthony6612 Thanks! I figured the Route / Switch substitution, but was still getting a blank page. With your code I was able to fix the bug!

@douglasazevedo2586

2 жыл бұрын

@@johnanthony6612 Dude, thank you! I'm beginner and you and @MrBach help me a lot now

Hey Tim, so I am aware about django but new to react. So this collaboration of django with react is very new to me. I just started this 4th video and after hearing the start intro about you apologizing for the previous long video and its detailed setup, I really really have to say this. Thanks Buddy!!!! I genuinely want to understand every part of video and the setup you showed really helps. While I would ask others to also google stuff to learn if you think something isn't proper for you. that really helps out for self learning. Again thanks mate for this awesome video!!! 😀

Thanks to the comments I was able to fix the Switch to Routes problem 😃 I also had to do this: it worked after putting the tag inside elements instead of putting it between the Route tags

@ravindusandaruwan5775

Жыл бұрын

thanks

@dexterasis1004

5 ай бұрын

Same thing with me. Went crazy on this.

The beginning section where you answer comments should be REACTions with Tim. I liked my own joke so much, I'm subscribing hahaha. Keep up the great stuff!

this is the correct routing that works in 2023: import React, { Component } from "react"; import RoomJoinPage from "./RoomJoinPage"; import CreateRoomPage from "./CreateRoomPage"; import { BrowserRouter as Router, Routes ,Route } from 'react-router-dom'; export default class HomePage extends Component { constructor(props) { super(props); } render() { return ( ); } }

@valeristoyanov5843

10 ай бұрын

It works, thank you!

@pixifiedbybooks

8 ай бұрын

Thank you so much! :)

@ocollinsgmailcom

6 ай бұрын

Thank you!

@emilianocisterna3540

4 ай бұрын

Thank you mate! it works fine in 2024

@leophelan6768

3 ай бұрын

I spent ages figuring this out, if only I read comments sooner : (

I 100% appreciate you going through all the steps no matter how long. You said it. If you don't understand the code it can take you hours if something goes wrong to try and untangle or figure out the problem and you will end up learning either way. Might as well learn upfront before issues happen. Right? Great content.

2:26 I felt him. And by these videos, he is saving my life.

Bruv, the quality on these tutorials are mad. Thanks a lot. Really am learning a LOT!!

You should put the router in the App component. That way, if you want to add say, navigation to the sidebar, you could throw that component in App, and it will have access to the Router. It also puts HomePage at the same architectural level as the other pages.

If you're getting an error that says you can't use/import 'Switch' from BrowserRouter use 'Routes' instead of 'Switch' and change the syntax for each Route to be for all of your routes

@yonatangoldin

2 жыл бұрын

how should i write the switch statement instead? i didnt understand your comment all the way

@greengoggles

Жыл бұрын

@@yonatangoldin render(){ return ( ); }

@sumeet321

Жыл бұрын

@@greengoggles I have all three messages appearing on the home page and I wrote exactly what you have

@GolfyMcG

Жыл бұрын

@@greengoggles Thank you! This thread was helpful but your explicit comment on setting the element property is what fixed my issue.

@leaogauzinho

Жыл бұрын

@@greengoggles Thanks! I was stuck on that.

I am truly learning from you going into such detail. I want to understand what it all really means, so I can actually use it in practice. please keep it up Tim!

i dont even want to learn react i just came here to thank him for teaching me sockets and pygame. Im making my fourth game

@shawnbeans7389

3 жыл бұрын

you are a nice person

@o_poky9359

3 жыл бұрын

@@shawnbeans7389 So are you :)

@foreversleepy4379

3 жыл бұрын

Yeah, stick to making games. Game developer, here. You actually learn how to program and you learn the fundamentals of programming and computing. In web dev, you don't really learn much of anything apart from being good at battling with tools and frameworks. So much is hidden away from you to the point where it's actually harder to understand. I've never liked web dev, but these days it's really quite ridiculous. Can't wait to finish my uni module just so I never have to use another web framework ever again.

Actually it is high quality introductory, no one explained how Django and react works hand in hand that clear, that clear . Thank you 🙏

@Anonymous-xk4dg

3 жыл бұрын

is that end a bob ross reference?

16:14 If you only need the div to wrap the inside components you can just use ... instead so you don't have useless divs in your html.

Hello Tim, you can write the route for "/" at last without using exact keyword and it should work fine as well. Thanks for this awesome series 👍🏻

@devhypercoder6772

3 жыл бұрын

thats a good tip

@m.iqbalmaulana7328

3 жыл бұрын

nice, this is working, thanks

@muhammadlutfirahmawan8327

3 жыл бұрын

Like /home/ instead of /home +exact? Am I right?

@jarrodolivier6317

3 жыл бұрын

@@muhammadlutfirahmawan8327 I think they mean put it (the home page with no specific path) as the last route in the Switch tags, that works for me.

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

I don't know why you had to apologize Tim. Guys! He clearly stated that this series is not for beginners. Plus, if you're not a beginner in react , you can definitely translate class components to functional components on the spot.

I love the way you work your way through the project - as a continuous learner that simply shows us mere "mortals" that everything's fine and you WILL have some/all of these problems, bugs and/or difficulties. So far, this is very much the same setup as I landed on myself for my own project and I'm super excited to learn more about React's router as I realized literally a few days ago that I needed it and finally landed at your channel for 🆘🤣 Keep up the good work and wish all you cool nerds out there best of luck with your projects 😊

yes, you're right. at the beginning we just let everything set up and run. then after everything goes well, we can slowly understand the 'concepts' and the 'standards'

On "npm run dev" I encountered the error: "WARNING in DefinePlugin Conflicting values for 'process.env.NODE_ENV'", I had to change the NODE_ENV value in webpack.config.js to "development" from "production" for it to build properly

@valeristoyanov5843

10 ай бұрын

Thank you sir

I really appreciate you taking the time to make these fantastic videos. I greatly appreciate it. I also thank you a lot for explaining and responding to people's comments. You rock! I am learning a ton.

One of the best tutorial videos for React and Django . Thank you so much Tim ,Learnt so many things.

If the changes aren't visibe after reloading or Hard relaoding you might have problem in webpack.config file to confirm that this is the issue check you terminal in which you're running NPM commands and if it has "Conflicting values for 'process.env.NODE_ENV'" error that means it is something that is stopping you reload to solve this issue search the error on StackOverflow it has several solutions.

@judahsan

2 жыл бұрын

Noted

I am newish to Python but do have some experience with React. Seeing the classes did throw me off, but it is not hard to convert the classes to functions/hooks. Many thanks for the excellent tutorial!

For those who struggling with this tutorial. In React Router version 6 (as of September 2021), the Switch component has been replaced with the Routes component. The Routes component is responsible for rendering the appropriate component based on the URL path. You can use it in your code as shown below: render() { return ( ); }

That's nice tutorial covering up basics of react with django soon I'll be using it in my web app👍

This tutorial series is entertaining as well as interesting

Hello Tim Some things I want to learn are : 1. Logging System with 2 views administrator privileges and Customer privilages. 2. Upload Image for example change profile picture. Thanks Ankit Rusia

Wait is over, video is here, thanks for this series

@samcodes2912

3 жыл бұрын

great series

I had a problem with a magical npm run "script_name" command, so my solution was simply moving to linux lol. Great content by the way, thank you for your educational sharing with us, Tim.

I have been stuck on my react links not rendering its component instead returns a blank page thankfully I fixed it what I did was updated my react-router-dom this is thanks to Yuyutsu Rai from the youtube comments do his steps and change this to this hopefully this helps you out.

thanks for the effort you give to teach us and keep up with the great content

Bro everybody makes mistake .We all want to thank you for the good quality content and keep up with good work thanks again

I appreciate your hard work, thank you for teaching.

Thank you for the videos and the values you're contributing to the community. Personally, it's not the perfect contents but your humbleness and consideration in sharing make the learning journey with you is great. Keep up the spirit.

after watching these video and some django and react blogs , the direction became much more clear

Thank you so much sir 😭.....you saved my life....actually I messed up in django's urls and reacts route combination...but because of you this problem is solved and I understood everything that you teached . thank you so much ..

HI Tim loving the content so far. any new tutorials for 2023?

I appreciate the method of teaching here. Plus I'm coming in with some Django and React experience. But Tim is helping me put it all together.

Can someone plz tell me how is the bundled file in the static folder named **main.js** I know this is the webpack config responsible for it output: { path: path.resolve(__dirname, "./static/frontend"), filename: "[name].js", }, What is the [name] doing there exactly. From where is it getting the name **main**

@mauro_carvajal

3 жыл бұрын

the [name] part is expecting that the user pass some variable for custom naming, when none is passed it defaults to main so thats why the file is named main.js

@bruceaxelrod8291

3 жыл бұрын

@@mauro_carvajal Thanks

Hi Tim, I really do understand what you are doing and I think what you have done is awesome in the last video. The only thing is if anyone who is familiar with react won't find it difficult

This Tutorial is actually helping me even in 2021 :P

No need to use exact at 23:36 just put the "/" case last, since the matching starts at the beginning and we can say "/" acts as the switch default

...and thanks for the step-by-step setup. I, for one, needed that.

@nanohedron

3 жыл бұрын

...and thanks for explaining how changes to state will trigger a re-render of the parent component. That's another important thing I still had not learned.

Hi! Excellent video! You explain things well and have great style and rhytm on these videos. By the way, what you did in CSS-file is paritially not necessary, you don't need to write all same styles for main and app div because app inherits main's styles because it is its parent. And comments in css are written by /* comment here */.

@StanSays

3 жыл бұрын

in VS Code no matter what language toggle comment for a line is Ctrl+/

For anyone who are having blank pages, make sure you have install "npm install react-router-dom" . Also using dev tool in your browser will be a good way to check the error. Good Luck!

Thank You for this tutorial, this is helpful

Hi, Tim, maybe you know how to solve the problem with blank screen. I' ve tried everything from comments but there wasn't any result? Edit: npm install react-router@5.2.0 npm install react-router-dom@5.2.0 helped me

@maxraven9138

2 жыл бұрын

Thank youuuu!!!!!!

@bhavyapatel3725

2 жыл бұрын

Thank you this helped me too!!!

Thank you very much for your videos! I've learnt a lot

Legend says if you are first then Tim hearts ur comments. Big fan from India BTW great tutorial series Tim

@TechWithTim

3 жыл бұрын

:)

@suryanshtokas6337

3 жыл бұрын

@@TechWithTim thanks mate for the great work keep it up. Can u do a algorithm series with python on KZread?

📌 100% important comment How to link 🔗 react with django + deploy to heroku. It's super hard

also for the route they changed it and how I fixed the problem was to do this import { BrowserRouter as Router, Route, Routes, Link, useRoutes, Redirect } from "react-router-dom"; const App = () => { const routes = useRoutes([ { path: '/', element: This is home page}, { path: '/join', element: }, { path: '/create', element: }, ]); return routes; }; const AppWrapper = () => { return ( ); }; export default AppWrapper;

@deepon4128

Жыл бұрын

thank you bro thats working now

@ej6657

Жыл бұрын

Thank You Brother.. I love you so much lol

@tsvetomir98

Жыл бұрын

Thanks

Tim you can just press control + / to comment out the line.

@sakethparimi7664

3 жыл бұрын

on mac it is cmd + /

Video doesn't have a single dislike

Hello Tim, thank for your time for make videos. I have one question, why is interesting use Django with React, in other words, what features you can add to Django?

I am still at 10:05 and i am impressed by the way you started explaining everything. last video i commented about not understanding anything and in the next video so much better explanation...Thanks Tim for being here on KZread...A Big Fan from India

If you dont wanna create route each route in reactjs, add this in main urls.py: re_path(r'^(?:.*)/?$', include('frontend.urls'))

@vidithbalasa1237

3 жыл бұрын

appreciate it

These videos are awesome! Very useful information presented clearly and at a good rate. You're a very impressive young developer! Keep up the good work, Tim!

Heyy Tim!!!.. Hope you see this comment. Merry Christmas. One thing I wanted to point out was while recording it would be nice if the line in focus that is being typed is in the middle of the screen rather sometimes it is at the bottom and gets overlapped by the seek bar and the video controls of the youtube player..

I'm glad to find class-based React here, because I'm looking to convert vanilla JS classes over once I've learned enough. So thanks, and thumbs up!

@nanohedron

3 жыл бұрын

Also, I've heard that there are a good number of companies that still use class-based React. Just what I've heard, but it makes sense since there are definitely a lot of companies still hiring people for much older tech like jQuery and PhP. Who know - maybe there are actually still more actively maintained sites out there that are written in class-based React than function-based.

i have learned a lot with you..Thank you :)

so glad i'm on this one early.. thank you tim!

Hi Tim, Use the "AutoSave" function of Visual Studio Code. It will make the task easier... Goto "File", then tick "Auto Save"

mine still says 'Testing React Code" cant figure this out. Thats not even written in my app.js anymore

wiating for the 5th video :) it is an amazing series

These videos are great! Keep up the great content. Are you going to be using react hooks etc?

@RohitSaini-go3cr

3 жыл бұрын

He is using class components so he will not be using hooks maybe

Instead of a wrapping div you might use React.Fragment. Its a wrapper that does not create an addiotional div in the DOM tree after the template or app has been rendered, thus keeping the DOM skeleton shorter.

very good playlist, it is very well explained, jspr that it does not stop so early, and please if you could include in your application a system for making appointments, between the users. thank you very much for the playlist you are very strong, good luck.

Hey If anyone got the blank screen then you can use import React, {Component} from "react"; class HomePage extends React.Component { // ... } Hope it helps

If you're using ads block, make sure to turn it off. I figured it out why my text didn't display!

Hello. I followed everything and when I run the server nothing shows up and I have this error on console: main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) index.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) index.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) And this error on my terminal: [08/Oct/2023 22:09:34] "GET /static/%20frontend/main.js HTTP/1.1" 404 1812 [08/Oct/2023 22:10:39] "GET /static/%20css/index.css HTTP/1.1" 404 1803 How dod I fix this?

love your transparency Tim👍

you should also see the easy way to start a react app

Yo Tim Wonderful Tutorial

10:28, I had tried to change the text of render, but it doesn't change to any even that I write Any. It still showing "Testing React Code". I had skipped the command of "conda activate spotify", is this fatal error? I'm using Python 3.8.0. I had tried to download your source code and rerun without the command of "conda activate spotify", it still gets wrong. If it is a fatal error, can you tell me about how to apply command of "conda activate spotify"?

@the3dhuman574

3 жыл бұрын

I had this problem just now and, after going insane for a good 10 minutes, I solved it. I simply pressed ctrl + c on the Django server terminal and a bunch of text popped up really quickly, and I did it again and the server closed, and finally, I started the server up again and it worked. If this doesn't work for you, I also cleared my browser cache, because the internet said so, but I'm not too sure this did anything. Hope this helps!

@ryanfarish5433

3 жыл бұрын

@@the3dhuman574 I had the same problem but now it loads properly after I cleared the browser cache. Thanks!

@tankaiyi6164

3 жыл бұрын

​@@the3dhuman574 Thank you, your solution had solved my problem.

@tankaiyi6164

3 жыл бұрын

@@the3dhuman574 I found a simpler way to solve cache problem. Just click ctrl-f5 to reload our page. It will reload with clear cache.

@the3dhuman574

3 жыл бұрын

@@tankaiyi6164 oh cool thx

you are just awesome....learned a lot !

wonderful explanation

thank you for these tutorials

Hey tim, I would like to know why we still need JQuery here? I never use JQuery before, but from what I heard JQuery is old and heavy, so there's why we move to a more modern framework like react for example. Thanks

Does anyone know why both commands "python manage.py runserver" and "npm run dev" need to be run for the page to reload properly (the part at 10:09)? I discovered that when I only ran the Django command, the browser would load text from main.js (the super long file that was automatically created during npm setup) instead of the .js file that was supposed to be called by index.html. The browser wouldn't reflect changes I made, even after refreshing the cache and reloading. After I ran the command "npm run dev", the browser would load from the correct file and update accordingly. In a previous project that used Django and React, I only had to run the Django command for everything to work so this confuses me.

@joshdotmp4

3 жыл бұрын

The way that the tutorial is set up, it uses webpack to transpile your react code from "index.js" into "main.js". With the tutorial's configuration, the django server is reading index.html which references main.js, not index.js Normally, main.js does not automatically update to match the contents of index.js. Running "npm run dev" causes it to automatically update. You can see what the dev script does in package.json Hopefully this helps! I'm learning all this myself too, but this is my understanding. Not sure exactly why webpack is necessary, but that's just the way the tutorial does it. If I'm wrong, hopefully someone will correct me

Whenever I change the HTML in the render function, my page doesn't update? I've tried preventing cache reloads but it doesn't work for me, can anyone help?

@the3dhuman574

3 жыл бұрын

I had this problem just now and, after going insane for a good 10 minutes, I solved it. I simply pressed ctrl + c on the Django server terminal and a bunch of text popped up really quickly, and I did it again and the server closed, and finally, I started the server up again and it worked. If this doesn't work for you, I also cleared my browser cache, because the internet said so, but I'm not too sure this did anything. Hope this helps!

@kieransmith9865

3 жыл бұрын

@@the3dhuman574 Thank you for your help, but I realised I hadn't done npm run dev

@abhinavjha98

3 жыл бұрын

Hey Just press Ctrl + F5 on browser it will work.

@shanaiajishin7269

3 жыл бұрын

@@abhinavjha98 It did, thank you!

@lucianoandres420

3 жыл бұрын

Try using another browser, it's work for me

Dude these are heck of tut's loved them man

If your changes does not appear when you hit F5, try import React, { Component } from 'react'; with 'react', not "react".

@tawfeeqzaghlool2549

Жыл бұрын

This one works for me. Thanks.

imagin i deleted App.js and still get the same output on the webpage from the first time i tested it !!

@preethamlekkala418

3 жыл бұрын

what to do then?

@hamdimohamed8913

3 жыл бұрын

i guess reboot everything sometimes even with Django boostrap the updated css files won't load

Thanks Tim!

really helpful thank you so much

Another new video from the best youtube channel.

Please never quit making youtube video.

Hi Tim! Big fan of you... even though you're same age as me! haha....

@TechWithTim

3 жыл бұрын

Hey, thanks!

@samcodes2912

3 жыл бұрын

that's nice

love u so much Tim, such a helpful tutorial

this video is so so good

btw if someone doesn't get custome components but just html as you wrote it try renaming your components so that they start with a capital letter

Thank you for your effort ...

It's not HTML text which you are returning but it is called as JSX i.e. JavaScript Expression which render method usually returns

I had the same issue after episode 3 but tried to push through. The websites just load a blank page regardless of which page I am on (if I am on the join page or the main page or whatever). Anyone have any idea as to what the issue could be? I have copied his code for all the components and my code doesn't seem to have any errors. Thank you!

@Leptonite

Жыл бұрын

I was also having a problem like yours and someone else on this page commented this: If you're getting an error that says you can't use/import 'Switch' from BrowserRouter use 'Routes' instead of 'Switch' and change the syntax for each Route to be for all of your routes render(){ return ( ); } it might help

@Leptonite

Жыл бұрын

dont forgter to import Routes instead of Switch