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, typograhical 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:
Familiarity with HTML, CSS, and modern JavaScript.
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.
Why Vite
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.
Dependencies are pre-bundled using esbuild (written in Go), which is 10 - 100x faster than JavaScript-based bundlers; as dependencies do not change, they can also be cached so that pre-bundling can be skipped altogether.
Source code is served over native ESM: source code often contains non-plain JavaScript that needs transforming (e.g. JSX, CSS) but not all needs to be loaded at the same time. The code needed gets served based on the browser routes (route-based code splitting).
These differences result in a faster experience when using Vite to initialise, update and build react applications.
Prerequisites
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:
v14.17.3
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:
8.3.0
Step 1: Creating a Vite Project
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:
create-vite@4.1.0
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:
create-vite@4.1.0
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:
create-vite@4.1.0
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:
$ npm create vite
Need to install the following packages:
create-vite@4.1.0
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: >> - Use arrow-keys. Return to submit.
JavaScript
> TypeScript
JavaScript + SWC
TypeScript + SWC
After successfully selecting the right template, you should have this:
$ npm create vite
Need to install the following packages:
create-vite@4.1.0
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.
Step 2 - Starting the Dev Server
Here you'll start the development server with the following command:
$ npm run dev
This runs 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
> vite-article-project@0.0.0 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 npm install.
Conclusion
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.