6abc to use vite

Author: mluukkai

src/content/6/en/part6a.md

@@ -33,7 +33,7 @@ We will get to know Redux by implementing a counter application yet again:
 
 ![browser counter application](../../images/6/1.png)
 
-Create a new create-react-app-application and install </i>redux</i> with the command
+Create a new Vite application and install </i>redux</i> with the command
 
 ```bash
 npm install redux
@@ -175,7 +175,7 @@ would cause the following to be printed
 -1
 </pre>
 
-The code of our counter application is the following. All of the code has been written in the same file (_index.js_), so <i>store</i> is directly available for the React code. We will get to know better ways to structure React/Redux code later.
+The code of our counter application is the following. All of the code has been written in the same file (_main.jsx_), so <i>store</i> is directly available for the React code. We will get to know better ways to structure React/Redux code later.
 
 ```js
 import React from 'react'
@@ -374,8 +374,55 @@ Let's expand our reducer so that it can handle the change of a note's importance
 }
 ```
 
-Since we do not have any code which uses this functionality yet, we are expanding the reducer in the 'test-driven' way.
-Let's start by creating a test for handling the action <i>NEW\_NOTE</i>.
+Since we do not have any code which uses this functionality yet, we are expanding the reducer in the 'test-driven' way. Let's start by creating a test for handling the action <i>NEW\_NOTE</i>.
+
+We have to first configure the [Jest](https://jestjs.io/) testing library for the project. Let us install the following dependencies:
+
+```js
+npm install --save-dev jest @babel/preset-env @babel/preset-react eslint-plugin-jest
+```
+
+Next we'll create the file <i>.babelrc</i>, with the following content:
+
+```json
+{
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ]
+}
+```
+
+Let us expand <i>package.json</i> with a script for running the tests:
+
+```json
+{
+  // ...
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "jest" // highlight-line
+  },
+  // ...
+}
+```
+
+And finally, <i>.eslintrc.cjs</i> needs to be altered as follows:
+
+```js
+module.exports = {
+  root: true,
+  env: { 
+    browser: true,
+    es2020: true,
+    "jest/globals": true // highlight-line
+  },
+  // ...
+}
+```
+
 
 To make testing easier, we'll first move the reducer's code to its own module to file <i>src/reducers/noteReducer.js</i>. We'll also add the library [deep-freeze](https://www.npmjs.com/package/deep-freeze), which can be used to ensure that the reducer has been correctly defined as an immutable function.
 Let's install the library as a development dependency
@@ -854,9 +901,9 @@ First, we install react-redux
 npm install react-redux
 ```
 
-Next, we move the _App_ component into its own file _App.js_. Let's see how this affects the rest of the application files.
+Next, we move the _App_ component into its own file _App.jsx_. Let's see how this affects the rest of the application files.
 
-_index.js_ becomes:
+_main.jsx_ becomes:
 
 ```js
 import React from 'react'
@@ -1008,8 +1055,7 @@ const App = () => {
 }
 ```
 
-The <i>useDispatch</i> hook provides any React component access to the dispatch function of the Redux store defined in <i>index.js</i>.
-This allows all components to make changes to the state of the Redux store.
+The <i>useDispatch</i> hook provides any React component access to the dispatch function of the Redux store defined in <i>main.jsx</i>. This allows all components to make changes to the state of the Redux store.
 
 The component can access the notes stored in the store with the [useSelector](https://react-redux.js.org/api/hooks#useselector)-hook of the react-redux library.
 
@@ -1078,7 +1124,7 @@ export default NewNote
 
 Unlike in the React code we did without Redux, the event handler for changing the state of the app (which now lives in Redux) has been moved away from the <i>App</i> to a child component. The logic for changing the state in Redux is still neatly separated from the whole React part of the application.
 
-We'll also separate the list of notes and displaying a single note into their own components (which will both be placed in the <i>Notes.js</i> file ):
+We'll also separate the list of notes and displaying a single note into their own components (which will both be placed in the <i>Notes.jsx</i> file ):
 
 ```js
 import { useDispatch, useSelector } from 'react-redux' // highlight-line

src/content/6/en/part6b.md

@@ -7,7 +7,7 @@ lang: en
 
 <div class="content">
 
-Let's continue our work with the simplified [redux version](/en/part6/flux_architecture_and_redux#redux-notes) of our notes application.
+Let's continue our work with the simplified [Redux version](/en/part6/flux_architecture_and_redux#redux-notes) of our notes application.
 
 To ease our development, let's change our reducer so that the store gets initialized with a state that contains a couple of notes:
 
@@ -132,7 +132,7 @@ export default filterReducer
 
 We can create the actual reducer for our application by combining the two existing reducers with the [combineReducers](https://redux.js.org/api/combinereducers) function.
 
-Let's define the combined reducer in the <i>index.js</i> file:
+Let's define the combined reducer in the <i>main.jsx</i> file:
 
 ```js
 import React from 'react'
@@ -188,7 +188,7 @@ const reducer = combineReducers({
 
 The state of the store defined by the reducer above is an object with two properties: <i>notes</i> and <i>filter</i>. The value of the <i>notes</i> property is defined by the <i>noteReducer</i>, which does not have to deal with the other properties of the state. Likewise, the <i>filter</i> property is managed by the <i>filterReducer</i>.
 
-Before we make more changes to the code, let's take a look at how different actions change the state of the store defined by the combined reducer. Let's add the following to the <i>index.js</i> file:
+Before we make more changes to the code, let's take a look at how different actions change the state of the store defined by the combined reducer. Let's add the following to the <i>main.jsx</i> file:
 
 ```js
 import { createNote } from './reducers/noteReducer'
@@ -220,7 +220,7 @@ Is there a bug in our code? No. The combined reducer works in such a way that ev
 
 ### Finishing the filters
 
-Let's finish the application so that it uses the combined reducer. We start by changing the rendering of the application and hooking up the store to the application in the <i>index.js</i> file:
+Let's finish the application so that it uses the combined reducer. We start by changing the rendering of the application and hooking up the store to the application in the <i>main.jsx</i> file:
 
 ```js
 ReactDOM.createRoot(document.getElementById('root')).render(
@@ -232,7 +232,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 
 Next, let's fix a bug that is caused by the code expecting the application store to be an array of notes:
 
-![browser TypeError: notes.map is not a function](../../images/6/7ea.png)
+![browser TypeError: notes.map is not a function](../../images/6/7v.png)
 
 It's an easy fix. Because the notes are in the store's field <i>notes</i>, we only have to make a little change to the selector function:
 
@@ -269,7 +269,7 @@ And now it returns only its field <i>notes</i>
 const notes = useSelector(state => state.notes)
 ```
 
-Let's extract the visibility filter into its own <i>src/components/VisibilityFilter.js</i> component:
+Let's extract the visibility filter into its own <i>src/components/VisibilityFilter.jsx</i> component:
 
 ```js
 import { filterChange } from '../reducers/filterReducer'
@@ -430,7 +430,7 @@ Let's start using Redux Toolkit in our application by refactoring the existing c
 npm install @reduxjs/toolkit
 ```
 
-Next, open the <i>index.js</i> file which currently creates the Redux store. Instead of Redux's <em>createStore</em> function, let's create the store using Redux Toolkit's [configureStore](https://redux-toolkit.js.org/api/configureStore) function:
+Next, open the <i>main.jsx</i> file which currently creates the Redux store. Instead of Redux's <em>createStore</em> function, let's create the store using Redux Toolkit's [configureStore](https://redux-toolkit.js.org/api/configureStore) function:
 
 ```js
 import React from 'react'

src/content/6/en/part6c.md

@@ -28,7 +28,7 @@ The initial state of the database is stored in the file <i>db.json</i>, which is
 }
 ```
 
-We'll install json-server for the project...
+We'll install json-server for the project:
 
 ```js
 npm install json-server --save-dev
@@ -121,7 +121,7 @@ export const { createNote, toggleImportanceOf, appendNote } = noteSlice.actions
 export default noteSlice.reducer
 ```
 
-A quick way to initialize the notes state based on the data received from the server is to fetch the notes in the <i>index.js</i> file and dispatch an action using the <em>appendNote</em> action creator for each individual note object:
+A quick way to initialize the notes state based on the data received from the server is to fetch the notes in the <i>main.jsx</i> file and dispatch an action using the <em>appendNote</em> action creator for each individual note object:
 
 ```js
 // ...
@@ -194,7 +194,7 @@ export const { createNote, toggleImportanceOf, appendNote, setNotes } = noteSlic
 export default noteSlice.reducer
 ```
 
-Now, the code in the <i>index.js</i> file looks a lot better:
+Now, the code in the <i>main.jsx</i> file looks a lot better:
 
 ```js
 // ...
@@ -215,7 +215,7 @@ noteService.getAll().then(notes =>
 
 > **NB:** Why didn't we use await in place of promises and event handlers (registered to _then_-methods)?
 >
-> Await only works inside <i>async</i> functions, and the code in <i>index.js</i> is not inside a function, so due to the simple nature of the operation, we'll abstain from using <i>async</i> this time.
+> Await only works inside <i>async</i> functions, and the code in <i>main.jsx</i> is not inside a function, so due to the simple nature of the operation, we'll abstain from using <i>async</i> this time.
 
 We do, however, decide to move the initialization of the notes into the <i>App</i> component, and, as usual, when fetching data from a server, we'll use the <i>effect hook</i>.
 
@@ -249,48 +249,6 @@ const App = () => {
 export default App
 ```
 
-Using the useEffect hook causes an eslint warning:
-
-![vscode warning useEffect missing dispatch dependency](../../images/6/26ea.png)
-
-We can get rid of it by doing the following:
-
-```js
-const App = () => {
-  const dispatch = useDispatch()
-  useEffect(() => {
-    noteService
-      .getAll().then(notes => dispatch(setNotes(notes)))
-  }, [dispatch]) // highlight-line
-
-  // ...
-}
-```
-
-Now the variable <i>dispatch</i> we define in the _App_ component, which practically is the dispatch function of the redux store, has been added to the array useEffect receives as a parameter.
-**If** the value of the dispatch variable would change during runtime,
-the effect would be executed again. This however cannot happen in our application, so the warning is unnecessary.
-
-Another way to get rid of the warning would be to disable ESlint on that line:
-
-```js
-const App = () => {
-  const dispatch = useDispatch()
-  useEffect(() => {
-    noteService
-      .getAll().then(notes => dispatch(setNotes(notes)))   
-      // highlight-start
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps  
-  // highlight-end
-
-  // ...
-}
-```
-
-Generally disabling ESlint when it throws a warning is not a good idea. Even though the ESlint rule in question has caused some [arguments](https://github.com/facebook/create-react-app/issues/6880), we will use the first solution.
-
-More about the need to define the hooks dependencies in [the react documentation](https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies).
-
 ### Sending data to the backend
 
 We can do the same thing when it comes to creating a new note. Let's expand the code communicating with the server as follows:
@@ -395,7 +353,7 @@ const App = () => {
 
   useEffect(() => {
     dispatch(initializeNotes())  
-  }, [dispatch]) 
+  }, []) 
 
   // ...
 }
@@ -458,7 +416,7 @@ const App = () => {
   // highlight-start
   useEffect(() => {
     dispatch(initializeNotes()) 
-  }, [dispatch]) 
+  }, []) 
   // highlight-end
 
   return (
@@ -555,7 +513,7 @@ const NewNote = () => {
 }
 ```
 
-Finally, let's clean up the <i>index.js</i> file a bit by moving the code related to the creation of the Redux store into its own, <i>store.js</i> file:
+Finally, let's clean up the <i>main.jsx</i> file a bit by moving the code related to the creation of the Redux store into its own, <i>store.js</i> file:
 
 ```js
 import { configureStore } from '@reduxjs/toolkit'

src/content/6/fi/osa6a.md

@@ -373,6 +373,53 @@ Laajennetaan reduceria siten, että se osaa käsitellä muistiinpanon tärkeytee
 
 Koska meillä ei ole vielä koodia joka käyttää ominaisuutta, laajennetaan reduceria testivetoisesti. Aloitetaan tekemällä testi actionin <i>NEW\_NOTE</i> käsittelylle.
 
+Konfiguroidaan sovellukseen [Jest](https://jestjs.io/). Aloitetaan asentamalla joukko kirjastoja:
+
+```js
+npm install --save-dev jest @babel/preset-env @babel/preset-react eslint-plugin-jest
+```
+
+Luodaan tiedosto <i>.babelrc</i>, jolla on seuraava sisältö:
+
+```json
+{
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ]
+}
+```
+
+Lisätään tiedostoon <i>package.json</i> testit suorittava skripti:
+
+```json
+{
+  // ...
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "jest" // highlight-line
+  },
+  // ...
+}
+```
+
+Tiedostoon <i>.eslintrc.cjs</i> tulee myös pieni lisäys:
+
+```js
+module.exports = {
+  root: true,
+  env: { 
+    browser: true,
+    es2020: true,
+    "jest/globals": true // highlight-line
+  },
+  // ...
+}
+```
+
 Jotta testaus olisi helpompaa, siirretään reducerin koodi ensin omaan moduuliinsa tiedostoon <i>src/reducers/noteReducer.js</i>. Otetaan lisäksi käyttöön kirjasto [deep-freeze](https://www.npmjs.com/package/deep-freeze), jonka avulla voimme varmistaa, että reducer on määritelty oikeaoppisesti puhtaana funktiona. Asennetaan kirjasto kehitysaikaiseksi riippuvuudeksi:
 
 ```js
@@ -832,17 +879,17 @@ const App = () => {
 
 Koko sovellus on toistaiseksi kirjoitettu yhteen tiedostoon minkä ansiosta joka puolelta sovellusta on päästy käsiksi Redux-storeen. Entä jos haluamme jakaa sovelluksen useisiin, omiin tiedostoihinsa sijoitettuihin komponentteihin? 
 
-Tapoja välittää Redux-store sovelluksen komponenteille on useita. Tutustutaan ensin ehkä uusimpaan ja helpoimpaan tapaan eli [react-redux](https://react-redux.js.org/)-kirjaston tarjoamaan [hooks](https://react-redux.js.org/api/hooks)-rajapintaan.
+Tapoja välittää Redux-store sovelluksen komponenteille on useita. Tutustutaan ensin ehkä uusimpaan ja helpoimpaan tapaan eli [React Redux](https://react-redux.js.org/)-kirjaston tarjoamaan [hooks](https://react-redux.js.org/api/hooks)-rajapintaan.
 
 Asennetaan react-redux:
 
 ```bash
 npm install react-redux
 ```
 
-Eriytetään komponentti _App_ tiedostoon _App.js_. Tarkastellaan kuitenkin ensin mitä sovelluksen muihin tiedostoihin tulee.
+Eriytetään komponentti _App_ tiedostoon _App.jsx_. Tarkastellaan kuitenkin ensin mitä sovelluksen muihin tiedostoihin tulee.
 
-Tiedosto _index.js_ näyttää seuraavalta:
+Tiedosto _main.jsx_ näyttää seuraavalta:
 
 ```js
 import React from 'react'
@@ -921,7 +968,7 @@ Normaalisti (eli ei defaultina) exportattujen funktioiden käyttöönotto tapaht
 import { createNote } from './../reducers/noteReducer'
 ```
 
-Tiedoston _App.js_ sisältö on seuraava:
+Tiedoston _App.jsx_ sisältö on seuraava:
 
 ```js
 import { createNote, toggleImportanceOf } from './reducers/noteReducer' // highlight-line
@@ -992,7 +1039,7 @@ const App = () => {
 }
 ```
 
-React Redux ‑kirjaston tarjoama <i>useDispatch</i>-hook siis tarjoaa mille tahansa React-komponentille pääsyn tiedostossa <i>index.js</i> määritellyn Redux-storen dispatch-funktioon, jonka avulla komponentti pääsee tekemään muutoksia Redux-storen tilaan.
+React Redux ‑kirjaston tarjoama <i>useDispatch</i>-hook siis tarjoaa mille tahansa React-komponentille pääsyn tiedostossa <i>main.jsx</i> määritellyn Redux-storen dispatch-funktioon, jonka avulla komponentti pääsee tekemään muutoksia Redux-storen tilaan.
 
 Storeen talletettuihin muistiinpanoihin komponentti pääsee käsiksi React Redux ‑kirjaston [useSelector](https://react-redux.js.org/api/hooks#useselector)-hookin kautta:
 
@@ -1061,7 +1108,7 @@ export default NewNote
 
 Toisin kuin aiemmin ilman Reduxia tekemässämme React-koodissa, sovelluksen tilaa (joka on nyt siis Reduxissa) muuttava tapahtumankäsittelijä on siirretty pois <i>App</i>-komponentista, alikomponentin vastuulle. Itse tilaa muuttava logiikka on kuitenkin siististi Reduxissa eristettynä koko sovelluksen React-osuudesta.
 
-Eriytetään vielä muistiinpanojen lista ja yksittäisen muistiinpanon esittäminen omiksi komponenteikseen (jotka molemmat sijoitetaan tiedostoon <i>Notes.js</i>):
+Eriytetään vielä muistiinpanojen lista ja yksittäisen muistiinpanon esittäminen omiksi komponenteikseen (jotka molemmat sijoitetaan tiedostoon <i>Notes.jsx</i>):
 
 ```js
 import { useDispatch, useSelector } from 'react-redux' // highlight-line