Merge branch 'source' into source

Author: mluukkai

src/content/0/en/part0a.md

@@ -340,7 +340,7 @@ Despite changes <i>all the submitted exercises remain valid</i>, and the course
 
 Recent major changes
 
-- Parts 1-3 (11-14th August): Create React app replaced with Vite
+- Parts 1-5 (11-17th August): Create React app replaced with Vite
 
 ### Expanding on a previously completed course
 

src/content/0/fi/osa0a.md

@@ -282,7 +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
-- Osat 1-3 (11-14.8.2023): Create React app korvattu Vitellä
+- Osat 1-5 (11-14.8.2023): Create React app korvattu Vitellä
 
 ### Aiemmin suoritetun kurssin täydentäminen
 

src/content/1/en/part1a.md

@@ -66,12 +66,19 @@ The files <i>App.css</i> and <i>index.css</i>, and the directory <i>assets</i> m
 
 Instead of Vite you can also use the older generation tool [create-react-app](https://github.com/facebookincubator/create-react-app) in the course to set up the applications. The most visible difference to Vite is the name of the application startup file, which is <i>index.js</i>.
 
-The way to start the application is also different, it is started with a command
+The way to start the application is also different in CRA, it is started with a command
 
 ```
 npm start
 ```
 
+in contrast to Vite's
+
+```
+npm run dev 
+```
+
+
 The course is currently (11 August 2023) being updated to use Vite. Some brands may still use the application base created with create-react-app.
 
 ### Component
@@ -252,7 +259,9 @@ but when writing JSX, the tag needs to be closed:
 
 ### Multiple components
 
-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):
+Let's modify the file <i>App.jsx</i> as follows:
+
+
 
 ```js
 // highlight-start
@@ -292,6 +301,9 @@ const App = () => {
 }
 ```
 
+**NB**: <em>export</em> 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
+
+
 Writing components with React is easy, and by combining components, even a more complex application can be kept fairly maintainable. Indeed, a core philosophy of React is composing applications from many specialized reusable components.
 
 Another strong convention is the idea of a <i>root component</i> called <i>App</i> at the top of the component tree of the application. Nevertheless, as we will learn in [part 6](/en/part6), there are situations where the component <i>App</i> is not exactly the root, but is wrapped within an appropriate utility component.
@@ -412,7 +424,7 @@ React has been configured to generate quite clear error messages. Despite this,
 
 As we already mentioned, when programming with React, it is possible and worthwhile to write <em>console.log()</em> commands (which print to the console) within your code.
 
-Also, keep in mind that **React component names must be capitalized**. If you try defining a component as follows:
+Also, keep in mind that **First letter of React component names must be capitalized**. If you try defining a component as follows:
 
 ```js
 const footer = () => {

src/content/11/en/part11c.md

@@ -252,7 +252,7 @@ Before moving to next exercise, fix your deployment and ensure that the applicat
 
 #### 11.12. Custom health check
 
-**NOTE:** at the moment the the custom health check feature in Fly.io does not work. You can mark this exercise done without doing anything. A replacement for this exercise will be developed later...
+**NOTE:** at the moment the custom health check feature in Fly.io does not work. You can mark this exercise done without doing anything. A replacement for this exercise will be developed later...
 
 Besides TCP and HTTP based health checks, Fly.io allows to use very flexible shell script based health checks. The feature is still undocumented but e.g. [this](https://community.fly.io/t/verifying-services-script-checks-is-supported/1464) shows you how to use it.
 

src/content/13/en/part13a.md

@@ -600,7 +600,9 @@ In the tasks of this section, we will build a blog application backend similar t
 
 #### Task 13.1.
 
-Create a GitHub repository for the application and create a new Heroku or Fly.io application for it, as well as a Postgres database. Make sure you are able to establish a connection to the application database.
+Create a GitHub repository for the application and create a new Fly.io or Heroku application for it, as well as a Postgres database. As mentioned [here](/en/part13/using_relational_databases_with_sequelize#application-database) you might set up your database also somewhere else, and in that case the Fly.io of Heroku app is not needed.
+
+Make sure you are able to establish a connection to the application database.
 
 #### Task 13.2.
 

src/content/13/fi/osa13a.md

@@ -572,7 +572,7 @@ Teemme tämän osan tehtävissä [osan 4](/osa4) tehtävien kanssa samanlaisen b
 
 #### Tehtävä 13.1.
 
-Tee sovellukselle GitHub-repositorio ja luo sen sisällä sovellusta varten Heroku-sovellus sekä Postgres-tietokanta. Varmista, että saat luotua yhteyden sovelluksen tietokantaan.
+Tee sovellukselle GitHub-repositorio ja luo sen sisällä sovellusta varten Fly.io tai Heroku-sovellus sekä Postgres-tietokanta. Varmista, että saat luotua yhteyden sovelluksen tietokantaan. Kuten [täällä](/osa13/relaatiotietokannan_kaytto_sequelize_kirjastolla#sovelluksen-tietokanta) mainittiin, voit hoitaa tietokannan myös esim. Dockerin avulla, tällöin et tarvitse Fly.io- tai Heroku-sovellusta.
 
 #### Tehtävä 13.2.
 

src/content/2/en/part2c.md

@@ -473,7 +473,7 @@ Now we can see more clearly that the function [useEffect](https://react.dev/refe
 
 So by default, the effect is <i>always</i> run after the component has been rendered. In our case, however, we only want to execute the effect along with the first render.
 
-The second parameter of <em>useEffect</em> is used to [specify how often the effect is run](https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect). If the second parameter is an empty array <em>[]</em>, then the effect is only run along with the first render of the component.
+The second parameter of <em>useEffect</em> is used to [specify how often the effect is run]https://react.dev/reference/react/useEffect#parameters). If the second parameter is an empty array <em>[]</em>, then the effect is only run along with the first render of the component.
 
 There are many possible use cases for an effect hook other than fetching data from the server. However, this use is sufficient for us, for now.
 

src/content/2/fi/osa2.md

@@ -9,6 +9,6 @@ lang: fi
 Jatkamme Reactiin tutustumista. Ensin käsitellään datakokoelmien, esimerkiksi useamman taulukkoon sijoitetun nimen renderöimistä ruudulle. Tämän jälkeen tarkastellaan miten käyttäjä voi antaa tietoja React-sovellukselle HTML:n lomakkeiden avulla. Sen jälkeen fokus siirtyy siihen, miten selaimessa oleva JavaScript-koodi käsittelee palvelimelle talletettua dataa. Osan lopussa tarkastelemme nopeasti paria yksinkertaista tapaa CSS-tyylien lisäämiseksi React-sovellukseen.
 
 <i>Osa päivitetty 14.8.2023</i>
-- <i>Create React App rokorvattu Vitellä</i>
+- <i>Create React App korvattu Vitellä</i>
 
 </div>

src/content/2/fi/osa2c.md

@@ -471,7 +471,7 @@ Nyt huomaamme selvemmin, että funktiolle [useEffect]((https://react.dev/referen
 
 Eli oletusarvoisesti efekti suoritetaan <i>aina</i> sen jälkeen, kun komponentti renderöidään. Meidän tapauksessamme haluamme suorittaa efektin vain ensimmäisen renderöinnin yhteydessä.
 
-Funktion <em>useEffect</em> toista parametria käytetään [tarkentamaan sitä, miten usein efekti suoritetaan](https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect). Jos toisena parametrina on tyhjä taulukko <em>[]</em>, suoritetaan efekti ainoastaan komponentin ensimmäisen renderöinnin jälkeen.
+Funktion <em>useEffect</em> toista parametria käytetään [tarkentamaan sitä, miten usein efekti suoritetaan](https://react.dev/reference/react/useEffect#parameters). Jos toisena parametrina on tyhjä taulukko <em>[]</em>, suoritetaan efekti ainoastaan komponentin ensimmäisen renderöinnin jälkeen.
 
 Effect hookien avulla on mahdollisuus tehdä paljon muutakin kuin hakea dataa palvelimelta, mutta tämä riittää meille tässä vaiheessa.
 

src/content/5/en/part5.md

@@ -8,7 +8,7 @@ lang: en
 
 In this part we return to the frontend, first looking at different possibilities for testing the React code.  We will also implement token based authentication which will enable users to log in to our application.
 
-<i>Part updated 25th Jan 2023</i>
-- <i>No major changes</i>
+<i>Part updated 17th August 2023</i>
+- <i>Create React App replaced with Vite</i>
 
 </div>