CBT Nuggets | How to Create Pages and Set Up Routes in a React App @cbtnuggets | Uploaded 1 year ago | Updated June 07 2023
CBT Nuggets trainer Shaun Wassell continues from an earlier video in his series on building a note-sharing app in React. This video is one portion of his full course on developing in the MERN stack. If what you see in this video about creating pages and setting up routes in a full-stack React app is helpful, you should check out the entire course at CBT Nuggets: How to Create a Full Stack React App: https://training.cbt.gg/b4d
There are many ways to organize your application while you develop. Shaun recommends that you divide your app into pages, components, and contexts, etc. — which is a function-based organization. A functional organization helps keep things straight in the beginning. But as you continue building out your app, you may want to switch to a feature-based organization.
A crucial part of app development is not trying to do too much at a time. Start by creating skeleton pages and route them to one another. Eventually you'll build up to functionality and intricacy, but start simple and build your way there.
To start, Shaun shows you how to build the three essential pages to start with for testing purposes: Notes, NotesDetail, NotFound. These will develop in complexity, but they're the right place to start. He goes on to connect them to one another via routes and implement automatic redirects.
00:00 – Introduction: thinking with what pages an application needs to run properly
0:30 – Small apps can be organized according to function rather than feature
1:20 – Creating the new pages in React for your application
2:10 – A skeleton structure for your new pages that will at least enable routing
3:35 – Adding routing to your pages
4:05 – Creating a new component that contains routing logic
4:25 – How to install and use the React router DOM package
5:20 – Displaying the pages in your route
5:55 – Defining your routing with Routes, paths and Switches
6:35 – How to connect pages using URL parameters
7:55 – How to finish the connections for your pages and then test the routes
9:20 – Setting up automatic redirects
👉 Watch this entire How to Create a Full Stack React App training course: https://training.cbt.gg/b4d
Not a CBT Nuggets subscriber? Start your free week: https://www.cbtnuggets.com/signup
New IT Training releases: https://training.cbt.gg/x85
-----------------
Connect with CBT Nuggets for the latest in IT training:
• Twitter - https://twitter.com/CBTNuggets
• Facebook - http://facebook.com/CBTNuggets
• Instagram - http://instagram.com/CBTNuggets
• LinkedIn - https://www.linkedin.com/company/cbt-nuggets
#react #reactrouter #mernstack #appbuilding #visualstudio #ittraining #cbtnuggets
CBT Nuggets trainer Shaun Wassell continues from an earlier video in his series on building a note-sharing app in React. This video is one portion of his full course on developing in the MERN stack. If what you see in this video about creating pages and setting up routes in a full-stack React app is helpful, you should check out the entire course at CBT Nuggets: How to Create a Full Stack React App: https://training.cbt.gg/b4d
There are many ways to organize your application while you develop. Shaun recommends that you divide your app into pages, components, and contexts, etc. — which is a function-based organization. A functional organization helps keep things straight in the beginning. But as you continue building out your app, you may want to switch to a feature-based organization.
A crucial part of app development is not trying to do too much at a time. Start by creating skeleton pages and route them to one another. Eventually you'll build up to functionality and intricacy, but start simple and build your way there.
To start, Shaun shows you how to build the three essential pages to start with for testing purposes: Notes, NotesDetail, NotFound. These will develop in complexity, but they're the right place to start. He goes on to connect them to one another via routes and implement automatic redirects.
00:00 – Introduction: thinking with what pages an application needs to run properly
0:30 – Small apps can be organized according to function rather than feature
1:20 – Creating the new pages in React for your application
2:10 – A skeleton structure for your new pages that will at least enable routing
3:35 – Adding routing to your pages
4:05 – Creating a new component that contains routing logic
4:25 – How to install and use the React router DOM package
5:20 – Displaying the pages in your route
5:55 – Defining your routing with Routes, paths and Switches
6:35 – How to connect pages using URL parameters
7:55 – How to finish the connections for your pages and then test the routes
9:20 – Setting up automatic redirects
👉 Watch this entire How to Create a Full Stack React App training course: https://training.cbt.gg/b4d
Not a CBT Nuggets subscriber? Start your free week: https://www.cbtnuggets.com/signup
New IT Training releases: https://training.cbt.gg/x85
-----------------
Connect with CBT Nuggets for the latest in IT training:
• Twitter - https://twitter.com/CBTNuggets
• Facebook - http://facebook.com/CBTNuggets
• Instagram - http://instagram.com/CBTNuggets
• LinkedIn - https://www.linkedin.com/company/cbt-nuggets
#react #reactrouter #mernstack #appbuilding #visualstudio #ittraining #cbtnuggets
