part2 vite

Author: mluukkai

src/content/0/en/part0a.md

@@ -340,10 +340,7 @@ Despite changes <i>all the submitted exercises remain valid</i>, and the course
 
 Recent major changes
 
-- Part 2 (18th Jan 2023): Exercise numbering changed, the old 2.11-13. moved to the end of the part
-- Part 6 (30th Jan 2023): A new section on React Query, useReducer and React context replaced the section on Redux connect
-- Part 8 (5th Feb 2023): Backend updated to use Apollo Server 4.0
-- Part 9 (12th Feb 2023): Content clarified, Patientor example app structure refactored to a much simpler form
+- Parts 1 and 2 (11-14th August): Create React app replaced with Vite
 
 ### Expanding on a previously completed course
 

src/content/0/fi/osa0a.md

@@ -282,10 +282,7 @@ Kurssilla ei ole enää vuosittaisia versiota. Kurssi on siis käynnissä koko a
 Muutoksista huolimatta <i>kaikki jo tehdyt palautukset säilyvät voimassa</i>, eli voit jatkaa kurssia päivityksistä huolimatta normaaliin tapaan.
 
 Viimeaikaisia isompia muutoksia
-- Osa 2 (18.1.2023): Muutos tehtävien numeroinnissa, tehtävät 2.11-13. siirretty osan loppuun
-- Osa 6 (30.1.2023): Uusi luku aiheenaan React Query; useReducer ja React context korvasi Redux connect ‑luvun
-- Osa 8 (5.2.2023): Backend muutettu käyttämään Apollo Server ‑kirjaston versiota 4.0
-- Osa 9 (12.2.2023): Sisältöä tarkennettu, Patientor-esimerkkisovelluksen rakennetta yksinkertaistettu
+- Osat 1 ja 2 (11-14.8.2023): Create React app korvattu Vitellä
 
 ### Aiemmin suoritetun kurssin täydentäminen
 

src/content/1/en/part1a.md

@@ -15,7 +15,7 @@ The easiest way to get started by far is by using a tool called
 Let's create an application called <i>part1</i>, navigate to its directory and install the libraries:
 
 ```bash
-npm create vite@latest part -- --template react
+npm create vite@latest part1 -- --template react
 cd part1
 npm install
 ```
@@ -36,7 +36,7 @@ Open the browser and a text editor so that you can view the code as well as the
 
 ![](../../images/1/1-vite4.png)
 
-The code of the application resides in the <i>src</i> folder. Let's simplify the default code such that the contents of the file main.js looks like this:
+The code of the application resides in the <i>src</i> folder. Let's simplify the default code such that the contents of the file main.jsx looks like this:
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -46,7 +46,7 @@ import App from './App'
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 ```
 
-and file <i>App.js</i> looks like this
+and file <i>App.jsx</i> looks like this
 
 ```js
 const App = () => {
@@ -76,7 +76,7 @@ The course is currently (11 August 2023) being updated to use Vite. Some brands
 
 ### Component
 
-The file <i>App.js</i> now defines a [React component](https://react.dev/learn/your-first-component) with the name <i>App</i>. The command on the final line of file <i>main.js</i>
+The file <i>App.jsx</i> now defines a [React component](https://react.dev/learn/your-first-component) with the name <i>App</i>. The command on the final line of file <i>main.jsx</i>
 
 ```js
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
@@ -252,7 +252,7 @@ but when writing JSX, the tag needs to be closed:
 
 ### Multiple components
 
-Let's modify the file <i>App.js</i> as follows (NB: export at the bottom is left out in these <i>examples</i>, now and in the future. It is still needed for the code to work):
+Let's modify the file <i>App.jsx</i> as follows (NB: export at the bottom is left out in these <i>examples</i>, now and in the future. It is still needed for the code to work):
 
 ```js
 // highlight-start
@@ -626,7 +626,7 @@ For each web application for a series of exercises, it is recommended to submit
 
 <i>The application that we will start working on in this exercise will be further developed in a few of the following exercises. In this and other upcoming exercise sets in this course, it is enough to only submit the final state of the application. If desired, you may also create a commit for each exercise of the series, but this is entirely optional.</i>
 
-Use create-react-app to initialize a new application. Modify <i>main.js</i> to match the following
+Use create-react-app to initialize a new application. Modify <i>main.jsx</i> to match the following
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -636,7 +636,7 @@ import App from './App'
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 ```
 
-and <i>App.js</i> to match the following
+and <i>App.jsx</i> to match the following
 
 ```js
 const App = () => {
@@ -668,11 +668,11 @@ const App = () => {
 export default App
 ```
 
-and remove extra files (App.css, App.test.js, index.css, logo.svg, setupTests.js, reportWebVitals.js)).
+and remove extra files App.css and index.css, and the directory assets.
 
 Unfortunately, the entire application is in the same component. Refactor the code so that it consists of three new components: <i>Header</i>, <i>Content</i>, and <i>Total</i>. All data still resides in the <i>App</i> component, which passes the necessary data to each component using <i>props</i>. <i>Header</i> takes care of rendering the name of the course, <i>Content</i> renders the parts and their number of exercises and <i>Total</i> renders the total number of exercises.
 
-Define the new components in the file <i>App.js</i>.
+Define the new components in the file <i>App.jsx</i>.
 
 The <i>App</i> component's body will approximately be as follows:
 

src/content/1/en/part1c.md

@@ -179,7 +179,7 @@ const Hello = ({ name, age }) => {
 
 So far all of our applications have been such that their appearance remains the same after the initial rendering. What if we wanted to create a counter where the value increased as a function of time or at the click of a button?
 
-Let's start with the following. File <i>App.js</i> becomes:
+Let's start with the following. File <i>App.jsx</i> becomes:
 
 ```js
 const App = (props) => {
@@ -192,7 +192,7 @@ const App = (props) => {
 export default App
 ```
 
-And file <i>main.js</i> becomes:
+And file <i>main.jsx</i> becomes:
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -251,7 +251,7 @@ All of our components up till now have been simple in the sense that they have n
 
 Next, let's add state to our application's <i>App</i> component with the help of React's [state hook](https://react.dev/learn/state-a-components-memory).
 
-We will change the application as follows.  <i>main.js</i> goes back to
+We will change the application as follows.  <i>main.jsx</i> goes back to
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -261,7 +261,7 @@ import App from './App'
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 ```
 
-and <i>App.js</i> changes to the following:
+and <i>App.jsx</i> changes to the following:
 
 ```js
 import { useState } from 'react' // highlight-line

src/content/1/en/part1d.md

@@ -1163,7 +1163,7 @@ The application must display the total number of collected feedback for each cat
 
 Note that your application needs to work only during a single browser session. Once you refresh the page, the collected feedback is allowed to disappear.
 
-It is advisable to use the same structure that is used in the material and previous exercise. File <i>main.js</i> is as follows:
+It is advisable to use the same structure that is used in the material and previous exercise. File <i>main.jsx</i> is as follows:
 
 ```js
 import React from 'react'
@@ -1174,7 +1174,7 @@ import App from './App'
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 ```
 
-You can use the code below as a starting point for the <i>App.js</i> file:
+You can use the code below as a starting point for the <i>App.jsx</i> file:
 
 ```js
 import { useState } from 'react'
@@ -1310,7 +1310,7 @@ const App = () => {
 export default App
 ```
 
-Content of the file <i>main.js</i> is the same as in previous exercises.
+Content of the file <i>main.jsx</i> is the same as in previous exercises.
 
 Find out how to generate random numbers in JavaScript, eg. via a search engine or on [Mozilla Developer Network](https://developer.mozilla.org). Remember that you can test generating random numbers e.g. straight in the console of your browser.
 

src/content/1/fi/osa1a.md

@@ -14,7 +14,7 @@ Helpoin tapa päästä alkuun on [Vite](https://vitejs.dev/)-nimisen työkalun k
 Luodaan sovellus nimeltään <i>part1</i>, mennään sovelluksen sisältämään hakemistoon ja asennetaan sovelluksen käyttämät kirjastot:
 
 ```bash
-npm create vite@latest part -- --template react
+npm create vite@latest part1 -- --template react
 cd part1
 npm install
 ```
@@ -35,7 +35,7 @@ Avataan selan sekä tekstieditori siten, että näet koodin ja web-sivun samaan
 
 ![](../../images/1/1-vite4.png)
 
-Sovelluksen koodi on hakemistossa <i>src</i>. Yksinkertaistetaan valmiina olevaa koodia siten, että tiedoston <i>main.js</i> sisällöksi tulee:
+Sovelluksen koodi on hakemistossa <i>src</i>. Yksinkertaistetaan valmiina olevaa koodia siten, että tiedoston <i>main.jsx</i> sisällöksi tulee:
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -46,7 +46,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 
 ```
 
-ja tiedoston <i>App.js</i> sisällöksi
+ja tiedoston <i>App.jsx</i> sisällöksi
 
 ```js
 const App = () => (
@@ -72,7 +72,7 @@ Kurssia ollaan tällä hetkellä (11.8.2023) päivittämässä käyttämään Vi
 
 ### Komponentti
 
-Tiedosto <i>App.js</i> määrittelee nyt React-[komponentin](https://react.dev/learn/your-first-component) nimeltään <i>App</i>. Tiedoston <i>main.js</i> viimeisen rivin komento
+Tiedosto <i>App.js</i> määrittelee nyt React-[komponentin](https://react.dev/learn/your-first-component) nimeltään <i>App</i>. Tiedoston <i>main.jsx</i> viimeisen rivin komento
 
 ```js
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
@@ -248,7 +248,7 @@ mutta JSX:ää kirjoittaessa tagi on pakko sulkea:
 
 ### Monta komponenttia
 
-Muutetaan tiedostoa <i>App.js</i> seuraavasti (muista, että alimman rivin export jätetään <i>esimerkeistä</i> nyt ja jatkossa pois, niiden on kuitenkin oltava koodissa jotta ohjelma toimisi):
+Muutetaan tiedostoa <i>App.jsx</i> seuraavasti (muista, että alimman rivin export jätetään <i>esimerkeistä</i> nyt ja jatkossa pois, niiden on kuitenkin oltava koodissa jotta ohjelma toimisi):
 
 ```js
 // highlight-start
@@ -624,7 +624,7 @@ code .
 
 <i>Tässä tehtävässä aloitettavaa ohjelmaa kehitellään eteenpäin muutamassa seuraavassa tehtävässä. Tässä ja kurssin aikana muissakin vastaan tulevissa tehtäväsarjoissa ohjelman lopullisen version palauttaminen riittää. Voit toki halutessasi tehdä commitin jokaisen tehtävän jälkeisestä tilanteesta, mutta se ei ole välttämätöntä.</i>
 
-Luo Vitellä uusi sovellus. Muuta <i>main.js</i> muotoon
+Luo Vitellä uusi sovellus. Muuta <i>main.jsc</i> muotoon
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -634,7 +634,7 @@ import App from './App'
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 ```
 
-ja tiedosto <i>App.js</i> muotoon
+ja tiedosto <i>App.jsx</i> muotoon
 
 ```js
 const App = () => {
@@ -670,7 +670,7 @@ ja poista ylimääräiset tiedostot <i>App.css</i> ja <i>index.css</i> ja hakemi
 
 Koko sovellus on nyt ikävästi yhdessä komponentissa. Refaktoroi sovelluksen koodi siten, että se koostuu kolmesta uudesta komponentista: <i>Header</i>, <i>Content</i> ja <i>Total</i>. Kaikki data pidetään edelleen komponentissa <i>App</i>, joka välittää tarpeelliset tiedot kullekin komponentille <i>props:ien</i> avulla. <i>Header</i> huolehtii kurssin nimen renderöimisestä, <i>Content</i> osista ja niiden tehtävämääristä ja <i>Total</i> tehtävien yhteismäärästä.
 
-Tee uudet komponentit tiedostoon <i>App.js</i>.
+Tee uudet komponentit tiedostoon <i>App.jsx</i>.
 
 Komponentin <i>App</i> runko tulee olemaan suunnilleen seuraavanlainen:
 

src/content/1/fi/osa1c.md

@@ -178,7 +178,7 @@ const Hello = ({ name, age }) => {
 
 Toistaiseksi tekemämme sovellukset ovat olleet sellaisia, että kun niiden komponentit on kerran renderöity, niiden ulkoasua ei ole enää voinut muuttaa. Entä jos haluaisimme toteuttaa laskurin, jonka arvo kasvaa ajan kuluessa tai nappeja painettaessa?
 
-Aloitetaan seuraavasta rungosta. Tiedostoon <i>App.js</i> tulee:
+Aloitetaan seuraavasta rungosta. Tiedostoon <i>App.jsx</i> tulee:
 
 ```js
 const App = (props) => {
@@ -191,7 +191,7 @@ const App = (props) => {
 export default App
 ```
 
-Tiedoston <i>main.js</i> sisältö on:
+Tiedoston <i>main.jsx</i> sisältö on:
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -250,7 +250,7 @@ Tähänastiset komponenttimme ovat olleet siinä mielessä yksinkertaisia, että
 
 Määritellään nyt sovelluksemme komponentille <i>App</i> tila Reactin [state hookin](https://react.dev/learn/state-a-components-memory#meet-your-first-hook) avulla.
 
-Palautetaan <i>main.js</i> muotoon
+Palautetaan <i>main.jsx</i> muotoon
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -260,7 +260,7 @@ import App from './App'
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 ```
 
-ja muutetaan <i>App.js</i> muotoon:
+ja muutetaan <i>App.jsx</i> muotoon:
 
 ```js
 import { useState } from 'react' // highlight-line

src/content/1/fi/osa1d.md

@@ -1164,7 +1164,7 @@ Sovelluksen tulee näyttää jokaisen palautteen lukumäärä. Sovellus voi näy
 
 Huomaa, että sovelluksen tarvitsee toimia vain yhden selaimen käyttökerran ajan. Esim. kun sivu refreshataan, tilastot saavat hävitä.
 
-Kannattaa noudattaa samaa rakennetta kuin materiaalissa ja edellisessä tehtävässä, eli tiedoston <i>main.js</i> sisältö on seuraava:
+Kannattaa noudattaa samaa rakennetta kuin materiaalissa ja edellisessä tehtävässä, eli tiedoston <i>main.jsx</i> sisältö on seuraava:
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -1173,7 +1173,7 @@ import App from './App'
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 ```
 
-Muun sovelluksen voi tehdä tiedostoon <i>App.js</i>. Tiedoston sisältö voi olla aluksi seuraava:
+Muun sovelluksen voi tehdä tiedostoon <i>App.jsx</i>. Tiedoston sisältö voi olla aluksi seuraava:
 
 ```js
 import { useState } from 'react'
@@ -1307,7 +1307,7 @@ const App = () => {
 export default App
 ```
 
-Tiedoston <i>main.js</i> sisältö on sama kuin edellisissä tehtävissä.
+Tiedoston <i>main.jsx</i> sisältö on sama kuin edellisissä tehtävissä.
 
 Google kertoo, miten voit generoida JavaScriptilla sopivia satunnaisia lukuja. Muista, että voit testata esim. satunnaislukujen generointia konsolissa.
 

src/content/2/en/part2.md

@@ -8,7 +8,7 @@ lang: en
 
 Let's continue our introduction to React. First, we will take a look at how to render a data collection, like a list of names, to the screen. After this, we will inspect how a user can submit data to a React application using HTML forms. Next, our focus shifts towards looking at how JavaScript code in the browser can fetch and handle data stored in a remote backend server. Lastly, we will take a quick look at a few simple ways of adding CSS styles to our React applications.
 
-<i>Part updated 18th Jan 2023</i>
-- <i>Exercise numbering changed, the old 2.11-13. moved to the end of the part</i>
+<i>Part updated 14th August 2023</i>
+- <i>Create React App replaced with Vite</i>
 
 </div>