Merge branch 'source' into ptbr-translation

Author: mayconblopes

src/content/0/en/part0a.md

@@ -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- do not have asterisk marked exercises since there is no similar dependency on previous parts.
+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.
 
 The speed of completing the course is flexible.
 

src/content/0/fr/part0.md

@@ -6,6 +6,6 @@ lang: fr
 
 <div class="intro">
 
-Dans cette partie, nous allons nous familiariser avec les modalités pratiques de suivi du cours. Après cela, nous aurons un aperçu des bases du développement Web et parlerons également des progrès du développement d'applications Web au cours des dernières décennies.
+Dans cette partie, nous allons nous familiariser avec les modalités pratiques de suivi du cours. Par la suite, nous aurons un aperçu des bases du développement Web et parlerons également des progrès dans le domaine du développement d'applications Web au cours des dernières décennies.
 
 </div>

src/content/0/fr/part0a.md

@@ -13,10 +13,12 @@ Les autres sujets incluent le débogage des applications, la technologie des con
 
 ### Prérequis
 
-Les participants doivent avoir de bonnes compétences en programmation, des connaissances de base en programmation Web et en bases de données, et maîtriser le système de gestion de versions Git. On attend également de vous que vous ayez de la persévérance et une capacité à résoudre des problèmes et à rechercher des informations de manière autonome.
+On s'attend des participants qu'ils aient de bonnes compétences en programmation, des connaissances de base en programmation Web et en bases de données, et qu'ils maîtrisent le système de gestion de versions Git. On attend également de vous que vous ayez de la persévérance et une capacité à résoudre des problèmes et à rechercher des informations de manière autonome.
 
 Une connaissance préalable de JavaScript ou d'autres sujets de cours n'est pas requise.
 
+Quelle est la quantié d'experience en programmation nécessaire?  Difficile à dire avec précision, néanmoins, on s'attend à un niveau de maîtrise suffisante avec <i>votre</i> language, qui équivaut approximativement à 100-200 heures de pratique.
+
 ### Matériel de cours
 
 Le matériel de cours est destiné à être lu une partie à la fois et dans l'ordre.
@@ -29,7 +31,7 @@ Le matériel de cours est basé sur des exemples d'applications en expansion pro
 
 ### Suivre le cours
 
-Le cours contient quatorze parties, dont la première est numérotée 0 par souci de cohérence avec les itérations passées. Une partie correspond à peu près à une semaine (15 à 20 heures en moyenne) d'études, mais la vitesse de réalisation du cours est flexible.
+Le cours contient quatorze parties, dont la première est numérotée 0 par souci de cohérence avec les itérations passées. Une partie correspond environ à une semaine (15 à 20 heures en moyenne) d'études, mais la vitesse de réalisation du cours est flexible.
 
 Passer de la partie <i>n</i> à la partie <i>n+1</i> n'est pas judicieux avant d'avoir acquis une connaissance suffisante des sujets de la partie <i>n</i>. En termes pédagogiques, le cours utilise [Mastery Learning](https://en.wikipedia.org/wiki/Mastery_learning), et vous n'êtes censé passer à la partie suivante qu'après avoir fait suffisamment d'exercices de la partie précédente.
 
@@ -44,7 +46,43 @@ Les statistiques de temps d'exécution des exercices peuvent être trouvées via
 
 ### Chaîne de cours dans Discord et Telegram
 
-Vous pouvez discuter du cours et des sujets connexes dans notre groupe dédié sur <a target='_blank' href='https://study.cs.helsinki.fi/discord/join/fullstack'>Discord</a> et sur <a target='_blank' href='https://t.me/fullstackcourse'>Telegram</a>. Rejoignez la conversation !
+Vous pouvez discuter du cours et des sujets connexes dans notre groupe dédié sur <a target='_blank' href='https://study.cs.helsinki.fi/discord/join/fullstack'>Discord</a> et sur <a target='_blank' href='https://t.me/fullstackcourse'>Telegram</a>. 
+
+Le serveur Discord possède une chaîne fullstack_general et d'autres chaînes spécifiques à chaque partie.  Prenez note que <i>l'utilisation de la chaîne de clavardage principale n'est pas appropriée aux discussions dédiées au matériel du cours.</i>
+
+Rejoignez la conversation !
+
+### Comment recevoir de l'aide par Discord/Telegram
+
+Lorsque vous demandez de l'aide pour un problème par Discord/Telegram, votre question se doit d'être aussi claire et informative que possible.  Si votre question ressemble à ceci:
+
+> <i>Ajouter une nouvelle personne ne fonctionne pas, pouvez vous m'aider?</i>
+
+il est for probable que personne ne répondra.  Le problème pourrait être <i>n'importe où</i>.
+
+Une meilleure question pourrait être:
+
+> <i> Dans l'exercice 2.15, lorsque j'essaie d'ajouter une nouvelle personne à l'application, le serveur répond à 403, bien que la demande me semble correcte.
+>
+> Le code ressemble à ceci
+>
+> ```js
+> // la partie de code pertinente est collée ici
+> // le code doit contenir plusieurs instructions console.log pour faciliter le débogage
+> ```
+>
+> Ce qui suit est imprimé sur la console
+>
+> ```bash
+> // données imprimées sur la console
+> ```
+>
+> L'onglet réseau ressemble à ceci</i>
+>
+> [capture d'écran de la console réseau]
+>
+> Tout le code se trouve ici (un lien vers GitHub)
+
 
 ### Parties et complétion
 
@@ -70,8 +108,6 @@ Une fois que vous avez terminé suffisamment d'exercices pour obtenir une note d
 
 Si vous souhaitez recevoir des crédits universitaires, vous devez réussir l'examen du cours. L'examen ne compte pas dans votre note finale, mais vous devez le réussir. Plus d'infos sur l'examen [ici](/fr/part0/informations_generales#lexamen-du-cours).
 
-La dernière date possible pour passer l'examen est le 10 janvier 2023. **Notez que vous devez vous inscrire à l'examen au plus tard le 9 janvier 2023.**
-
 Vous ne pouvez passer l'examen qu'après avoir soumis suffisamment d'exercices pour cinq crédits. En pratique, il n'est pas judicieux de passer l'examen immédiatement après avoir soumis le nombre critique d'exercices. L'examen est le même pour 5 à 14 crédits et ne compte pas dans votre note.
 
 <i>Vous n'avez pas besoin d'assister à l'examen du cours ou de vous inscrire au cours Open University pour obtenir le certificat du cours.</i>

src/content/1/en/part1a.md

@@ -7,7 +7,7 @@ lang: en
 
 <div class="content">
 
-We will now start getting familiar with probably the most important topic of this course, namely the [React](https://reactjs.org/) library. Let's start by making a simple React application as well as getting to know the core concepts of React.
+We will now start getting familiar with probably the most important topic of this course, namely the [React](https://react.dev/) library. Let's start by making a simple React application as well as getting to know the core concepts of React.
 
 The easiest way to get started by far is by using a tool called [create-react-app](https://github.com/facebook/create-react-app). It is possible (but not necessary) to install <i>create-react-app</i> on your machine if the <i>npm</i> tool that was installed along with Node has a version number of at least <i>5.3</i>.
 
@@ -59,7 +59,7 @@ The files <i>App.css</i>, <i>App.test.js</i>, <i>index.css</i>, <i>logo.svg</i>,
 
 ### Component
 
-The file <i>App.js</i> now defines a [React component](https://reactjs.org/docs/components-and-props.html) with the name <i>App</i>. The command on the final line of file <i>index.js</i>
+The file <i>App.js</i> now defines a [React component](https://react.dev/learn/your-first-component) with the name <i>App</i>. The command on the final line of file <i>index.js</i>
 
 ```js
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
@@ -189,7 +189,7 @@ Did you remember your promise to keep the console open? What was printed out the
 
 ### JSX
 
-It seems like React components are returning HTML markup. However, this is not the case. The layout of React components is mostly written using [JSX](https://reactjs.org/docs/introducing-jsx.html). Although JSX looks like HTML, we are dealing with a way to write JavaScript. Under the hood, JSX returned by React components is compiled into JavaScript.
+It seems like React components are returning HTML markup. However, this is not the case. The layout of React components is mostly written using [JSX](https://react.dev/learn/writing-markup-with-jsx). Although JSX looks like HTML, we are dealing with a way to write JavaScript. Under the hood, JSX returned by React components is compiled into JavaScript.
 
 After compiling, our application looks like this:
 
@@ -277,7 +277,7 @@ Another strong convention is the idea of a <i>root component</i> called <i>App</
 
 ### props: passing data to components
 
-It is possible to pass data to components using so-called [props](https://reactjs.org/docs/components-and-props.html).
+It is possible to pass data to components using so-called [props](https://react.dev/learn/passing-props-to-a-component).
 
 Let's modify the component <i>Hello</i> as follows:
 
@@ -415,7 +415,7 @@ const App = () => {
 
 However, when defining the root component of the application this is not a particularly wise thing to do, and it makes the code look a bit ugly.
 
-Because the root element is stipulated, we have "extra" div elements in the DOM tree. This can be avoided by using [fragments](https://reactjs.org/docs/fragments.html#short-syntax), i.e. by wrapping the elements to be returned by the component with an empty element:
+Because the root element is stipulated, we have "extra" div elements in the DOM tree. This can be avoided by using [fragments](https://react.dev/reference/react/Fragment), i.e. by wrapping the elements to be returned by the component with an empty element:
 
 ```js
 const App = () => {

src/content/1/en/part1c.md

@@ -250,7 +250,7 @@ Making repeated calls to the _render_ method is not the recommended way to re-re
 
 All of our components up till now have been simple in the sense that they have not contained any state that could change during the lifecycle of the component.
 
-Next, let's add state to our application's <i>App</i> component with the help of React's [state hook](https://reactjs.org/docs/hooks-state.html).
+Next, let's add state to our application's <i>App</i> component with the help of React's [state hook](https://react.dev/learn/state-a-components-memory).
 
 We will change the application as follows.  <i>index.js</i> goes back to
 
@@ -377,7 +377,7 @@ Let's change the application so that increasing the counter happens when a user
 
 Button elements support so-called [mouse events](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent), of which [click](https://developer.mozilla.org/en-US/docs/Web/Events/click) is the most common event. The click event on a button can also be triggered with the keyboard or a touch screen despite the name <i>mouse event</i>.
 
-In React, [registering an event handler function](https://reactjs.org/docs/handling-events.html) to the <i>click</i> event happens like this:
+In React, [registering an event handler function](https://react.dev/learn/responding-to-events) to the <i>click</i> event happens like this:
 
 ```js
 const App = () => {
@@ -542,7 +542,7 @@ It's recommended to write React components that are small and reusable across th
 
 Let's first implement a <i>Display</i> component that's responsible for displaying the value of the counter.
 
-One best practice in React is to [lift the state up](https://reactjs.org/docs/lifting-state-up.html) in the component hierarchy. The documentation says:
+One best practice in React is to [lift the state up](https://react.dev/learn/sharing-state-between-components) in the component hierarchy. The documentation says:
 
 > <i>Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor.</i>
 
@@ -629,13 +629,13 @@ const App = () => {
 
 Since we now have an easily reusable <i>Button</i> component, we've also implemented new functionality into our application by adding a button that can be used to decrement the counter.
 
-The event handler is passed to the <i>Button</i> component through the _handleClick_ prop. The name of the prop itself is not that significant, but our naming choice wasn't completely random. React's own official [tutorial](https://reactjs.org/tutorial/tutorial.html) suggests this convention.
+The event handler is passed to the <i>Button</i> component through the _handleClick_ prop. The name of the prop itself is not that significant, but our naming choice wasn't completely random. React's own official [tutorial](https://react.dev/learn/tutorial-tic-tac-toe) suggests this convention.
 
 ### Changes in state cause rerendering
 
 Let's go over the main principles of how an application works once more.
 
-When the application starts, the code in _App_ is executed. This code uses a [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook to create the application state, setting an initial value of the variable _counter_.
+When the application starts, the code in _App_ is executed. This code uses a [useState](https://react.dev/reference/react/useState) hook to create the application state, setting an initial value of the variable _counter_.
 This component contains the _Display_ component - which displays the counter's value, 0 - and three _Button_ components. The buttons all have event handlers, which are used to change the state of the counter.
 
 When one of the buttons is clicked, the event handler is executed. The event handler changes the state of the _App_ component with the _setCounter_ function.

src/content/1/en/part1d.md

@@ -160,7 +160,7 @@ The application appears to work. However, <i>it is forbidden in React to mutate
 
 Storing all of the state in a single state object is a bad choice for this particular application; there's no apparent benefit and the resulting application is a lot more complex. In this case, storing the click counters into separate pieces of state is a far more suitable choice.
 
-There are situations where it can be beneficial to store a piece of application state in a more complex data structure. [The official React documentation](https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables) contains some helpful guidance on the topic.
+There are situations where it can be beneficial to store a piece of application state in a more complex data structure. [The official React documentation](https://react.dev/learn/choosing-the-state-structure) contains some helpful guidance on the topic.
 
 ### Handling arrays
 
@@ -317,7 +317,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://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous), 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" before the component is rendered again.
 
 We can fix the app as follows:
 
@@ -391,7 +391,7 @@ And in all other cases, the component renders the clicking history:
 
 The <i>History</i> component renders completely different React elements depending on the state of the application. This is called <i>conditional rendering</i>.
 
-React also offers many other ways of doing [conditional rendering](https://reactjs.org/docs/conditional-rendering.html). We will take a closer look at this in [part 2](/en/part2).
+React also offers many other ways of doing [conditional rendering](https://react.dev/learn/conditional-rendering). We will take a closer look at this in [part 2](/en/part2).
 
 Let's make one last modification to our application by refactoring it to use the _Button_ component that we defined earlier on:
 
@@ -451,7 +451,7 @@ const App = () => {
 
 ### Old React
 
-In this course, we use the [state hook](https://reactjs.org/docs/hooks-state.html) to add state to our React components, which is part of the newer versions of React and is available from version [16.8.0](https://www.npmjs.com/package/react/v/16.8.0) onwards. Before the addition of hooks, there was no way to add state to functional components. Components that required state had to be defined as [class](https://reactjs.org/docs/react-component.html) components, using the JavaScript class syntax.
+In this course, we use the [state hook](https://react.dev/learn/state-a-components-memory) to add state to our React components, which is part of the newer versions of React and is available from version [16.8.0](https://www.npmjs.com/package/react/v/16.8.0) onwards. Before the addition of hooks, there was no way to add state to functional components. Components that required state had to be defined as [class](https://react.dev/reference/react/Component) components, using the JavaScript class syntax.
 
 In this course, we have made the slightly radical decision to use hooks exclusively from day one, to ensure that we are learning the current and future variations of React. Even though functional components are the future of React, it is still important to learn the class syntax, as there are billions of lines of legacy React code that you might end up maintaining someday. The same applies to documentation and examples of React that you may stumble across on the internet.
 
@@ -1115,7 +1115,7 @@ The internet is full of React-related material. However, we use the new style of
 
 You may find the following links useful:
 
-- The [official React documentation](https://reactjs.org/docs/hello-world.html) 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;
+- 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