Merge branch 'source' into patch-2

Author: vejol

CONTRIBUTING.md

@@ -6,17 +6,16 @@ We really appreciate that you are considering contributing! There are many ways
 
 1. Fork the repository
 2. Clone your fork
-3. Verify that you are running Node version 10 ([NVM](https://github.com/nvm-sh/nvm) recommended for managing node versions)
+3. Verify that you are running Node version 10 ([NVM](https://github.com/nvm-sh/nvm) recommended for managing node versions, with it you can run `nvm use` to activate correct node version)
 4. Install dependencies with `npm install`
 5. Start the application with `npm start`
 6. Application will be available at <http://localhost:8000>
 
 # Setting up the PR
 
-1. Prettify your code with `npm run format`
-2. Create a new branch for your changes
-3. Create the PR from that branch to the source branch
-4. If your pull request is for a specific part of the course material, please add a corresponding label to your pull request (eg. "Part 3")
+1. Create a new branch for your changes
+2. Create the PR from that branch to the source branch
+3. If your pull request is for a specific part of the course material, please add the part number to the beginning of the title (eg. "**Part 3a:** Fix broken link")
 
 # Contributing with translations
 

src/content/0/en/part0a.md

@@ -332,6 +332,7 @@ Despite changes *all the submitted exercises remain valid*, and the course can b
 
 Recent major changes
 
+- Part 6 (12th October 2025): Jest replaced with Vitest. Axios replaced with Fetch API
 - Part 5 (21st August, 2025): React updated to version 19. PropTypes and forwardRef are no longer used. ESLint configurations updated
 - Part 4 (13th August, 2025): Express updated to version 5 and the express-async-errors library removed from part 4b
 - Part 9 (28th August, 2024): Zod library for validating request body type

src/content/0/fi/osa0a.md

@@ -275,6 +275,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 6 (12.10.2025): Jest korvattu Vitestillä. Axios korvattu Fetch API:lla.
 - Osa 5 (21.8.2025): React päivitetty versioon 19. Proptypes ja forwardRef poistuneet käytöstä. Eslint-konfiguraatiot päivitetty
 - Osa 4 (13.8.2025): Express päivitetty versioon 5 ja kirjasto express-async-errors poistettu osasta 4b
 - Osa 9 (28.8.2024): Zod-kirjasto datan validointiin
@@ -326,7 +327,7 @@ Asenna myös joku järkevä web-devausta tukeva tekstieditori. Enemmän kuin suo
 
 Älä koodaa nanolla, Notepadilla tai Geditillä. Myöskään NetBeans ei ole omimmillaan web-devauksessa, ja se on myös turhan raskas verrattuna esim. Visual Studio Codeen.
 
-Asenna koneeseesi heti myös [Node.js](https://nodejs.org/en/). Materiaalia ollaan päivittämässä Noden versioon v22. Osat 0-5 on tehty käyttäen Noden versiota 22.3.0, osa 10 käyttäen versiota 20.11.0 ja loput osat käyttäen versiota 18.13.0. Käytä aina vähintään yhtä tuoretta Node-versiota. Asennusohjeita on [Node.js:n sivuilla](https://nodejs.org/en/download/package-manager/).
+Asenna koneeseesi heti myös [Node.js](https://nodejs.org/en/). Materiaalia ollaan päivittämässä Noden versioon v22. Osat 0-6 on tehty käyttäen Noden versiota 22, osa 10 käyttäen versiota 20.11.0 ja loput osat käyttäen versiota 18.13.0. Käytä aina vähintään yhtä tuoretta Node-versiota. Asennusohjeita on [Node.js:n sivuilla](https://nodejs.org/en/download/package-manager/).
 
 Noden myötä koneelle asentuu myös [npm](https://www.npmjs.com/get-npm) (alunperin lyhennelmä <i>Node Package Manager</i> ‑nimelle), jota tulemme tarvitsemaan kurssin aikana aktiivisesti. Tuoreen Noden kera asentuu myös [npx](https://www.npmjs.com/package/npx), jota tarvitaan myös muutaman kerran.
 

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>Vite + React</title>
+    <title>part1</title>
   </head>
   <body>
     <div id="root"></div>
@@ -287,7 +291,7 @@ 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.
+Writing components with React is easy, and by combining components, an even 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.
 

src/content/1/en/part1c.md

@@ -631,7 +631,7 @@ Since we now have an easily reusable <i>Button</i> component, we've also impleme
 The event handler is passed to the <i>Button</i> component through the _onClick_ prop. When creating your own components, you can theoretically choose the prop name freely. However, our naming choice for the event handler was not entirely arbitrary.
 
 React's own official [tutorial](https://react.dev/learn/tutorial-tic-tac-toe) suggests:
-"In React, it’s conventional to use _onSomething_ names for props which take functions which handle events and handleSomething for the actual function definitions which handle those events."
+"In React, it’s conventional to use _onSomething_ names for props which take functions which handle events and _handleSomething_ for the actual function definitions which handle those events."
 
 ### Changes in state cause re-rendering
 

src/content/1/en/part1d.md

@@ -315,7 +315,7 @@ Even though a new value was set for _left_ by calling _setLeft(left + 1)_, the o
 setTotal(left + right) 
 ```
 
-The reason for this is that a state update in React happens [asynchronously](https://react.dev/learn/queueing-a-series-of-state-updates), i.e. not immediately but "at some point" before the component is rendered again.
+The reason for this is that a state update in React happens [asynchronously](https://react.dev/learn/queueing-a-series-of-state-updates), i.e. not immediately but "at some point" after the current component function is finished, before the component is rendered again.
 
 We can fix the app as follows:
 
@@ -1084,7 +1084,7 @@ const App = () => {
 }
 ```
 
-The application still appears to work, but **don't implement components like this!** Never define components inside of other components. The method provides no benefits and leads to many unpleasant problems. The biggest problems are because React treats a component defined inside of another component as a new component in every render. This makes it impossible for React to optimize the component.
+The application still appears to work, but **do not implement components like this!** Never define components inside of other components. The method provides no benefits and only leads to problems. One such problem is that React will treat a component defined inside of another component as a "new component" in every render. This makes it impossible for React to optimize the component.
 
 Let's instead move the <i>Display</i> component function to its correct place, which is outside of the <i>App</i> component function:
 
@@ -1125,24 +1125,24 @@ You may find the following links useful:
 - The [official React documentation](https://react.dev/learn) is worth checking out at some point, although most of it will become relevant only later on in the course. Also, everything related to class-based components is irrelevant to us;
 - Some courses on [Egghead.io](https://egghead.io) like [Start learning React](https://egghead.io/courses/start-learning-react) are of high quality, and the recently updated [Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-reactjs) is also relatively good; both courses introduce concepts that will also be introduced later on in this course. **NB** The first one uses class components but the latter uses the new functional ones.
 
-### Web programmers oath
+### Web Programmer's Oath
 
-Programming is hard, that is why I will use all the possible means to make it easier
+Programming is hard. That is why, as a developer, I will use all possible means to make it easier.
 
-- I will have my browser developer console open all the time
-- I progress with small steps
-- I will write lots of _console.log_ statements to make sure I understand how the code behaves and to help pinpointing problems
-- If my code does not work, I will not write more code. Instead I will start deleting the code until it works or just return to a state when everything was still working
-- When I ask for help in the course Discord channel or elsewhere I formulate my questions properly, see [here](http://fullstackopen.com/en/part0/general_info#how-to-get-help-in-discord) how to ask for help
+- I will have my browser's developer console open at all times.
+- I will progress in small steps, making sure that my code is working at each step.
+- I will write many _console.log_ statements to make sure I understand how the code behaves and to help pinpointing problems.
+- If my code does not work, I will not write more code. Instead, I will either start deleting the code until it works or return to a state where my program was working.
+- When I ask for help in the course Discord channel or elsewhere, I will formulate my questions properly. See [this section](http://fullstackopen.com/en/part0/general_info#how-to-get-help-in-discord) to learn how to ask for help.
 
 ### Utilization of Large language models
 
 Large language models such as [ChatGPT](https://chat.openai.com/auth/login), [Claude](https://claude.ai/) and [GitHub Copilot](https://github.com/features/copilot) have proven to be very useful in software development.
 
 Personally, I mainly use GitHub Copilot, which is now [natively integrated into Visual Studio Code](https://code.visualstudio.com/docs/copilot/overview)
-As a reminder, if you're a university student, you can access Copilot pro for free through the [GitHub Student Developer Pack](https://education.github.com/pack).
+As a reminder, if you're a university student, you can access Copilot Pro for free through the [GitHub Student Developer Pack](https://education.github.com/pack).
 
-Copilot is useful in a wide variety of scenarios. Copilot can be asked to generate code for an open file by describing the desired functionality in text:
+Copilot is useful in a wide variety of scenarios. For example, Copilot can be asked to generate code for an open file by describing the desired functionality in text:
 
 ![copilot input on vscode](../../images/1/gpt1.png)
 
@@ -1156,35 +1156,35 @@ An event handler may also be generated. By writing the first line of the functio
 
 ![copilot´s code suggestion](../../images/1/gpt3.png)
 
-In Copilot's chat window, it is possible to ask for an explanation of the function of the painted code area:
+In Copilot's chat window, it is possible to ask for an explanation of the function of the selected code area:
 
 ![copilot explaining how the selected code works in the chat window](../../images/1/gpt4.png)
 
-Copilot is also useful in error situations, by copying the error message into Copilot's chat, you will get an explanation of the problem and a suggested fix:
+Copilot is also useful for debugging. If you copy an error message into Copilot's chat, you will get an explanation of the problem and a suggested fix:
 
 ![copilot explaining the error and suggesting a fix](../../images/1/gpt5.png)
 
-Copilot's chat also enables the creation of larger set of functionality
+Copilot's chat also enables the creation of larger set of functionality. For example, the image below shows Copilot creating a login component using the _useState_ hook.
 
 ![copilot creating a login component on request](../../images/1/gpt6.png)
 
-The degree of usefulness of the hints provided by Copilot and other language models varies. Perhaps the biggest problem with language models is [hallucination](https://en.wikipedia.org/wiki/Hallucination_(artificial_intelligence)), they sometimes generate completely convincing-looking answers, which, however, are completely wrong. When programming, of course, the hallucinated code is often caught quickly if the code does not work. More problematic situations are those where the code generated by the language model seems to work, but it contains more difficult to detect bugs or e.g. security vulnerabilities.
+The usefulness of Copilot and other language models in programming varies. The biggest problem with language models is [hallucination](https://en.wikipedia.org/wiki/Hallucination_(artificial_intelligence)). Large language models sometimes generate answers that may seem correct, but are completely wrong. In programming, errors in hallucinated code are often caught quickly when the code fails to run. However, some code generated by a language model may work at first but still have hidden issues, such as logic errors or security vulnerabilities.
 
-Another problem in applying language models to software development is that it is difficult for language models to "understand" larger projects, and e.g. to generate functionality that would require changes to several files. Language models are also currently unable to generalize code, i.e. if the code has, for example, existing functions or components that the language model could use with minor changes for the requested functionality, the language model will not bend to this. The result of this can be that the code base deteriorates, as the language models generate a lot of repetition in the code, see more e.g. [here](https://visualstudiomagazine.com/articles/2024/01/25/copilot-research.aspx).
+Another problem in applying language models to software development is that it is difficult for language models to "understand" larger projects. One major limitation of language models is that they are unable to implement changes across several files. Language models are also currently unable to generalize code. For example, if the programmer requests for new functionality that can be implemented with existing functions or components (even with minor adjustments), the language model may fail to use them. This deteriorates the code base quality because the language models generate duplicate functions and components. For more information about this, read [this article](https://visualstudiomagazine.com/articles/2024/01/25/copilot-research.aspx).
 
-When using language models, the responsibility always stays with the programmer.
+If you choose to use language models when programming, remember that its output is your responsibility.
 
-The rapid development of language models puts the student of programming in a challenging position: is it worth and is it even necessary to learn programming in a detailed level, when you can get almost everything ready-made from language models?
+The rapid development of language models puts programming students in a challenging position. Is it worth, or even necessary, to learn programming to a detailed level when you can get almost everything ready-made from language models?
 
 At this point, it is worth remembering the old wisdom of  [Brian Kerningham](https://en.wikipedia.org/wiki/Brian_Kernighan), co-author of *The C Programming Language*:
 
 ![Everyone knows that debugging is twice as hard as writing a program in the first place. So if you're as clever as you can be when you write it, how will you ever debug it? ― Brian Kernighan](../../images/1/kerningham.png)
 
-In other words, since debugging is twice as difficult as programming, it is not worth programming such code that you can only barely understand. How can debugging be even possible in a situation where programming is outsourced to a language model and the software developer does not understand the debugged code at all?
+In other words, since debugging is twice as difficult as programming, it is not worth creating code that you barely understand. How can debugging even be possible when the software developer does not understand the debugged code because they outsourced programming to a language model?
 
-So far, the development of language models and artificial intelligence is still at the stage where they are not self-sufficient, and the most difficult problems are left for humans to solve. Because of this, even novice software developers must learn to program really well just in case. It may be that, despite the development of language models, even more in-depth knowledge is needed. Artificial intelligence does the easy things, but a human is needed to sort out the most complicated messes caused by AI. GitHub Copilot is a very well-named product, it's Copilot, a second pilot who helps the main pilot in an aircraft. The programmer is still the main pilot, the captain, and bears the ultimate responsibility.
+So far, the development of language models and artificial intelligence is still at the stage where they are not self-sufficient, and the most difficult problems are left for humans to solve. Because of this, even novice software developers must learn to program really well just in case. It may be that, despite the development of language models, even more in-depth knowledge is needed. Artificial intelligence does the easy things, but a human is needed to sort out the most complicated messes caused by AI. GitHub Copilot is a very well-named product because it's a Copilot; a second pilot who helps the main pilot in an aircraft. The programmer is still the main pilot, the captain, and the one who ultimately bears the responsibility.
 
-It may be in your own interest that you turn off Copilot by default when you do this course and rely on it only in a real emergency.
+Throughout this course, it may be in your own interest that you turn off Copilot by default and only rely on it in a real emergency.
 
 </div>
 
@@ -1306,9 +1306,9 @@ const Statistics = (props) => {
   /// ...
   return(
     <div>
-      <StatisticLine text="good" value ={...} />
-      <StatisticLine text="neutral" value ={...} />
-      <StatisticLine text="bad" value ={...} />
+      <StatisticLine text="good" value={...} />
+      <StatisticLine text="neutral" value={...} />
+      <StatisticLine text="bad" value={...} />
       // ...
     </div>
   )