Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
In this tutorial, we will create the React.js App Project for the frontend of our full-stack MERN Stack Project. React is the R in the MERN Stack with Node.js (N), Express.js (E) and MongoDB (M) completing the stack.
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React & Redux: https://bit.ly/AdvReactDev
- The Complete Node.js Developer: https://bit.ly/CompleteNodeJS
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
Subscribe https://bit.ly/3nGHmNn
Course Updates https://courses.davegray.codes/
Discord https://discord.gg/neKghyefqh
Buy Me A Coffee https://www.buymeacoffee.com/davegray
Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
All Resources for this MERN Stack Project: https://github.com/gitdagray/mern_stack_course
Playlist for this MERN Stack Project Series: https://bit.ly/3Sn4EaI
React.js App Project | MERN Stack Tutorial
(00:00) Intro
(00:12) Welcome
(00:23) Suggested Pre-Requisites
(00:53) MERN Frontend
(01:39) Starter Code
(02:52) User Stories
(03:46) Early Decisions: State, Structure, Routing
(04:40) Install React Router
(05:00) Apply React Router to index.js
(06:29) Apply Basic Routing to App.js
(08:56) Public Routes
(12:08) Nested Dash Routes
(22:51) File Structure
(24:13) Dash Welcome
(27:54) Notes and User Routes
(31:02) Routing Hierarchy Review
(32:44) Running the app
Suggested Pre-requisites for this MERN course:
Node.js for Beginners full course: https://youtu.be/f2EqECiTBL8
React JS for Beginners full course: https://youtu.be/RVFAyFWO4go
Redux Toolkit for Beginners full course: https://youtu.be/NqzdVN2tyvQ
React Login Playlist: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd
Tutorial References:
React Router v6 Docs: https://reactrouter.com/docs/en/v6
FontAwesome with React: https://fontawesome.com/v6/docs/web/use-with/react/
Was this React MERN Stack tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#mern #stack #react