Explore the base web project we'll use to add routing syntax to.
- [Instructor] Since this course isn't about building a React project from scratch, we'll use a base web project that was built inside of another one of my courses, the React Interaction course. If you don't have access to the exercise files, feel free to create your own React project with a few components and follow along. If you do have access to it, go inside of the exercise files, click on resources, and then click on web. This is the base web project. What I'm gonna do is copy this, so Command + C and then paste it on my desktop like so.
Then what I'm gonna do is open that in VS Codes. Next, let's make sure we installed the dependencies for that project, so click on view, integrated terminal, and do an npm install. The next thing to notice, if you do this project in a few versions of React ahead of me, so if you're 16.5, or 17, or anything later, what you can do is basically create a new React project and copy the source folder completely in that project and you should be good to go.
If you see errors, just go to the errors just to make sure that you're not using anything that is deprecated or anything like that. So once we have the dependencies installed, we basically do an npm start. And this is the initial web project. Right now we have a list of cards of products so we have Vitamin Juice, Vitamin packs, so on and so forth. If we click on any of those, nothing happens for now but we'll work on that. Once you go over the menu here you can click on the menu and you'll see a brand new menu that we have here and we'll work on creating some routes for these links here.
So you can close it by clicking on close here, and we've got some nice animations from that course. Okay so we've got our initial project ready to go, let's move on.
- What is routing?
- How React Router can be used across different types of projects
- Web routing and native routing
- How to do URL params and dynamic routing
- Basic React Native routing
- Server-side rendering use cases
- Testing use cases