Merge branch 'source' into part0-spanish

Author: pablo-maff

src/content/1/en/part1c.md

@@ -584,7 +584,7 @@ Next, let's make a <i>Button</i> component for the buttons of our application. W
 ```js
 const Button = (props) => {
   return (
-    <button onClick={props.handleClick}>
+    <button onClick={props.onClick}>
       {props.text}
     </button>
   )
@@ -608,15 +608,15 @@ const App = () => {
       <Display counter={counter}/>
       // highlight-start
       <Button
-        handleClick={increaseByOne}
+        onClick={increaseByOne}
         text='plus'
       />
       <Button
-        handleClick={setToZero}
+        onClick={setToZero}
         text='zero'
       />     
       <Button
-        handleClick={decreaseByOne}
+        onClick={decreaseByOne}
         text='minus'
       />           
       // highlight-end
@@ -671,9 +671,9 @@ const App = () => {
   return (
     <div>
       <Display counter={counter} />
-      <Button handleClick={increaseByOne} text="plus" />
-      <Button handleClick={setToZero} text="zero" />
-      <Button handleClick={decreaseByOne} text="minus" />
+      <Button onClick={increaseByOne} text="plus" />
+      <Button onClick={setToZero} text="zero" />
+      <Button onClick={decreaseByOne} text="minus" />
     </div>
   )
 } 
@@ -720,7 +720,7 @@ We can simplify the Button component as well.
 ```js
 const Button = (props) => {
   return (
-    <button onClick={props.handleClick}>
+    <button onClick={props.onClick}>
       {props.text}
     </button>
   )
@@ -729,9 +729,24 @@ const Button = (props) => {
 
 We can use destructuring to get only the required fields from <i>props</i>, and use the more compact form of arrow functions:
 
+**NB**: While building your own components, you can name their event handler props anyway you like, for this you can refer to the react's documnetion on [Naming event handler props](https://react.dev/learn/responding-to-events#naming-event-handler-props). It goes as following:
+
+> By convention, event handler props should start with `on`, followed by a capital letter.
+For example, the Button component’s `onClick` prop could have been called `onSmash`:
+
+```js
+const Button = ({ onClick, text }) => (
+  <button onClick={onClick}>
+    {text}
+  </button>
+)
+```
+
+could also be called as following:
+
 ```js
-const Button = ({ handleClick, text }) => (
-  <button onClick={handleClick}>
+const Button = ({ onSmash, text }) => (
+  <button onClick={onSmash}>
     {text}
   </button>
 )
@@ -740,9 +755,9 @@ const Button = ({ handleClick, text }) => (
 We can simplify the Button component once more by declaring the return statement in just one line:
 
 ```js
-const Button = ({ handleClick, text }) => <button onClick={handleClick}>{text}</button>
+const Button = ({ onSmash, text }) => <button onSmash={onSmash}>{text}</button>
 ```
 
-However, be careful to not oversimplify your components, as this makes adding complexity a more tedious task down the road.
+**NB**: However, be careful to not oversimplify your components, as this makes adding complexity a more tedious task down the road.
 
 </div>

src/content/1/fr/part1.md

@@ -8,4 +8,7 @@ lang: fr
 
 Dans cette partie, nous nous familiariserons avec la bibliothèque React, que nous utiliserons pour écrire le code qui s'exécute dans le navigateur. Nous examinerons également certaines fonctionnalités de JavaScript qui sont importantes pour comprendre React.
 
+<i>Partie mise à jour le 11 août 2023</i>
+- <i>Create React App a été remplacé par Vite</i>
+
 </div>

src/content/1/fr/part1c.md

@@ -191,7 +191,7 @@ const App = (props) => {
 export default App
 ```
 
-Et le fichier <in>index.js</it> devient :
+Et le fichier <in>main.js</it> devient :
 
 ```js
 import React from 'react'
@@ -251,7 +251,7 @@ Jusqu'à présent, tous nos composants étaient simples dans le sens où ils ne
 
 Ensuite, ajoutons un état au composant <i>App</i> de notre application à l'aide du [state hook](https://reactjs.org/docs/hooks-state.html) de React.
 
-Nous allons modifier l'application comme suit. <i>index.js</i> revient à
+Nous allons modifier l'application comme suit. <i>main.js</i> revient à
 
 ```js
 import React from 'react'
@@ -364,7 +364,10 @@ const App = () => {
 
 Il est facile de suivre les appels effectués à la fonction de rendu du composant <i>App</i> :
 
-![](../../images/1/4e.png)
+![Capture d'écran de la fonction de rendu avec les outils de développement.x](../../images/1/4e.png)
+
+Votre console de navigateur était-elle ouverte ? Si ce n'était pas le cas, promettez que ce sera la dernière fois qu'on vous le rappellera.
+
 
 ### Gestion des événements
 
@@ -624,9 +627,11 @@ const App = () => {
 }
 ```
 
-Puisque nous avons maintenant un composant <i>Button</i> facilement réutilisable, nous avons également implémenté de nouvelles fonctionnalités dans notre application en ajoutant un bouton qui peut être utilisé pour décrémenter le compteur.
+Étant donné que nous avons maintenant un composant <i>Button</i> facilement réutilisable, nous avons également implémenté une nouvelle fonctionnalité dans notre application en ajoutant un bouton qui peut être utilisé pour décrémenter le compteur.
+
+Le gestionnaire d'événements est passé au composant <i>Button</i> via la prop _handleClick_. Le nom de la prop en lui-même n'est pas très significatif, mais notre choix de nom n'était pas complètement aléatoire.
 
-Le gestionnaire d'événements est transmis au composant <i>Button</i> via la prop _onClick_. Le nom de la prop lui-même n'est pas assez significatif, mais notre choix de nom n'était pas complètement aléatoire. Le [tutoriel](https://reactjs.org/tutorial/tutorial.html) officiel de React suggère cette convention.
+Le [tutoriel](https://react.dev/learn/tutorial-tic-tac-toe) officiel de React suggère : "En React, il est conventionnel d'utiliser des noms de type onSomething pour les props qui représentent des événements et handleSomething pour les définitions de fonctions qui gèrent ces événements."
 
 ### Les changements d'état entraînent un nouveau rendu
 
@@ -656,7 +661,7 @@ const Display = (props) => {
 ```
 
 Le composant utilise uniquement le champ _counter_ de ses <i>props</i>.
-Cela signifie que nous pouvons simplifier le composant en utilisant la [déstructuration](/fr/part1/etat_des_composants_gestionnaires_devenements#destructuration), comme ceci :
+Cela signifie que nous pouvons simplifier le composant en utilisant [la destructuration](/fr/part1/etat_des_composants_gestionnaires_devenements#destructuration), comme ceci :
 
 ```js
 const Display = ({ counter }) => {
@@ -666,8 +671,7 @@ const Display = ({ counter }) => {
 }
 ```
 
-La fonction définissant le composant ne contient que l'instruction return, donc
-nous pouvons définir la fonction en utilisant la forme plus compacte des fonctions fléchées :
+La fonction qui définit le composant ne contient que l'instruction de retour, nous pouvons donc définir la fonction en utilisant la forme plus compacte des fonctions fléchées :
 
 ```js
 const Display = ({ counter }) => <div>{counter}</div>
@@ -685,7 +689,12 @@ const Button = (props) => {
 }
 ```
 
-Nous pouvons utiliser la déstructuration pour obtenir uniquement les champs requis à partir de <i>props</i>, et utiliser la forme plus compacte des fonctions fléchées :
+Nous pouvons utiliser la destructuration pour obtenir uniquement les champs requis des <i>props</i> et utiliser la forme plus compacte des fonctions fléchées :
+
+**NB** : Lors de la création de vos propres composants, vous pouvez nommer les props des gestionnaires d'événements comme bon vous semble, pour cela, vous pouvez vous référer à la documentation de React sur [Naming event handler props](https://react.dev/learn/responding-to-events#naming-event-handler-props). Cela se présente comme suit :
+
+> Par convention, les props des gestionnaires d'événements doivent commencer par `on`, suivi d'une lettre majuscule.
+Par exemple, la prop `onClick` du composant Button aurait pu s'appeler `onSmash` :
 
 ```js
 const Button = ({ onClick, text }) => (
@@ -695,12 +704,21 @@ const Button = ({ onClick, text }) => (
 )
 ```
 
-Nous pouvons simplifier une fois de plus le composant Button en déclarant l'instruction return sur une seule ligne :
+ou encore comme suit :
+
+```js
+const Button = ({ onSmash, text }) => (
+  <button onClick={onSmash}>
+    {text}
+  </button>
+```
+
+Nous pouvons simplifier une fois de plus le composant Button en déclarant l'instruction de retour en une seule ligne :
 
 ```js
-const Button = ({ onClick, text }) => <button onClick={onClick}>{text}</button>
+const Button = ({ onSmash, text }) => <button onSmash={onSmash}>{text}</button>
 ```
 
-Cependant, veillez à ne pas trop simplifier vos composants, car cela pourrait rendre la lecture du code plus fastidieuse.
+**NB** : Cependant, veillez à ne pas trop simplifier vos composants, car cela rend l'ajout de complexité plus fastidieux par la suite.
 
 </div>

src/content/10/en/part10a.md

@@ -138,7 +138,7 @@ Now that we are somewhat familiar with the development environment let's enhance
 npm install --save-dev eslint @babel/eslint-parser eslint-plugin-react eslint-plugin-react-native
 ```
 
-Next, let's add the ESLint configuration into a <i>.eslintrc</i> file in the <i>rate-repository-app</i> directory with the following content:
+Next, let's add the ESLint configuration into a <i>.eslintrc.json</i> file in the <i>rate-repository-app</i> directory with the following content:
 
 ```javascript
 {

src/content/4/en/part4c.md

@@ -214,7 +214,7 @@ const usersRouter = require('./controllers/users')
 app.use('/api/users', usersRouter)
 ```
 
-The contents of the file that defines the router are as follows:
+The contents of the file, <i>controllers/users.js</i>, that defines the router are as follows:
 
 ```js
 const bcrypt = require('bcrypt')
@@ -350,7 +350,7 @@ Mongoose does not have a built-in validator for checking the uniqueness of a fie
 npm install mongoose-unique-validator
 ```
 
-and extend the code by following the library documentation:
+and extend the code by following the library documentation in <i>models/user.js</i>:
 
 ```js
 const mongoose = require('mongoose')
@@ -411,7 +411,7 @@ You can find the code for our current application in its entirety in the <i>part
 
 The code for creating a new note has to be updated so that the note is assigned to the user who created it.
 
-Let's expand our current implementation so that the information about the user who created a note is sent in the <i>userId</i> field of the request body:
+Let's expand our current implementation in <i>controllers/notes.js</i> so that the information about the user who created a note is sent in the <i>userId</i> field of the request body:
 
 ```js
 const User = require('../models/user') //highlight-line
@@ -486,7 +486,7 @@ We would like our API to work in such a way, that when an HTTP GET request is ma
 
 As previously mentioned, document databases do not properly support join queries between collections, but the Mongoose library can do some of these joins for us. Mongoose accomplishes the join by doing multiple queries, which is different from join queries in relational databases which are <i>transactional</i>, meaning that the state of the database does not change during the time that the query is made. With join queries in Mongoose, nothing can guarantee that the state between the collections being joined is consistent, meaning that if we make a query that joins the user and notes collections, the state of the collections may change during the query.
 
-The Mongoose join is done with the [populate](http://mongoosejs.com/docs/populate.html) method. Let's update the route that returns all users first:
+The Mongoose join is done with the [populate](http://mongoosejs.com/docs/populate.html) method. Let's update the route that returns all users first in <i>controllers/users.js</i>:
 
 ```js
 usersRouter.get('/', async (request, response) => {
@@ -520,7 +520,7 @@ The result is now exactly like we want it to be:
 
 ![combined data showing no repetition](../../images/4/14new.png)
 
-Let's also add a suitable population of user information to notes:
+Let's also add a suitable population of user information to notes in <i>controllers/notes.js</i>:
 
 ```js
 notesRouter.get('/', async (request, response) => {

src/content/4/en/part4d.md

@@ -347,6 +347,8 @@ Usernames, passwords and applications using token authentication must always be
 
 We will implement login to the frontend in the [next part](/en/part5).
 
+NOTE: At this stage, in the deployed notes app, it is expected that the creating a note feature will stop working as the backend login feature is not yet linked to the frontend.
+
 </div>
 
 <div class="tasks">
@@ -412,7 +414,7 @@ Modify adding new blogs so that it is only possible if a valid token is sent wit
 
 #### 4.20*: bloglist expansion, step8
 
-[This example](/en/part4/token_authentication) from part 4 shows taking the token from the header with the _getTokenFrom_ helper function.
+[This example](/en/part4/token_authentication) from part 4 shows taking the token from the header with the _getTokenFrom_ helper function in <i>controllers/blogs.js</i>.
 
 If you used the same solution, refactor taking the token to a [middleware](/en/part3/node_js_and_express#middleware). The middleware should take the token from the <i>Authorization</i> header and place it into the <i>token</i> field of the <i>request</i> object.
 
@@ -489,8 +491,11 @@ blogsRouter.delete('/:id', async (request, response) => {
 Note that it is possible to register a middleware only for a specific set of routes. So instead of using _userExtractor_ with all the routes,
 
 ```js
+const middleware = require('../utils/middleware');
+// ...
+
 // use the middleware in all routes
-app.use(userExtractor) // highlight-line
+app.use(middleware.userExtractor) // highlight-line
 
 app.use('/api/blogs', blogsRouter)  
 app.use('/api/users', usersRouter)
@@ -500,16 +505,22 @@ app.use('/api/login', loginRouter)
 we could register it to be only executed with path <i>/api/blogs</i> routes:
 
 ```js
+const middleware = require('../utils/middleware');
+// ...
+
 // use the middleware only in /api/blogs routes
-app.use('/api/blogs', userExtractor, blogsRouter) // highlight-line
+app.use('/api/blogs', middleware.userExtractor, blogsRouter) // highlight-line
 app.use('/api/users', usersRouter)
 app.use('/api/login', loginRouter)
 ```
 
 As can be seen, this happens by chaining multiple middlewares as the parameter of function <i>use</i>. It would also be possible to register a middleware only for a specific operation:
 
 ```js
-router.post('/', userExtractor, async (request, response) => {
+const middleware = require('../utils/middleware');
+// ...
+
+router.post('/', middleware.userExtractor, async (request, response) => {
   // ...
 }
 ```

src/content/6/en/part6d.md

@@ -224,7 +224,8 @@ import { getNotes, createNote } from './requests'
 const App = () => {
   const queryClient = useQueryClient() // highlight-line
 
-  const newNoteMutation = useMutation(createNote, {
+  const newNoteMutation = useMutation({
+    mutationFn: createNote, 
     onSuccess: () => {  // highlight-line
       queryClient.invalidateQueries({ queryKey: ['notes'] })  // highlight-line
     },
@@ -258,7 +259,8 @@ import { getNotes, createNote, updateNote } from './requests' // highlight-line
 const App = () => {
   // ...
 
-  const updateNoteMutation = useMutation(updateNote, {
+  const updateNoteMutation = useMutation({
+    mutationFn: updateNote,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['notes'] })
     },
@@ -281,7 +283,8 @@ The current code for the application is in [GitHub](https://github.com/fullstack
 The application works well, and the code is relatively simple. The ease of making changes to the list of notes is particularly surprising. For example, when we change the importance of a note, invalidating the query <i>notes</i> is enough for the application data to be updated:
 
 ```js
-  const updateNoteMutation = useMutation(updateNote, {
+  const updateNoteMutation = useMutation({
+    mutationFn: updateNote,
     onSuccess: () => {
       queryClient.invalidateQueries('notes') // highlight-line
     },
@@ -302,7 +305,8 @@ The change for the mutation adding a new note is as follows:
 const App = () => {
   const queryClient =  useQueryClient() 
 
-  const newNoteMutation = useMutation(createNote, {
+  const newNoteMutation = useMutation({
+    mutationFn: createNote,
     onSuccess: (newNote) => {
       const notes = queryClient.getQueryData(['notes']) // highlight-line
       queryClient.setQueryData(['notes'], notes.concat(newNote)) // highlight-line
@@ -564,7 +568,7 @@ const App = () => {
 
   return (
     <CounterContext.Provider value={[counter, counterDispatch]}>  // highlight-line
-      <Display counter={counter}/>
+      <Display />
       <div>
         <Button type='INC' label='+' />
         <Button type='DEC' label='-' />

src/content/7/en/part7d.md

@@ -463,7 +463,7 @@ When using CSS, we have to use [css](https://webpack.js.org/loaders/css-loader/)
       use: ['style-loader', 'css-loader'],
     },
     // highlight-end
-  ];
+  ],
 }
 ```
 

src/content/9/en/part9d.md

@@ -587,7 +587,7 @@ const App = () => {
 }
 ```
 
-When we hover over the *useState* calls in the editor, we notice couple of interesting things.
+When we hover over the *useState* calls in the editor, we notice a couple of interesting things.
 
 The type of the first call *useState('')* looks like the following: