Part 5 of The MERN Stack Project Series - This video focuses on the building the React app for the frontend of our MERN Stack. We will set up the basic React app and structure the routes for the app with React Router. This tutorial is not for beginners. If you are a beginner, check out my full courses all in one playlist here: ruclips.net/p/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm
I am from Bangladesh. It's a country in Asia. I am following your course as I have completed both node & react js courses in an IT company. I'm also working as a frontend developer in one of the best company in our country. I am following this course because from my experience there is no other playlist on the internet that has so clear concepts and such magnificent codebase. I am following this course to clear my concept for the role based access control over the components as I am currently engaged in a similar project. I have a request to you Dave. You are one of the best. I wish this playlist that you have provided stays free as long as it is. Again Thank you so much for having our backs.
I have learning coding from RUclips past 3 years , I have never came across such a channel like yours where concept is clear and precise, undoubtedly you are a best teacher for js on internet now, can you make videos on dsa in js
Not gonna lie.. I wasn't familiar with react router. Web Dev Simplified has a 45 minute course on it in his usual speedrun style. Came back here and continued no worries! I love how each youtuber has a different teaching style that's worthy for different cases.
Your teaching style is very thought out and clear. I have a doubt in initial Routing setup. You pass the App component as the element prop to the Route with path='/*' which matches all paths. Is it basically the same as doing the below. Is there any caveats to the below code compared to your implementation ?
Thanks! Complete preference as the compiler will still achieve the same result. I am writing JSX to be rendered, but there is also a lot of JS in React. Found a discussion here: stackoverflow.com/questions/46169472/reactjs-js-vs-jsx
Hi. I really like your videos, there are quite straightforward and clear. However, what could be the possible reason of an error 404 page not found every time I refresh the page. I mean everything is working except this matter. Hope you can help me. Thanks. more power
Wow great structure keep it up 👍 I always watch your videos and learn lot’s new things.. love from 🇮🇳 In next video please make protected routing with login and welcome page
Loving doing my first course in real time with you :D gonna take a slight detour and watch your Redux videos now! Just one question: what is the reason for breaking out the content for certain components into its own variable? Thanks for all the brilliant education!
Glad to hear that, Kevin! Good question - that is a habit I've tried to keep after I created the Redux course. I saw it throughout the Redux docs and decided it was likely a good idea. I've also been trying to remember to refactor and keep logic separate from the render function.
hi Dave, could you please make a tutorial for a DEV OPS things like: github actions, docker, aws, how to make environment setup like DEV and uat in the cloud?
Hi Dave, I just wanted to ask, having almost completed the series, I haven't understood, or I might just missed it entierly, but are we using some specific architecture for the front end of this app ? Thanks in advance :)
@@DaveGrayTeachesCode Thanks for your response ! To be honest I was expecting a name like flux, because from what I read redux is based on Flux. Thanks again :D
@@DaveGrayTeachesCode Awesome, all your subscribers will be waiting for it. We already know that it will be very interesting, and a great step to start in Mobile development, keeping our knowledge of React.
Hi Dave As for the react structure, I always use folder specific for redux which in this case it will have a slice and service inside folder of features,app, component folder, constants, hooks utility, and finally container or pages folder. What do you think about this structure ?? Thanks
CORS is configured in an earlier video in this series. Links in description, too, but here's the playlist: ruclips.net/p/PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V
![FNAF vs TF2 - Episode 2 [SFM]](http://i.ytimg.com/vi/z5b3V2-VLb0/mqdefault.jpg)
Part 5 of The MERN Stack Project Series - This video focuses on the building the React app for the frontend of our MERN Stack. We will set up the basic React app and structure the routes for the app with React Router. This tutorial is not for beginners. If you are a beginner, check out my full courses all in one playlist here: ruclips.net/p/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm
I'm Walid from Tunisia, Thank you Dave for this precious cours!
Dave, I'm from Bulgaria and you are the greatest RUclips teacher. Thanks for all your content.
Thank you for the kind words! 🙏
I am from Bangladesh. It's a country in Asia.
I am following your course as I have completed both node & react js courses in an IT company. I'm also working as a frontend developer in one of the best company in our country.
I am following this course because from my experience there is no other playlist on the internet that has so clear concepts and such magnificent codebase.
I am following this course to clear my concept for the role based access control over the components as I am currently engaged in a similar project.
I have a request to you Dave. You are one of the best. I wish this playlist that you have provided stays free as long as it is. Again Thank you so much for having our backs.
Hello to Bangladesh! 👋
I have learning coding from RUclips past 3 years , I have never came across such a channel like yours where concept is clear and precise, undoubtedly you are a best teacher for js on internet now, can you make videos on dsa in js
Thank you for the kind words and the request! I do want to cover DSA in the future.
Not gonna lie.. I wasn't familiar with react router. Web Dev Simplified has a 45 minute course on it in his usual speedrun style. Came back here and continued no worries! I love how each youtuber has a different teaching style that's worthy for different cases.
Right on!
excellent series, more captivating than game of thrones.. thank you
Glad you like it! And wow, there are no dragons in this code 😆
You are absolutely a great teacher ❤️
Thank you for the kind words! 💯
Thanks so much Dave! Really enjoying this tutorial series.
Glad to hear it! 💯
Very useful tutorial about feature-based file structure and routing with v6. Thanks, Dave. Спасибо большое, Дэйв!
Glad it was helpful!
Damn, the series is going really awesome, I will follow it after i am done with my institute project 😅
Thank you for the amazing content 🚀
You're welcome, Siddiq! Thank you for the support! 💯
Little bit harder but very good knowledge from Your side
My Respect Teacher Mr. Dave Gray Sir
Sir I have a Doubt that's
I want to Become a Back-end Engineer Should I learn the python language ?? Right Now ??
Your teaching style is very thought out and clear. I have a doubt in initial Routing setup. You pass the App component as the element prop to the Route with path='/*' which matches all paths. Is it basically the same as doing the below. Is there any caveats to the below code compared to your implementation ?
Thank you very much Sir ❤️
You're welcome!
what's the point of using in app.js
We need a Nextjs series just like this :)
I am planning on creating one, too! Thanks for the request! 💯
Hi for me the text is coming at the end but background image is not showing?What could be the problem?
Dave, great course. quick question.... Is there a reason you are not using .jsx?
Thanks! Complete preference as the compiler will still achieve the same result. I am writing JSX to be rendered, but there is also a lot of JS in React. Found a discussion here: stackoverflow.com/questions/46169472/reactjs-js-vs-jsx
Hi. I really like your videos, there are quite straightforward and clear. However, what could be the possible reason of an error 404 page not found every time I refresh the page. I mean everything is working except this matter. Hope you can help me. Thanks. more power
Wow great structure keep it up 👍 I always watch your videos and learn lot’s new things.. love from 🇮🇳 In next video please make protected routing with login and welcome page
Thank you, Zahid! I'll be adding the auth and protected routes after we confirm the app is functioning as we want with all CRUD operation requests. 🚀
Loving doing my first course in real time with you :D gonna take a slight detour and watch your Redux videos now! Just one question: what is the reason for breaking out the content for certain components into its own variable? Thanks for all the brilliant education!
Glad to hear that, Kevin! Good question - that is a habit I've tried to keep after I created the Redux course. I saw it throughout the Redux docs and decided it was likely a good idea. I've also been trying to remember to refactor and keep logic separate from the render function.
Best tutorial
Thank you!
hi Dave, could you please make a tutorial for a DEV OPS things like: github actions, docker, aws, how to make environment setup like DEV and uat in the cloud?
Great request! You list several topics here all worth covering 💯
@@DaveGrayTeachesCode thank you so much for everything i learn a lot from you hehe
Very useful tutorial thank you
You are welcome!
Hi Dave,
I just wanted to ask, having almost completed the series, I haven't understood, or I might just missed it entierly, but are we using some specific architecture for the front end of this app ?
Thanks in advance :)
React with React Router and eventually an RTK Query API layer for the frontend.
@@DaveGrayTeachesCode Thanks for your response ! To be honest I was expecting a name like flux, because from what I read redux is based on Flux. Thanks again :D
Are you interested in make some series about React-Native & Expo in the future? Or you only want to teach web dev?
Good question! I want to cover React Native in the future 🚀 It will not be in the immediate future but I hope to do so eventually.
@@DaveGrayTeachesCode Awesome, all your subscribers will be waiting for it. We already know that it will be very interesting, and a great step to start in Mobile development, keeping our knowledge of React.
Hi Dave
As for the react structure, I always use folder specific for redux which in this case it will have a slice and service inside folder of features,app, component folder, constants, hooks utility, and finally container or pages folder.
What do you think about this structure ??
Thanks
Sounds solid. There are many ways to organize. For this series, I stuck with the general structure found in the Redux docs.
HI dave how did you connect both front end and backend
i am getting a cors issue
CORS is configured in an earlier video in this series. Links in description, too, but here's the playlist: ruclips.net/p/PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V
Bro react-router -dom upgraded from 6.2 to 6.4 the entire app.js page is changes now
what a hassle it is showing no routes matched
Technology keeps moving. You can learn the changes or just use the version listed in the package.json for the series.
have you solve this? @sudhir
@@waziee no I am using 6.3
@@sudhirkalivarapu97 rn i am using router-dom ^6.5.0. no problem no changes to the coding. just make sure you installed react-router-dom
@@waziee then I will try 6.5.0 now
Awesome👍👍👍 u
Thank you, Dharmesh!
❤❤❤
{2023-02-26}, {2023-03-22}