Update create-vite intsructions in part1a

vejol · vejol · commit ff8f5b60dd0f · 2025-10-03T10:59:54.000+03:00
diff --git a/src/content/1/en/part1a.md b/src/content/1/en/part1a.md
@@ -11,22 +11,26 @@ We will now start getting familiar with probably the most important topic of thi
 
 The easiest way to get started by far is by using a tool called [Vite](https://vitejs.dev/).
 
-Let's create an application called <i>introdemo</i>, navigate to its directory and install the libraries:
+Let's create a new application using the <i>create-vite</i> tool:
 
 ```bash
-# npm 6.x (outdated, but still used by some):
-npm create vite@latest introdemo --template react
-
-# npm 7+, extra double-dash is needed:
-npm create vite@latest introdemo -- --template react
+npm create vite@latest
 ```
 
+Let's answer the questions presented by the tool as follows:
+
+![create-vite tool selection view, where the project is named part1, the framework is React, the variant is JavaScript, and all other questions are answered with No](../../images/1/1-create-vite.png)
+
+We have now created an application named <i>part1</i>. The tool could have also installed the required dependencies and started the application automatically if we had answered "Yes" to the question "Install with npm and start now?" However, we will perform these steps manually so we can see how they are done.
+
+Next, let's move into the application's directory and install the required libraries:
+
 ```bash
-cd introdemo
+cd part1
 npm install
 ```
 
-The application is started as follows
+The application is started as follows:
 
 ```bash
 npm run dev
@@ -87,7 +91,7 @@ By default, the file <i>index.html</i> doesn't contain any HTML markup that is v
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>introdemo</title>
+    <title>part1</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/content/1/fi/osa1a.md b/src/content/1/fi/osa1a.md
@@ -11,10 +11,21 @@ Alamme nyt tutustua kurssin ehkä tärkeimpään teemaan, [React](https://react.
 
 Helpoin tapa päästä alkuun on [Vite](https://vitejs.dev/)-nimisen työkalun käyttö.
 
-Luodaan sovellus nimeltään <i>part1</i>, mennään sovelluksen sisältämään hakemistoon ja asennetaan sovelluksen käyttämät kirjastot:
+Luodaan uusi sovellus <i>create-vite</i>-työkalun avulla:
+
+```bash
+npm create vite@latest
+```
+
+Vastaillaan työkalun esittämiin kysymyksiin seuraavasti:
+
+![create-vite-työkalun valintanäkymä, jossa valitaan projektin nimeksi part1, frameworkiksi React, variantiksi JavaScript ja muihin kysymyksiin vastataan kieltävästi](../../images/1/1-create-vite.png)
+
+Loimme siis <i>part1</i>-nimisen sovelluksen. Työkalu olisi voinut myös asentaa tarvittavat riippuvuudet ja käynnistää sen jälkeen sovelluksen automaattisesti, jos olisimme vastanneet myöntävästi kysymykseen "Install with npm and start now?" Teemme vaiheet nyt kuitenkin manuaalisesti, jotta pääsemme näkemään, miten ne tehdään.
+
+Siirrytään sovelluksen sisältämään hakemistoon ja asennetaan sovelluksen käyttämät kirjastot:
 
 ```bash
-npm create vite@latest part1 -- --template react
 cd part1
 npm install
 ```
@@ -79,7 +90,7 @@ Tiedosto <i>index.html</i> on headerin määrittelyjä lukuun ottamatta oleellis
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>part1</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/content/images/1/1-create-vite.png b/src/content/images/1/1-create-vite.png
