In this articles series, whose release will probably span several weeks or months, I'll be explaining how to write standard HTML elements - buttons, input elements, lists, typographical elements etc - as custom components in React and TypeScript. The aim is to help you get comfortable with writing React components with TypeScript. So this tutorial assumes:
Basic knowledge of React
Most developers default to Create React App (CRA) as a build tool for creating new projects in react and setting up a development server. It offers a modern build setup without any configuration.
Create React App runs on webpack under the hood, which bundles the entire application before it can be served. Thus, in a large codebase, it takes more time to get the application running and takes a long time before file changes reflect in the browser.
Unlike CRA, Vite doesn't build the entire application before serving it up. It splits the application modules into two parts: dependencies and source code.
These differences result in a faster experience when using Vite to initialise, update and build react applications.
For the setup, you need to install Node.js version 14.18+, 16+ according to the Vite documentation. But at the time of writing this guide the version on my machine was 14.17.3 and it worked fine. You can check the version you installed by running the following command in the terminal:
$ node -v
The output should look like this:
But if you get a
command not found error (or a similar phrase), please make sure Node.js is installed before proceeding.
You also need the Node package manager (NPM) which you get by default with Node.js. So you can confirm from the terminal with the command:
$ npm -v
The output should look like this:
You'll create a new React project using Vite from the command line in this step. Run the following command from the terminal:
$ npm create vite
If you've never used Vite on your machine before, you should get a prompt asking whether you want to install create-vite: a tool to quickly start a project from a basic template for popular frameworks.
$ npm create vite Need to install the following packages: firstname.lastname@example.org OK to proceed? (y)
Follow the prompt by clicking Enter. Then you should be asked to enter a name for the project (this tutorial will use
react-typescript-vite as the example name):
$ npm create vite Need to install the following packages: email@example.com OK to proceed? (y) ? Project name: » vite-project
After entering your project name, Vite will prompt you to select a framework (you'll need to select React):
$ npm create vite Need to install the following packages: firstname.lastname@example.org OK to proceed? (y) ? Project name: » react-typescript-vite ? Select a framework: >> - Use arrow-keys. Return to submit. > Vanilla Vue React Preact Lit Svelte Others
Then you'll need to select a variant. For this setup we need TypeScript:
After successfully selecting the right template, you should have this:
$ npm create vite Need to install the following packages: email@example.com OK to proceed? (y) ? Project name: » react-typescript-vite ? Select a framework: >> - Use arrow-keys. Return to submit. > Vanilla Vue / Select a framework: >> React / Select a variant: TypeScript Scaffolding project in C:\...\react-typescript-vite... Done. Now run: cd react-typescript-vite npm install npm run dev
Now switch to the project directory and install the project dependencies with
npm install. As an alternative, you can directly specify the project name and the template you want to use via additional command line options.
npm create vite@latest react-typescript-vite -- --template react-ts
This would create the project in a new directory that will be called react-typescript-vite, just as above. But if you want it in the current directory, then use:
npm create vite@latest . -- --template react-ts
You'll have to install the dependencies too after doing the steps in one command.
Here you'll start the development server with the following command:
$ npm run dev
vite behind the scenes. You could have a look at the script
dev in package.json. If everything goes well, you should get something like this:
$ npm run dev > firstname.lastname@example.org dev > vite Port 5173 is in use, trying another one... VITE v4.1.4 ready in 1109 ms ➜ Local: http://127.0.0.1:5174/ ➜ Network: use --host to expose ➜ press h to show help
Next, Ctrl + Click on the local URL
http://127.0.0.1:5174/ and you will see the app running on the browser. If you're getting an error message like this:
'vite' is not recognised as an internal or external command, operable program or batch file.
Then you've probably not installed the dependencies, so please do so with
In this episode, we introduced Vite and discussed its advantages over Create React App. We also covered the steps to set up a React TypeScript development environment using Vite. In the next chapter, we will write the first custom component.