Django & React Tutorial #9 - ComponentDidMount and Django Sessions

In this django and react tutorial video I will be showing how to use react life cycle methods, specifically componentDidMount. I will also be explaining how django sessions work and how to add and delete information from django sessions.

◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
💰 Courses & Merch 💰

🔗 Social Medias 🔗

🎬 My YouTube Gear 🎬

💸 Donations 💸
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️

⭐️ Tags ⭐️
- Tech With Tim
- Django and React Tutorial
- React and Django Tutorial
- React Lifecyle Methods
- CompontentDidMount
- React compontentDidMount
- ComponentDidMount React
- Django Sessions

⭐️ Hashtags ⭐️
#Django #React #JavaScript

[TechWithTim]

I will do a video on react hooks later! Be patient :)

[jonwakefield]

For anyone having trouble routing to the current room instead of the homepage, add the ternary operator (if-else) to the renderHomePage() method:
Here's some code that works with React V6:

renderHomePage() {
if (this.state.roomCode) {
return (
<Navigate replace={true}/>
);
} else {
return (
<Grid container spacing={3}>
<Grid item xs={12} align="center">
<Typography variant="h3" compact="h3">
House Party
</Typography>
</Grid>
<Grid item xs={12} align="center">
<ButtonGroup disableElevation variant="contained" color="primary">
<Button color="primary" to="/join" component={Link}>
Join a Room
</Button>
<Button color="secondary" to="/create" component={Link}>
Create a Room
</Button>
</ButtonGroup>
</Grid>
</Grid>
);
}
}

render() {
return (
<BrowserRouter>
<Routes>
<Route exact path="/"
<Route path="/join" element={<RoomJoinPage />} />
<Route path="/create" element={<CreateRoomPage />} />
<Route path="/room/:roomCode" element={< Room />} /> {/* : in path value represents a parameter in url */ }
</Routes>
</BrowserRouter>
);
}

Hope this Helps :)

[albertwyatt]

Best explanation of an 'async' function. Thanks Tim, I always felt confused as to why async was important

[rog_shakhyar]

Thanks a lot my friend, this series is one of the best series you have ever created!

[bahmanbidmeshki]

I've watched lots of online courses! you are the best ever Tim!

[jovicabengona]

I have watched a lot of django tutorials and I can't find what I was looking for until I found this. Django for the backend and React for the frontend. This is by far the best tutorial I have ever watched. Thank you so much for being dedicated in creating this tutorial. Multiple button press for respect

[victoritodo]

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

I have had this series saved for over a year. The first time I watched it, it felt overwhelming because I only knew a bit of Vuejs and Django then. I kept it anyways because I knew how valuable it was. Now that I know a bit of React, I have just completed the series and it was so helpful!

The desire to be of help was evident in the quality of every single episode. Thanks so much for the effort Tim! ❤

[aniketsharma]

Great series Tim, Keep continuing these type of tutorials ✌🏻

[aadityamunjal]

Started with the series yesterday hope I will catch up soon. Thanks Tim 👍

[danielmathew]

Hello Tim! Am from Tanzania, ambitious to coding. Love the way your skills are awesome bruh

[Clapzy]

Can you kindly make a tutorial in Django and React to make like a register / login system it would be very helpful

[samcodes]

great dedication Tim . wonderful series

[ankitaburman]

This is awesome tutorial Series Tim, Thank you for putting so much of effort and sharing us the knowledge. You are a Guru :)

[kopalsoni]

Great explanation on async tim. Thanks!

[Aiyara_AoC]

Hi Tim, I first want to thank you so much for the effort you put in this channel, the amount of information and their quality is absolutely top notch.
I wanted to respond to you asking for suggestions in your news regarding the future of the channel video but idk if you still read comments there so I'll ask here instead. Do you believe you might participate in some codingame contests and make videos about it ? that could be a part of your 'projects tutorials' kind of content and also provide valuable information about efficient problem solving. There might even be possibilities of sponsoring.

[ayaanp]

1st :>, BTW, big fan of your vids, I need to get into javascript again, it's really powerful if you do something like what you're doing.

[PradHolla]

Hey Tim just an inquiry. In the final video, are you showing how to deploy/host on a third party device? For ex, instructions on GitHub on a Readme file or something like that? Thanks!

[amandathompson]

Hey Tim, will you touch on testing in this tutorial series?

[chiragjani]

Can you please say that how long this series will go??
Please Please Please I've to plan everything so..🙏🙏🙏
Btw you're awesome 🔥❤️

[hongweisoo]

Below is the HomePage.js code that works in my React version 18.2. Hopes it can help someone. btw, ChatGPT helps a lots during my troubleshooting.

import React, { Component } from "react";
import RoomCreatePage from "./RoomCreatePage";
import RoomJoinPage from "./RoomJoinPage";
import Room from "./Room";
import {
BrowserRouter as Router,
Route,
Routes,
Link,
useRoutes,
Navigate
} from "react-router-dom";

export default class HomePage extends Component {
constructor(props) {
super(props);
this.state = {
roomCode: null,
};
}

async componentDidMount() {
const response = await fetch("/api/user-in-room");
const data = await response.json();
this.setState({
roomCode:data.code
})
}


renderHomePage() {
if(this.state.roomCode) {
return(
<Navigate replace={true} />
)
} else {
return (
<Grid container spacing={3}>
<Grid item xs={12} align="center">
<Typography variant="h3" compact="h3">
House Party
</Typography>
</Grid>
<Grid item xs={12} align="center">
<ButtonGroup disableElevation variant="contained" color="primary">
<Button color="primary" to="/join" component={Link}>
Join a Room
</Button>
<Button color="secondary" to="/create" component={Link}>
Create a Room
</Button>
</ButtonGroup>
</Grid>
</Grid>
);
}
}

render() {
return (
<Router>
<Routes>
<Route exact path="/" />
<Route path="/join/*" element={<RoomJoinPage />} />
<Route path="/create/" element={<RoomCreatePage />} />
<Route exact path="/room/:roomCode/" element={<Room />} render={({ match }) => <Room id={match.params.roomCode} />} />
</Routes>
</Router>
)
}
}