Full Stack Web Development Course [5] | ReactJS, NodeJS, MySQL - Individual Pages Based on ID

Hey everyone, this is the fifth episode of this series where I will show how to create a full stack web app!

Technologies:
- ReactJS
- NodeJS
- ExpressJS
- MySQL
- Sequelize

-
-

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[jiwachhetri]

Side note: 15:50, the useEffect runs into an infinite loop. Make sure to use an empty dependency array, so it is going to render just once.

[mauriciojunior]

Hello guys, in react-router-dom v6, useHistory don't exist, now is useNavigate.

Before:
import { useHistory } from "react-router-dom";

let history = useHistory();

onClick={() => {history.pushState(`/post/$`)

Now:
import { useNavigate } from "react-router-dom";

let navigate = useNavigate();

onClick={() =>

-

history.push("/"); = navigate("/");

[jonathansurle]

Big shout out from France! Dude, you're doing such a great job... You make everything so clear and simple !

[jeffersonbrn]

Cara, eu já comprei dezenas de cursos que não adianta muito explanar aqui. Mas sinceramente falando, sua metodologia sem duvidas está sendo a melhor. E ainda, no youtube sem custo algum cara. Você, sem duvidas, vai ser ainda mais sucesso boy. Vlw

[alanwalker]

15:50 if you're getting postObject error then you first need to check if this object is empty or not coz at initial component render postObject will be empty and when you try to access it's property then it will throw an error. idk how it's not complaining in his code.
return (
postObject != null && (
<div className="postPage">
<div className="leftSide">
<div className="post" id="individual">
<div className="title"> {postObject.title} </div>
<div
<div
</div>
</div>
<div className="rightSide">Comment Section</div>
</div>
)
);

or you can use ? operator in each place where you are accessing the postObject
return (
<div className="postPage">
<div className="leftSide">
<div className="post" id="individual">
<div className="title"> {postObject?.title} </div>
<div
<div
</div>
</div>
<div className="rightSide">Comment Section</div>
</div>
);

[TheNamesJT]

14:37 UGH another road block! can't access lexical declaration 'id' before initialization inside Post.js client pages? I know my server is working tryed postman and it returns the correct post but its the client end thats having said issue here from the looks of it and can't seem to figure it out.

[haudangnguyentien]

Thank you author, I really learned a lot of new lessons from your videos! ❤

[elveyo]

Awesome videos man!When I make post and redirect to home it doesn't show post.I need to refresh page so it can be fetched.Do you know reason?

[aaronsoto]

Loving the tutorials! I am reaching out and trying to do associations were a "City" can have many "Communities" How would i make the connection between the two? I tried to do hasMany but im having trouble in the form adding the id to another model.

[Danielrodrigues]

Pedro, parabéns pelo conteúdo! Muito bom seu curso, muito claro e fácil de entender. Vamos ver se serei capaz de fazer meu app no final da série rsrs. Um forte abraço

[sharanjeetsingh]

Question -- Why we just don't make another component and pass id to render all the post from database instead of using identifier in url end-point?

[vascogama]

a explicação é muito clara e fácil de entender request React e Firebase para próximo vídeo abraço from TIMOR-LESTE

[ThColinPereira]

Really enjoying this series! Do you have a udemy course? I'd definitely buy your course, and I'm sure others would too

[fredi]

Hi Pedro ! Your videos are awesome. Thank you for all the tips ! Obviouslly, i have a problem with useEffect and useState in this video. In my case, the useState is not updated et so, the title (for example) doesn't appear . Do you have a solution please. And why does it work for you ? Thank you again. Best regards from France !

[naylord]

Hi Pedro! thank you for all the amazing content!
One quick question, when I load a detail page for one ID, I see in the console log than the query runs multiple times, 10+ for each I enter a detail page.. Am I missing something?
Thank you in advance.

[jtaylor]

This all appeared to be working for me, but in the background something was not right: when I clicked on a post in the list of posts, the individual post was opened, but in terminal in VSCode and in the network tab in Chrome dev tools, the GET request is constantly being sent over and over - hundreds or thousands of times a minute. After investigation, I discovered this was known as an 'infinite loop' - and is obviously not OK in a production environment, running the GET request thousands of times a minute. I resolved it by adding an array as a dependency on the useEffect Hook, similar to the code used in the Home.js useEffect code, but also adding 'id' as a dependency in that array. I'm hoping this is correct - it appears to be having the right effect in that the GET request only runs once and the single post page still displays in the browser as intended. Code as follows:

useEffect(() => {
axios
.then((response) => {
setPostObject(response.data);
});
}, [id]);

[prateeksinghshekhawat]

Hey Man, I just watched your playlist on the blog using React Express and MySql.And I also want to add images while creating posts. Please make a video on that or just tell me how to do it. It's really urgent(will I share my mail id?)