Introduction

This tutorial aims to help you understand how to utilize Vite with Vanilla JavaScript to develop modern web applications. You will learn how to set up a new project, write JavaScript code, and leverage Vite's fast development server.

By the end of this tutorial, you will:

1. Understand the basics of Vite and how it works with Vanilla JavaScript.
2. Know how to set up a new web development project using Vite.
3. Understand how to write and organize your JavaScript code in a Vite project.

Prerequisites:

• Basic knowledge of JavaScript.
• Familiarity with terminal commands.
• Node.js and npm installed on your machine.

Step-by-Step Guide

Vite is a build tool and development server created by Evan You, the original creator of Vue.js. It offers a faster and leaner development experience for modern web projects.

Setting up a new project

First, install create-vite globally using npm:

npm install -g create-vite

Next, create a new project:

create-vite my-project

Finally, navigate into the project directory and install the dependencies:

cd my-project
npm install

You now have a new Vite project ready to go.

Writing JavaScript code

In a Vite project, you can write Vanilla JavaScript in the main.js file located in the src directory. For example:

// src/main.js
console.log("Hello, Vite!");

Using the development server

You can start the Vite development server with the following command:

npm run dev

Now, if you open your browser and navigate to localhost:5000, you should see "Hello, Vite!" in the console.

Code Examples

Example 1 - Basic JavaScript in Vite

Here's a simple example of JavaScript code you could write in a Vite project:

// src/main.js

// A simple function to add two numbers
function add(a, b) {
  return a + b;
}

// Call the function and log the result
console.log(add(2, 3)); // Outputs: 5

Example 2 - DOM Manipulation

This example demonstrates how you can manipulate the DOM in a Vite project:

// src/main.js

// Select the body element
const body = document.querySelector('body');

// Create a new div element
const div = document.createElement('div');

// Set the div's text content
div.textContent = 'Hello, Vite!';

// Append the div to the body
body.appendChild(div);

When you run this code, you should see "Hello, Vite!" appear on your webpage.

Summary

In this tutorial, you've learned the basics of using Vite with Vanilla JavaScript. You've set up a new Vite project, written some JavaScript code, and used the Vite development server.

To continue learning about Vite, consider exploring its plugins and how to use them to enhance your development experience. The Vite documentation is a great place to start.

Practice Exercises

1. Write a JavaScript function that calculates the factorial of a number.
2. Write a JavaScript function that reverses a string.
3. Write a JavaScript function that fetches data from a public API and logs the result.

Try to solve these exercises on your own, then check the solutions below.

Solutions

1. Factorial function:

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5)); // Outputs: 120

1. Reverse string function:

function reverseString(str) {
  return str.split('').reverse().join('');
}

console.log(reverseString('Hello, Vite!')); // Outputs: '!etiV ,olleH'

1. Fetch data from API:

fetch('https://api.publicapis.org/entries')
  .then(response => response.json())
  .then(data => console.log(data));

Remember, practice is the key to mastering any programming concept. Keep experimenting and coding!