Merge branch 'source' into update-typescript-spanish

Author: pablo-maff

license.txt

@@ -37,7 +37,7 @@ The course contains fourteen parts, the first of which is numbered 0 for consist
 
 Proceeding from part <i>n</i> to part <i>n+1</i> is not sensible before enough know-how of the topics in part <i>n</i> has been achieved. In pedagogic terms, the course uses [Mastery Learning](https://en.wikipedia.org/wiki/Mastery_learning), and you are only intended to proceed to the next part after doing enough of the exercises of the previous part.
 
-In parts 1-4 you are expected to do <i>at least</i> all of the exercises that are not marked with an asterisk(*). Exercises marked with an asterisk count towards your final grade, but skipping them does not prevent you from doing the compulsory exercises in the next parts. Parts 5-13 do not have asterisk marked exercises since there is no similar dependency on previous parts.
+In parts 1-4 you are expected to do <strong>all</strong> of the exercises that are marked with an asterisk(*). Exercises marked with an asterisk count towards your final grade, but skipping them does not prevent you from doing the compulsory exercises in the next parts. Parts 5-13 do not have asterisk marked exercises since there is no similar dependency on previous parts.
 
 The speed of completing the course is flexible.
 
@@ -198,7 +198,7 @@ The exercises are submitted through GitHub and marking them as done on the "my s
 
 If you are submitting exercises from different parts to the same repository, use an appropriate system for naming your directories. You can of course create a new repository for each part. If you are using a private repository, add <i>mluukkai</i> as a collaborator.
 
-Exercises are submitted **one part at a time**. Once you have submitted exercises for a part, you can no longer submit any more exercises for that part.
+Exercises are submitted **one part at a time**. You will mark the number of exercises you have completed from that module. Once you have submitted exercises for a part, you can no longer submit any more exercises for that part. 
 
 A system for detecting plagiarism is used to check exercises submitted to GitHub. If code is found from model answers or multiple students hand in the same code, the situation is handled according to the [policy on plagiarism](https://guide.student.helsinki.fi/en/article/what-cheating-and-plagiarism) of the University of Helsinki.
 
@@ -340,7 +340,7 @@ Despite changes <i>all the submitted exercises remain valid</i>, and the course
 
 Recent major changes
 
-- Parts 1-7 (11th-26th August): Create React app replaced with Vite
+- Parts 1-9 (11th September - 5th October): Create React app replaced with Vite
 
 ### Expanding on a previously completed course
 

src/content/0/en/part0a.md

@@ -57,7 +57,7 @@ Una vez que haya completado suficientes ejercicios para aprobar, puede descargar
 
 #### 3 créditos
 
-Para tres créditos, debe enviar todos los ejercicios obligatorios (sin asteriscos) para las partes 0-3.
+Para tres créditos, debe enviar todos los ejercicios obligatorios (con asteriscos) para las partes 0-3.
 
 Para los créditos universitarios, el curso de tres créditos también requiere aprobar el examen del curso. El examen se realiza en Moodle, al que se puede acceder a través de la [página del curso de Open University](https://courses.helsinki.fi/en/aytkt21009en/131840261) una vez que se haya [registrado](/es/part0/informacion_general#registrate-para-el-examen) para el examen.
 

src/content/0/es/part0a.md

@@ -279,7 +279,7 @@ xhttp.onreadystatechange = function() {
 
 El mecanismo de invocación de controladores de eventos es muy común en JavaScript. Las funciones del controlador de eventos se denominan funciones [callback](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function). El código de la aplicación no invoca las funciones en sí, sino el entorno de ejecución -el navegador-, invoca la función en el momento adecuado, cuando se ha producido el <i>evento</i>.
 
-### Modelo de Objeto de Documento o DOM
+### Modelo de Objetos del Documento o DOM
 
 Podemos pensar en las páginas HTML como estructuras de árbol implícitas.
 
@@ -464,7 +464,7 @@ Los datos se envían como el [cuerpo](https://developer.mozilla.org/en-US/docs/W
 
 El servidor puede acceder a los datos accediendo al campo <em>req.body</em> del objeto de solicitud <em>req</em>.
 
-El servidor crea un nuevo objeto de nota y lo agrega a una matriz llamada <em>notes</em>.
+El servidor crea un nuevo objeto de nota y lo agrega a un arreglo llamado <em>notes</em>.
 
 ```js
 notes.push({ 
@@ -552,9 +552,9 @@ form.onsubmit = function(e) {
 }
 ```
 
-El comando <em>document.getElementById('notes_form')</em> le indica al código que busque el elemento form de la página, y para registrar un <i>controlador de eventos</i> para manejar el evento de envío del formulario. El controlador de eventos llama inmediatamente al método <em>e.preventDefault()</em> para evitar el manejo predeterminado del envío de formularios. El método predeterminado enviaría los datos al servidor y provocaría una nueva solicitud GET, lo que no queremos que suceda.
+El comando <em>document.getElementById('notes_form')</em> le indica al código que obtenga el elemento form de la página y que registre un <i>event handler</i> para manejar el evento de envío del formulario. El controlador de eventos llama inmediatamente al método <em>e.preventDefault()</em> para evitar el manejo por defecto del envío de formularios. El método por defecto enviaría los datos al servidor y causaría una nueva solicitud GET, lo cual no queremos que suceda.
 
-Luego, el controlador de eventos crea una nueva nota, la agrega a la lista de notas con el comando <em>notes.push(note)</em>, vuelve a representar la lista de notas en la página y envía la nueva nota al servidor.
+Luego el controlador de eventos crea una nueva nota, la agrega a la lista de notas con el comando <em>notes.push(note)</em>, vuelve a renderizar la lista de notas en la página y envía la nueva nota al servidor.
 
 El código para enviar la nota al servidor es el siguiente:
 
@@ -571,7 +571,7 @@ var sendToServer = function(note) {
 }
 ```
 
-El código determina que los datos se enviarán con una solicitud HTTP POST y el tipo de datos será JSON. El tipo de datos se determina con una cabecera <i>Content-type</i>. Luego, los datos se envían como JSON-string.
+El código determina que los datos se enviarán con una solicitud HTTP POST y el tipo de datos será JSON. El tipo de datos se determina con una cabecera <i>Content-type</i>. Luego los datos se envían como JSON-string.
 
 El código de la aplicación está disponible en <https://github.com/mluukkai/example_app>.
 Vale la pena recordar que la aplicación solo está destinada a demostrar los conceptos del curso. El código sigue un estilo de desarrollo deficiente en cierta medida y no debe usarse como ejemplo al crear sus propias aplicaciones. Lo mismo ocurre con las URL utilizadas. La URL <i>new_note_spa</i>, a la que se envían las nuevas notas, no cumple con las mejores prácticas actuales.
@@ -599,7 +599,7 @@ El estado de React parece sólido, pero el mundo de JavaScript cambia constantem
 
 Prácticamente todas las aplicaciones web tienen (al menos) dos "capas": el navegador, al estar más cerca del usuario final, es la capa superior y el servidor, la inferior. A menudo también hay una capa de base de datos debajo del servidor. Por lo tanto, podemos pensar en la <i>arquitectura</i> de una aplicación web como una especie de <i>stack (pila)</i> de capas.
 
-A menudo, también hablamos sobre el [frontend](https://en.wikipedia.org/wiki/Front_and_back_ends) y el [backend](https://en.wikipedia.org/wiki/Front_and_back_ends). El navegador es la interfaz y JavaScript que se ejecuta en el navegador es el código de la interfaz. El servidor, por otro lado, es el backend.
+A menudo, también hablamos sobre el [frontend](https://en.wikipedia.org/wiki/Front_and_back_ends) y el [backend](https://en.wikipedia.org/wiki/Front_and_back_ends). El navegador es la interfaz y JavaScript que se ejecuta en el navegador es el código de frontend. El servidor, por otro lado, es el backend.
 
 En el contexto de este curso, el desarrollo web full stack significa que nos enfocamos en todas las partes de la aplicación: el frontend, el backend y la base de datos. A veces, el software del servidor y su sistema operativo se ven como parte del stack, pero no vamos a entrar en ellos.
 

src/content/0/es/part0b.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-7 (11-26.8.2023): Create React app korvattu Vitellä
+- Osat 1-9 (11.9-5.10.2023): Create React app korvattu Vitellä
 
 ### Aiemmin suoritetun kurssin täydentäminen
 

src/content/0/fi/osa0a.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 part1 -- --template react
+npm create vite@latest part1 --template react
 cd part1
 npm install
 ```
@@ -407,7 +407,7 @@ module.exports = {
        'warn',
        { allowConstantExport: true },
      ],
-     'react/prop-types': false // highlight-line
+     'react/prop-types': 0 // highlight-line
    },
 }
 ```

src/content/1/en/part1a.md

@@ -13,7 +13,7 @@ JavaScript has advanced rapidly in the last few years and in this course, we use
 
 Browsers do not yet support all of JavaScript's newest features. Due to this fact, a lot of code run in browsers has been <i>transpiled</i> from a newer version of JavaScript to an older, more compatible version.
 
-Today, the most popular way to do transpiling is by using [Babel](https://babeljs.io/). Transpilation is automatically configured in React applications created with create-react-app. We will take a closer look at the configuration of the transpilation in [part 7](/en/part7) of this course.
+Today, the most popular way to do transpiling is by using [Babel](https://babeljs.io/). Transpilation is automatically configured in React applications created with vite. We will take a closer look at the configuration of the transpilation in [part 7](/en/part7) of this course.
 
 [Node.js](https://nodejs.org/en/) is a JavaScript runtime environment based on Google's [Chrome V8](https://developers.google.com/v8/) JavaScript engine and works practically anywhere - from servers to mobile phones. Let's practice writing some JavaScript using Node. The latest versions of Node already understand the latest versions of JavaScript, so the code does not need to be transpiled.
 
@@ -61,7 +61,7 @@ console.log(t.length) // 4 is printed
 console.log(t[1])     // -1 is printed
 
 t.forEach(value => {
-  console.log(value)  // numbers 1, -1, 3, 5 are printed, each to own line
+  console.log(value)  // numbers 1, -1, 3, 5 are printed, each on its own line
 })                    
 ```
 

src/content/1/en/part1b.md

@@ -29,9 +29,9 @@ Konsoli kertoo että sovellus on käynnistynyt localhostin porttiin 5173, eli os
 
 ![](../../images/1/1-vite1.png)
 
-Vite käynnistää sovelluksen [oletusarvoisesti](https://vitejs.dev/config/server-options.html#server-port) porttiin 5173. Jos se ei ole vapaana, käyttä Vite seuraavaa vapaata porttinumeroa.
+Vite käynnistää sovelluksen [oletusarvoisesti](https://vitejs.dev/config/server-options.html#server-port) porttiin 5173. Jos se ei ole vapaana, käyttää Vite seuraavaa vapaata porttinumeroa.
 
-Avataan selan sekä tekstieditori siten, että näet koodin ja web-sivun samaan aikaan ruudulla:
+Avataan selain sekä tekstieditori siten, että näet koodin ja web-sivun samaan aikaan ruudulla:
 
 ![](../../images/1/1-vite4.png)
 
@@ -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.jsx</i> viimeisen rivin komento
+Tiedosto <i>App.jsx</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 />)
@@ -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.jsc</i> muotoon
+Luo Vitellä uusi sovellus. Muuta <i>main.jsx</i> muotoon
 
 ```js
 import ReactDOM from 'react-dom/client'

src/content/1/fi/osa1a.md

@@ -11,7 +11,7 @@ Now that we have set up our development environment we can get into React Native
 
 ### Core components
 
-In the previous parts, we have learned that we can use React to define components as functions, which receive props as an argument and returns a tree of React elements. This tree is usually represented with JSX syntax. In the browser environment, we have used the [ReactDOM](https://reactjs.org/docs/react-dom.html) library to turn these components into a DOM tree that can be rendered by a browser. Here is a concrete example of a very simple component:
+In the previous parts, we have learned that we can use React to define components as functions, which receive props as an argument and returns a tree of React elements. This tree is usually represented with JSX syntax. In the browser environment, we have used the [ReactDOM](https://react.dev/reference/react-dom) library to turn these components into a DOM tree that can be rendered by a browser. Here is a concrete example of a very simple component:
 
 ```javascript
 const HelloWorld = props => {
@@ -575,7 +575,7 @@ const Main = () => {
       <AppBar />
       // highlight-start
       <Routes>
-        <Route path="/" element={<RepositoryList />} exact />
+        <Route path="/" element={<RepositoryList />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
       // highlight-end

src/content/10/en/part10b.md

@@ -180,7 +180,7 @@ npm install @apollo/client graphql
 Before we can start using Apollo Client, we will need to slightly configure the Metro bundler so that it handles the <i>.cjs</i> file extensions used by the Apollo Client. First, let's install the <i>@expo/metro-config</i> package which has the default Metro configuration:
 
 ```shell
-npm install @expo/metro-config
+npm install @expo/metro-config@0.4.0
 ```
 
 Then, we can add the following configuration to a <i>metro.config.js</i> in the root directory of our project:
@@ -699,7 +699,7 @@ export default createApolloClient;
 
 ### Using React Context for dependency injection
 
-The last piece of the sign-in puzzle is to integrate the storage to the <em>useSignIn</em> hook. To achieve this the hook must be able to access token storage instance we have initialized in the <em>App</em> component. React [Context](https://reactjs.org/docs/context.html) is just the tool we need for the job. Create a directory <i>contexts</i> in the <i>src</i> directory. In that directory create a file <i>AuthStorageContext.js</i> with the following content:
+The last piece of the sign-in puzzle is to integrate the storage to the <em>useSignIn</em> hook. To achieve this the hook must be able to access token storage instance we have initialized in the <em>App</em> component. React [Context](https://react.dev/learn/passing-data-deeply-with-context) is just the tool we need for the job. Create a directory <i>contexts</i> in the <i>src</i> directory. In that directory create a file <i>AuthStorageContext.js</i> with the following content:
 
 ```javascript
 import { createContext } from 'react';
@@ -738,7 +738,7 @@ const App = () => {
 export default App;
 ```
 
-Accessing the storage instance in the <em>useSignIn</em> hook is now possible using the React's [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext) hook like this:
+Accessing the storage instance in the <em>useSignIn</em> hook is now possible using the React's [useContext](https://react.dev/reference/react/useContext) hook like this:
 
 ```javascript
 // ...
@@ -752,7 +752,7 @@ const useSignIn = () => {
 };
 ```
 
-Note that accessing a context's value using the <em>useContext</em> hook only works if the <em>useContext</em> hook is used in a component that is a <i>descendant</i> of the [Context.Provider](https://reactjs.org/docs/context.html#contextprovider) component.
+Note that accessing a context's value using the <em>useContext</em> hook only works if the <em>useContext</em> hook is used in a component that is a <i>descendant</i> of the [Context.Provider](https://react.dev/reference/react/createContext#provider) component.
 
 Accessing the <em>AuthStorage</em> instance with <em>useContext(AuthStorageContext)</em> is quite verbose and reveals the details of the implementation. Let's improve this by implementing a <em>useAuthStorage</em> hook in a <i>useAuthStorage.js</i> file in the <i>hooks</i> directory:
 
@@ -781,7 +781,7 @@ const useSignIn = () => {
 
 The ability to provide data to component's descendants opens tons of use cases for React Context, as we already saw in the [last chapter](/en/part6/react_query_use_reducer_and_the_context) of part 6.
 
-To learn more about these use cases, read Kent C. Dodds' enlightening article [How to use React Context effectively](https://kentcdodds.com/blog/how-to-use-react-context-effectively) to find out how to combine the [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) hook with the context to implement state management. You might find a way to use this knowledge in the upcoming exercises.
+To learn more about these use cases, read Kent C. Dodds' enlightening article [How to use React Context effectively](https://kentcdodds.com/blog/how-to-use-react-context-effectively) to find out how to combine the [useReducer](https://react.dev/reference/react/useReducer) hook with the context to implement state management. You might find a way to use this knowledge in the upcoming exercises.
 
 </div>