Getting started with React Typescript Vite: new project, examples, folder structures

There are so many ways to start a React project. In this post, we'll break down how to create a new React Typescript project using the modern build tool Vite.

1. Check the tools you are using and their versions

For our project, we'll be using a Node.js environment, the pnpm package manager, and the vite build tool, the versions of which are shown below. We'll be working on MacOS, but it should work on Windows as well.

2. Creating a new project with vite

vite supports the create command of any package manager. So you can run the following command to create a new project without a global installation.

• If you are using npm, npm create vite@latest.
• If using yarn, yarn create vite.
• Using pnpm, pnpm create vite.

As you type the commands, you'll be prompted step by step for the name of your project, the libraries you're using, and the language you're using. Entering choices for each question will create a new project based on the corresponding template.

First enter a project name and type

After selecting react from the list of libraries,

Select Typescript + SWC as language (if you need to use Babel, select Typescript) This will create a new project.

SWC is a modern JS/TS development tool written in Rust that is said to compile 20x to 70x faster than Babel, which was previously responsible for React development. It also has several other advantages such as WebAssembly support and Jest performance improvements.

Open the created project in VScode. The folder structure will look like this

Now type the command [package_manager_name] install to install the dependency package written in package.json. When the installation is finished, you should see a screen like the one below.

Result:

If any of the packages are version upgradeable, upgrade to the latest version as shown above.

• If you are using npm, run npm update.
• With yarn, yarn upgrade.
• With pnpm, pnpm upgrade.

Result of execution:

Finally, run the vite development server with the command [package_manager_name] run dev.

Run the result:

If you visit this URL in a web browser, you will see the sample page.

Now you have created a basic project!

3. Describe the directories and files included in the template

When you create a project from a template, you'll notice that several directories and files are already created for you. This saves you the trouble of creating them from scratch. However, it's important to understand what each one does so you can continue developing, so let's take a look at them one by one.

3.1. Packages

• node_modules/ : This is the directory where all the dependency packages used by this project are installed.

• package.json : A basic configuration file containing information such as the name of this project, version, module type, commands, and a list of the dependency packages it uses.

3.2. Web Application Related

• src/ : A directory containing all the source code, including the .tsx files that make up the web application.

• public/ : This directory contains all static files such as images, fonts, etc. used by the web application.

• dist/ : This is the directory created when you run a build with the [package_manager_name] run build command. After compiling, bundling, etc., this is where the actual deployable files are located.

• index.html : The .html file that the web application is based on. The React application you build will be rendered through this file.

3.3. Configuration files

• .gitignore: A list of directories and files in your project that Git will exclude. With the exception of source code and certain configuration files, most files don't need or want to be versioned, so we put them in this file.

• package-lock.json, yarn.lock, pnpm-lock.yaml: The lock files for each package manager. These files keep track of the exact installed versions of the packages you have installed and the packages they depend on, helping everyone in the project develop in the same environment.

• tsconfig.json: This is the configuration file for the TS compiler, which is responsible for various settings such as what JS version to compile to, what directory to compile from, etc. Primarily it targets .ts files that work in the browser.

• tsconfig-node.json : Configuration file for the .ts file that runs in the Node.js runtime, primarily. It is created to set up the Node environment in which vite runs.

• vite.config.ts : A file that can be configured regarding vite's build process, development server, etc.