Setting Up a React/Vite Project

Tutorial 3 of 5

1. Introduction

Goal of the tutorial: This tutorial aims to guide you through the process of setting up a new React/Vite project. This includes installing the necessary dependencies and configuring the project for development.

Learning objectives: By the end of this tutorial, you will be able to set up a React/Vite project, understand how to use Vite with React, and become familiar with the project structure.

Prerequisites: Before starting, you should have a basic understanding of React and Node.js. You should also have Node.js and npm installed on your computer.

2. Step-by-Step Guide

Installing Vite

To start, we'll need to install Vite globally on your machine. Vite is a modern front-end build tool created by Vue.js creator Evan You. It provides a faster and leaner development experience for modern web projects. Install it using npm:

npm install -g create-vite

Creating a New Project

Once Vite is installed, you can create a new project with the following command:

create-vite my-react-project --template react

The --template react part is specifying that we want to create a React project.

Installing Dependencies

Navigate to your project directory and install dependencies by running:

cd my-react-project
npm install

Starting the Development Server

Start the development server by running:

npm run dev

3. Code Examples

The project structure will look like this:

my-react-project
├── index.html
├── package.json
├── src
│   ├── App.jsx
│   └── main.jsx
└── vite.config.js

index.html:

This is the main HTML file that includes your React application.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="/src/main.jsx"></script>
</body>
</html>

main.jsx:

This is the entry point for your React app. Here, we're rendering the App component into the root div in our HTML.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

4. Summary

In this tutorial, we've walked through setting up a new React/Vite project. We installed Vite, created a new project, installed dependencies, and started the development server. We also explored the project structure and important files.

For further learning, try modifying the App.jsx file to create your own React components. Also, explore more about Vite and its features.

5. Practice Exercises

Exercise: Modify the App.jsx file to display a list of items. Each item should be a React component.

Solution:

import React from 'react'

const Item = ({ name }) => <li>{name}</li>

const App = () => {
    const items = ['Item 1', 'Item 2', 'Item 3'].map((item, index) =>
        <Item key={index} name={item} />
    )

    return <ul>{items}</ul>
}

export default App

Exercise: Add CSS to your project. Create a new file style.css in the src directory and import it in your main.jsx.