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! 👍
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..
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 */.
Hey i am having problems. when i try and run my server using the "npm run dev" i get an error that says "syntax jsx isn't currently enabled". i have tried everything and it still doesn't work, any tips?
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.
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
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 ( ); } }
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 :)
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 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
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!
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
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;
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**
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
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
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 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
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.
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.
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?
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.
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"?
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!
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!!! 😀
Hey If anyone got the blank screen then you can use import React, {Component} from "react"; class HomePage extends React.Component { // ... } Hope it helps
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?
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!
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.
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
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!
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
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!
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
ERROR in ./src/components/App.js 4:0-90 Module not found: Error: Can't resolve 'react-router-dom' in 'C:\Users\vinee\My Projects\RestaManagement estfrontend\src\components' resolve 'react-router-dom' in 'C:\Users\vinee\My Projects\RestaManagement estfrontend\src\components' Parsed request is a module using description file: C:\Users\vinee\My Projects\RestaManagement estfrontend\package.json (relative path: ./src/components) Field 'browser' doesn't contain a valid alias configuration resolve as module Nothing is displaying on web page and getting above error. Pls help.
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.
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!
Instead of 'process.env.NODE_ENV' : JSON.stringify('production'), use this --> 'process.env.NODE_ENV' : JSON.stringify('development'), this is because the value/s inside ('----- this ---'), should not match with --> "build": "webpack --mode ----- this -----" in package.json file. Welcome in advance!!
Tons of coding , weird silly using external application like React to connect my internal API to render (my internal code!!! which is 80% less coding), funny.
This is outdated as hell. I'm getting bugs and errors left and right. Tried uninstallig react-router-dom and downgrading but it seems impossible to do without getting errors. This sucks. I was really looking forward to completing this tutorial.
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.
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?
you used a command "conda activate spotify" in previous tutorial of this playlist i guess, is it package manager or something else, please help me set it up on my system
Am running the "npm run dev" command with django server running but am still gating the old react componets rendered and even if i do changes in components its not being updated can anyone help me out??
does this method make react rendering server we will not use express js or next js really i need a solution to my website i developed it with django and react but i found the spa problem with seo
from django.contrib import admin from django.urls import path, include, re_path from django.views.generic import TemplateView urlpatterns = [ path ('admin /', admin.site.urls), re_path ('. *', TemplateView.as_view (template_name = "index.html")) ] here is my code and the rest done with react router dom
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.
Hey tim, isn't it a single page application, as the page is refreshing. Is there anything we could do in order to switch in between the pages without refreshing. Bdw thanks for the series, learning a lot from your channel🙏👍🏻
Yeah React Router Dom doesn’t refresh the page when you redirect. When you submit a form it auto refreshes the page but you can stop that by calling event.preventDefault() on the button or form submit event
Ok, I just do not get why my App component is not reflecting the changes I am making... It is stuck on rendering "Testing React Code" instead of rendering the new three components, does someone have any idea whats wrong?
In the previous video some command created for you 2 files: main.js and main.js.LICENSE.txt but i got created just one file called [name.js]. I changed path and everything works fine but when i run 127... i got " sign on the top and got no idea from where and how to remove it. Could you please help me?
Hi, Tim, there was nothing wrong with my runserver and npm run, no errors, but when I open up the 127 it show “not found”, been going back and forth between files but still haven’t found the bug T.T
I am having an issue. I even copied your code and still receive the same error in inspect. possibly a change in react since the tutorial was created? "Uncaught ReferenceError: App is not defined"
