Build a Dynamic Avatar Component with React & TypeScript Tutorial (14 exercises)

Set up Application with Vite

Scaffold the project using Vite’s react-ts template and the yarn create vite command. You can find more information in the Vite docs here.

In your development environment, run yarn create vite my-app --template react-ts. This will create a new folder using yarn , and the react-ts template from Vite. I’m going to use the mv command to move everything from the my-app directory to my current directory.

Next, we’ll run yarn dev to start up the development server and see our application in the browser. You may notice my URL looks different from yours. That’s because I’m using a remote machine, so I’m forwarding the port from that machine to my local machine.

Now our basic scaffold is ready to go.


In your development environment, run yarn create vite my-app --template react-ts. That will scaffold out a new project in a folder called my-app. Now what I'm going to do is open my-app and select everything and move it to the root. I think it's OK that we'll replace the gitignore. You'll see everything move over. Now we can delete my-app. Great. Let's run yarn to install dependencies.

Now let's run yarn dev and make sure that our app starts up. Great. It's running locally on local host 5173. If I head over to my browser, I'll see that I have the Vite React TypeScript template running. If I click count, you'll see that it starts the increment. Now we have the project scaffold, and we're ready to go.