[00:00] The quickest way to start with TANstackRouter is to run npm create, which is an alias for npm-init. And here comes the tanstack and slash router, the package name. And here, after the second at, we're declaring what is the version we're going to use the latest. So I'm going to use the default name for the package, I'm going to use vt as the bundler, vscode as the IDE and yes, after generating the project I want vscode to open. So here I'm waiting for dependencies to be installed and the project to be built and everything has been correctly installed so let's take a look at what we have.
[00:37] VS Code, dist, node modules, src and a couple of files. So here in packet.json we can see that besides React itself there is the TempStack router plugin for Vite as well as the React plugin for Vite. There is also TempStack React router and the router dev tools. So we're going to run the npm run dev command but before we do that let's first take a look at what the SRC has. So first and foremost, there is a main TSX file, which is going to execute the whole application.
[01:12] So what we can see here is that there is a new router being created. There is also a declare module tanstack slash react router which is going to provide lots of type safety routing related features. And finally here we're going to use the native react-dom dot create root of root element just using an existing element that has the app, the one that is existing here in index.html and this is the div placeholder for our application. So main.tsx file is the main file that we're going to use. So what is root.tree.gen.ts file?
[01:53] Now it's very important that this file is being automatically generated and regenerated by 10-stack router. We are not supposed to make any changes to this file whatsoever because whenever we change something to our root files within our application this file will get overwritten. Now don't worry this is not going to be any kind of a hassle and it's actually going to be extremely useful. By the way, you can also see that 10stack scaffold was asking me which IDE am I going to use and as you can see there is this nice icon saying that this file is locked for being overwritten. So if we take a look at .vscode and .settings, we will see that there is a watcher exclude, there is a search exclude, and there is a read-only include for this specific file.
[02:45] So that even from the tooling perspective and developer experience perspective, we are safe that it's pretty much impossible. Here I'm just typing some keys on my keyboard and it's impossible to overwrite this file.
