Merge pull request #4173 from dsr20030703/source

Update part 3 Chinese translation, and a bit change on part 3 content

Author: vejol

src/content/1/zh/part1a.md

@@ -58,7 +58,7 @@ Vite[默认](https://vitejs.dev/config/server-options.html#server-port)在端口
 ![](../../images/1/1-vite4.png)
 
 <!-- The code of the application resides in the <i>src</i> folder. Let's simplify the default code such that the contents of the file main.jsx looks like this:-->
-应用的代码位于<i>src</i>文件夹中。让我们简化默认代码，使文件<i>main.jsx</i>的内容如下所示：
+应用的代码位于<i>src</i>文件夹中。让我们简化默认代码，使文件main.jsx的内容如下所示：
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -294,7 +294,7 @@ JSX是“类[XML](https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduct
 ### 多个组件
 
 <!-- Let's modify the file <i>App.jsx</i> as follows: -->
-让我们修改<i>App.js</i>文件如下：
+让我们修改<i>App.jsx</i>文件如下：
 
 ```js
 // highlight-start
@@ -787,8 +787,8 @@ const App = () => {
 export default App
 ```
 
-<!-- and remove the extra files App.css and index.css, also remove the directory assets.-->
-然后删除多余的文件App.css和index.css，以及目录assets。
+<!-- and remove the extra files <i>App.css</i> and <i>index.css</i>, also remove the directory <i>assets</i>. -->
+然后删除多余的文件<i>App.css</i>和<i>index.css</i>，以及目录<i>assets</i>。
 
 <!-- Unfortunately, the entire application is in the same component. Refactor the code so that it consists of three new components: <i>Header</i>, <i>Content</i>, and <i>Total</i>. All data still resides in the <i>App</i> component, which passes the necessary data to each component using <i>props</i>. <i>Header</i> takes care of rendering the name of the course, <i>Content</i> renders the parts and their number of exercises and <i>Total</i> renders the total number of exercises.-->
 整个应用都在同一个组件中。重构代码，使其由三个新组件组成：<i>Header</i>、<i>Content</i>和<i>Total</i>。所有数据仍驻留在<i>App</i>组件中，使用<i>props</i>将必要的数据传递给每个组件。<i>Header</i>负责显示课程的名称，<i>Content</i>显示各部分及其练习的数量，<i>Total</i>显示练习的总数量。

src/content/1/zh/part1c.md

@@ -199,8 +199,8 @@ const Hello = ({ name, age }) => {
 <!-- Up to this point, our applications have been static — their appearance remains unchanged after the initial rendering. But what if we wanted to create a counter that increases in value, either over time or when a button is clicked? -->
 到目前为止，我们所有的应用都是静态的——在最初的渲染之后，其外观保持不变。如果我们想创建一个计数器，其值随着时间的推移或点击按钮而增加呢？
 
-<!-- Let's start with the following. File <i>App.js</i> becomes:-->
-让我们从将文件<i>App.js</i>变成下面的样子开始：
+<!-- Let's start with the following. File <i>App.jsx</i> becomes: -->
+让我们从将文件<i>App.jsx</i>变成下面的样子开始：
 
 ```js
 const App = (props) => {
@@ -213,8 +213,8 @@ const App = (props) => {
 export default App
 ```
 
-<!-- And file <i>index.js</i> becomes:-->
-将文件<i>index.js</i>改成：
+<!-- And file <i>main.jsx</i> becomes: -->
+将文件<i>main.jsx</i>改成：
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -285,7 +285,7 @@ setInterval(() => {
 接下来，让我们借助React的[状态hook](https://react.dev/learn/state-a-components-memory)来给我们的应用的<i>App</i>组件添加状态。
 
 <!-- We will change the application as follows. <i>main.jsx</i> goes back to: -->
-我们将改变应用的内容如下。<i>main.js</i>回到：
+我们将改变应用的内容如下。<i>main.jsx</i>回到：
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -295,8 +295,8 @@ import App from './App'
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 ```
 
-<!-- and <i>App.js</i> changes to the following:-->
-而<i>App.js</i>则改为：
+<!-- and <i>App.jsx</i> changes to the following: -->
+而<i>App.jsx</i>则改为：
 
 ```js
 import { useState } from 'react' // highlight-line

src/content/1/zh/part1d.md

@@ -1413,7 +1413,7 @@ rm -rf node_modules/ && npm i
 注意你的应用只需要在一个浏览器会话中运行。一旦你刷新页面，所收集的反馈消失也不要紧。
 
 <!-- It is advisable to use the same structure that is used in the material and previous exercise. File <i>main.jsx</i> is as follows: -->
-建议使用和教材与之前练习中相同的结构。文件<i>main.js</i>如下：
+建议使用和教材与之前练习中相同的结构。文件<i>main.jsx</i>如下：
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -1584,10 +1584,10 @@ export default App
 ```
 
 <!-- Content of the file <i>main.jsx</i> is the same as in previous exercises. -->
-文件<i>main.js</i>的内容与之前的练习相同。
+文件<i>main.jsx</i>的内容与之前的练习相同。
 
 <!-- Find out how to generate random numbers in JavaScript, eg. via search engine or on [Mozilla Developer Network](https://developer.mozilla.org). Remember that you can test generating random numbers e.g. straight in the console of your browser.-->
-找出如何在JavaScript中生成随机数，例如通过搜索引擎或去[Mozilla Developer Network](https://developer.mozilla.org)。记住，你可以直接在浏览器的控制台测试生成随机数等。
+查找如何在JavaScript中生成随机数，例如通过搜索引擎或去[Mozilla Developer Network](https://developer.mozilla.org)。记住，你可以直接在浏览器的控制台测试生成随机数等。
 
 <!-- Your finished application could look something like this:-->
 你完成的应用可能如下所示：

src/content/2/zh/part2a.md

@@ -107,8 +107,8 @@ Visual Studio Code里可以很方便地创建“Snippets”（代码片段），
 <!-- Now, we will build the frontend, or the user interface (the part users see in their browser), using React, similar to the example application from [part 0](/en/part0). -->
 现在我们将用React做一个类似[第0章节](/zh/part0)中示例程序的前端，或者叫用户界面（用户在浏览器中所看到的部分）。
 
-<!-- Let's start with the following (the file <i>App.js</i>):-->
-让我们从下面开始（文件<i>App.js</i>）：
+<!-- Let's start with the following (the file <i>App.jsx</i>): -->
+让我们从下面开始（文件<i>App.jsx</i>）：
 
 ```js
 const App = (props) => {
@@ -130,7 +130,7 @@ export default App
 ```
 
 <!-- The file <i>main.jsx</i> looks like this: -->
-文件<i>main.js</i>如下所示：
+文件<i>main.jsx</i>如下所示：
 
 ```js
 import ReactDOM from 'react-dom/client'

src/content/3/en/part3a.md

@@ -41,7 +41,7 @@ The file defines, for instance, that the entry point of the application is the <
 
 Let's make a small change to the <i>scripts</i> object by adding a new script command.
 
-```bash
+```json
 {
   // ...
   "scripts": {
@@ -72,7 +72,7 @@ npm start
 
 The <i>start</i> npm script works because we defined it in the <i>package.json</i> file:
 
-```bash
+```json
 {
   // ...
   "scripts": {
@@ -370,7 +370,7 @@ Now, changes to the application's code will cause the server to restart automati
 
 Let's define a custom <i>npm script</i> in the <i>package.json</i> file to start the development server:
 
-```bash
+```json
 {
   // ..
   "scripts": {
@@ -735,7 +735,7 @@ The function body contains a row that looks a bit intriguing:
 Math.max(...notes.map(n => Number(n.id)))
 ```
 
-What exactly is happening in that line of code? <em>notes.map(n => n.id)</em> creates a new array that contains all the ids of the notes in number form. [Math.max](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max) returns the maximum value of the numbers that are passed to it. However, <em>notes.map(n => Number(n.id))</em> is an <i>array</i> so it can't directly be given as a parameter to _Math.max_. The array can be transformed into individual numbers by using the "three dot" [spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) syntax <em>...</em>.
+What exactly is happening in that line of code? <em>notes.map(n => Number(n.id))</em> creates a new array that contains all the ids of the notes in number form. [Math.max](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max) returns the maximum value of the numbers that are passed to it. However, <em>notes.map(n => Number(n.id))</em> is an <i>array</i> so it can't directly be given as a parameter to _Math.max_. The array can be transformed into individual numbers by using the "three dot" [spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) syntax <em>...</em>.
 
 </div>
 

src/content/3/en/part3b.md

@@ -457,7 +457,7 @@ Because in development mode the frontend is at the address <i>localhost:5173</i>
 
 If the project was created with Vite, this problem is easy to solve. It is enough to add the following declaration to the <i>vite.config.js</i> file of the frontend directory.
 
-```bash
+```js
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 

src/content/3/en/part3d.md

@@ -249,7 +249,7 @@ export default [
 ]
 ```
 
-So far, our ESLint configuration file defines the _files_ option with _["**/*.js"]_, which tells ESLint to look at all JavaScript files in our project folder. The _languageOptions_ property specifies options related to language features that ESLint should expect, in which we defined the _sourceType_ option as "commonjs". This indicates that the JavaScript code in our project uses the CommonJS module system, allowing ESLint to parse the code accordingly.  
+So far, our ESLint configuration file defines the _files_ option with _["\*\*/\*.js"]_, which tells ESLint to look at all JavaScript files in our project folder. The _languageOptions_ property specifies options related to language features that ESLint should expect, in which we defined the _sourceType_ option as "commonjs". This indicates that the JavaScript code in our project uses the CommonJS module system, allowing ESLint to parse the code accordingly.  
 
 The _globals_ property specifies global variables that are predefined. The spread operator applied here tells ESLint to include all global variables defined in the _globals.node_ settings such as the _process_. In the case of browser code we would define here _globals.browser_ to allow browser specific global variables like _window_, and _document_.
 

src/content/3/zh/part3.md

@@ -7,6 +7,15 @@ lang: zh
 <div class="intro">
 
 <!-- In this part our focus shifts towards the backend, that is, towards implementing functionality on the server side of the stack. We will implement a simple REST API in Node.js by using the Express library, and the application's data will be stored in a MongoDB database. At the end of this part, we will deploy our application to the internet.-->
- 在这一部分，我们的重点转向后端，也就是在堆栈的服务器端实现功能。我们将通过使用Express库在Node.js中实现一个简单的REST API，应用的数据将被存储在MongoDB数据库中。在这一部分的最后，我们将把我们的应用部署到互联网上。
+在这一部分，我们将重点转向后端，也就是在全栈中的服务端实现功能。我们将用 Express 库在 Node.js 中实现一个简单的 REST API，并将应用的数据将存储在 MongoDB 数据库中。在这一章节的最后，我们将把我们的应用部署到互联网上。
+
+<!-- <i>Part updated on 16th March 2025</i> -->
+<i>原文更新于 2025 年 3 月 16 日<i>
+<!-- - <i>Node updated to version v22.3.0</i> -->
+- <i>Node 版本更新至 v22.3.0</i>
+<!-- - <i>Nodemon replaced with the node --watch command</i> -->
+- <i>nodemon 替换为 node --watch 命令</i>
+<!-- - <i>MongoDB instructions updated and reformatted</i> -->
+- <i>更新并格式化 MongoDB 指令</i>
 
 </div>