# Vite With React Template

Hello Fellow Codenewbies 👋,

I am still in the beginning phase of learning React.
<br>
So I often run `create-react-app` to create a new project before coding along with a tutorial or to create a mini-project.
<br>
It takes a while for me to wait for the `create-react-app` to finish installing its dependencies. 
<br>
And afterward, I need to delete some folders, files, and lines of code that I don't need for a beginner's project.

One day, I was trying out TailwindCSS.
<br>
From this "try-out day" and through some rabbit holes, I found out about [Vite](https://vitejs.dev/).

## What Is Vite?

Vite is a no-bundler alternative to webpack.
<br>
Before, it only worked with Vue.js since it was made by [Evan You](https://www.linkedin.com/in/evanyou), the creator of Vue.js.
<br>
But now, Vite also works with vanilla Javascript and other frontend frameworks, including React.
<br>
Vite provides React's template and the basic dependencies; `react` and `react-dom`.
<br>
And it will install those dependencies after we run `npm install` or `yarn`.

## Install Vite

To install Vite with NPM:

```bash
npm init @vitejs/app
``` 

And with Yarn:

```bash
yarn create @vitejs/app
``` 

Then, do the following steps:

1. Enter the project name.
![npm-init.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1617712976141/QE02Xi8zD.jpeg)

2. Select the framework template of the project.
![framework-template.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1617713086971/nXUSGOa9p.jpeg)

3. Install the dependencies and run the application.

  With NPM:

  ```bash
  cd project-name
  npm install
  npm run dev
  ``` 

  With Yarn:

  ```bash
  cd project-name
  yarn
  yarn dev
  ``` 

We can also specify the project name and the template we want to use in one command line.

With NPM (version 7+):

```bash
npm init @vitejs/app project-name -- --template react
``` 

✏ **Note:**
<br>
An extra double dash (--) before `--template` is needed in `npm` version 7 and above. If we use the version below 7, we don't need to add this double dash.

With Yarn:

```bash
yarn create @vitejs/app project-name --template react
``` 

Then install the dependencies as written in step number 3 above.

## Vite vs `create-react-app`

### Installing Duration

I'm pleased with how fast Vite is installing React's basic dependencies.
<br>
Again, since I am still learning the basics of React, these dependencies are all I need for my projects.
<br>
Besides, I can add more packages later on when I need one.

In total, it took **144.43s** (2.4 minutes) to install Vite, while it took **788.50s** (13 minutes) to install create-react-app.
<br>
*Side note: I am using Windows 10 if that makes any difference*.

### First Render

After I ran `yarn start`, it took about **1.5 minutes** for `create-react-app` to render the React template onto the page. 
<br>
[Click here](https://www.loom.com/share/ef862de1d5e44d1fa981ecbe48e03b2b) to see the demo video.

While with Vite, after I ran `yarn dev`, it took about **20 to 25 seconds** to render the React template onto the page.
<br>
[Click here](https://www.loom.com/share/1621eb9284fa4831b5aaac010fb063b4) to see the demo video.

## Conclusion

I had a great experience with Vite.
<br>
I prefer using Vite rather than `create-react-app` for my basic React projects based on the run time.

Thank you for reading! 😄
<br>
Last but not least, you can find me on [Twitter](https://twitter.com/AdiatiAyu). Let's connect! 😊

---

**Note:**
<br>
This article is one of Hashnode Bootcamp III assignments from Sam Julien's talk, [The Counterintuitive Secret to Shipping Better Articles Faster](https://www.youtube.com/watch?v=DIG8GGg-PXw).