1. Introduction

In this tutorial, we will set up a Preact/Vite project. Preact is a fast, lightweight JavaScript library for building user interfaces, similar to React but with a smaller footprint. Vite is a build tool that provides a faster and leaner development experience for modern web projects. By the end of this tutorial, you will have a solid understanding of how to create a new project using these technologies.

You will learn:

• How to initialize a new Vite project
• How to integrate Preact into a Vite project

Prerequisites:

• Basic understanding of JavaScript
• Node.js and NPM installed on your computer

2. Step-by-Step Guide

2.1. Installing Vite

First, you need to install create-vite, a scaffolding tool for Vite projects, by running the following command in your terminal:

npm init @vitejs/app

2.2. Creating a Vite/Preact Project

After the installation, you will be prompted to provide a project name and select a template. Choose the preact template:

? Project name: my-preact-app
? Select a template: (Use arrow keys)
  vanilla
  vue
❯ preact
  react
  lit-element

Then, navigate into your new project folder:

cd my-preact-app

2.3. Installing Dependencies

Install the project dependencies by running:

npm install

2.4. Running the Project

You can start the development server by running:

npm run dev

Your Preact/Vite project should now be running at http://localhost:5000.

3. Code Examples

Your main application component is defined in src/App.js, here’s what it looks like:

import { h } from 'preact'
import { useState } from 'preact/hooks'
import logo from './logo.png'

export default function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={() => setCount((count) => count + 1)}>
          Click me
        </button>
        <p>Count: {count}</p>
      </header>
    </div>
  )
}

This main component displays a logo, a button that increments a counter, and the current count state.

4. Summary

In this tutorial, we have set up a Preact/Vite project. We learned how to initialize a new Vite project and integrate Preact into it.

Next steps could include learning more about Preact's features, such as its hooks API and component lifecycle methods. For further reading, check out the official Preact documentation and the official Vite documentation.

5. Practice Exercises

Exercise 1: Modify the App component to display a list of 5 items of your choice.

Solution:

export default function App() {
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
  return (
    <div className="App">
      <header className="App-header">
        <ul>
          {items.map(item => <li>{item}</li>)}
        </ul>
      </header>
    </div>
  )
}

Exercise 2: Create a new component that accepts a prop and displays it. Use this component in the App component.

Solution:

function Greeting({ name }) {
  return <p>Hello, {name}!</p>
}

export default function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Greeting name="Preact" />
      </header>
    </div>
  )
}

Keep practicing by creating more components and experimenting with Preact's features!