tuyetvy154
New member
## 46. Hoàn thành giao diện tiêu đề đa ngôn ngữ - Bản sao BookingCare 3
### 1. Giới thiệu
Trong hướng dẫn này, chúng tôi sẽ hoàn thành giao diện tiêu đề đa ngôn ngữ cho bản sao của BookingCare 3. Chúng tôi sẽ thêm khả năng thay đổi ngôn ngữ của trang web trong tiêu đề và chúng tôi cũng sẽ đảm bảo rằng ngôn ngữ chính xác được sử dụng cho tất cảcủa văn bản trên trang web.
### 2. Điều kiện tiên quyết
Để hoàn thành hướng dẫn này, bạn sẽ cần những điều sau đây:
* Một bản sao của kho lưu trữ BookingCare 3
* Node.js và NPM đã cài đặt
* Trình chỉnh sửa văn bản hoặc IDE
### 3. Bắt đầu
Đầu tiên, chúng ta cần cài đặt các phụ thuộc cần thiết.Chúng tôi có thể làm điều này bằng cách chạy lệnh sau trong thư mục gốc của dự án của chúng tôi:
`` `
Cài đặt NPM
`` `
Khi các phụ thuộc đã được cài đặt, chúng ta có thể bắt đầu bằng cách tạo một tệp mới có tên là `header.js` trong thư mục` src/thành phần`.Tệp này sẽ chứa mã cho giao diện tiêu đề đa ngôn ngữ của chúng tôi.
### 4. Tạo giao diện tiêu đề
Giao diện tiêu đề sẽ bao gồm một vài yếu tố khác nhau.Chúng tôi sẽ cần một phần tử div để chứa tiêu đề, một phần tử UL để liệt kê các ngôn ngữ có sẵn và một phần tử nút cho mỗi ngôn ngữ.
Chúng ta có thể bắt đầu bằng cách tạo phần tử Div cho tiêu đề.Chúng tôi có thể làm điều này bằng cách thêm mã sau vào tệp `header.js` của chúng tôi:
`` `JS
nhập phản ứng, {usestate} từ "React";
const header = () => {
const [ngôn ngữ, ngôn ngữ setl] = usestate ("en");
trở lại (
<div className = "tiêu đề">
<ul>
<li>
<nút onclick = {() => setLangage ("en")}> tiếng Anh </nút>
</li>
<li>
<nút onclick = {() => setLangage ("fr")}> tiếng Pháp </nút>
</li>
<li>
<nút onclick = {() => setLangage ("es")}> Tây Ban Nha </nút>
</li>
</ul>
</div>
);
};
Xuất tiêu đề mặc định;
`` `
Mã này sẽ tạo ra một phần tử div với một lớp `header`.Bên trong phần tử DIV, chúng tôi sẽ tạo một phần tử UL để liệt kê các ngôn ngữ có sẵn.Mỗi ngôn ngữ sẽ được biểu diễn bằng một yếu tố nút.
### 5. Thay đổi ngôn ngữ xử lý
Bây giờ chúng ta cần xử lý các thay đổi ngôn ngữ.Khi người dùng nhấp vào nút ngôn ngữ, chúng ta cần cập nhật biến trạng thái `ngôn ngữ` và sau đó hiển thị lại giao diện tiêu đề.
Chúng tôi có thể làm điều này bằng cách thêm mã sau vào tệp `header.js` của chúng tôi:
`` `JS
nhập phản ứng, {usestate} từ "React";
const header = () => {
const [ngôn ngữ, ngôn ngữ setl] = usestate ("en");
const handlelanguagechange = (e) => {
SetLangage (e.Target.TextContent);
};
trở lại (
<div className = "tiêu đề">
<ul>
<li>
<nút onclick = {handlelanguagechange}> tiếng Anh </nút>
</li>
<li>
<nút onclick = {handlelanguagechange}> tiếng Pháp </nút>
</li>
<li>
<nút onclick = {handlelanguagechange}> Tây Ban Nha </nút>
</li>
</ul>
</div>
);
};
Xuất tiêu đề mặc định;
`` `
Mã này sẽ thêm chức năng `Handlangangechange` vào thành phần của chúng tôi.Hàm này sẽ được gọi khi người dùng nhấp vào nút ngôn ngữ.Hàm sẽ cập nhật biến trạng thái `ngôn ngữ` và sau đó hiển thị lại giao diện tiêu đề.
### 6. Kiểm tra giao diện tiêu đề
Bây giờ chúng tôi có thể kiểm tra giao diện tiêu đề của mình bằng cách chạy lệnh sau trong thư mục gốc của dự án của chúng tôi:
`` `
NPM bắt đầu
`` `
Điều này sẽ bắt đầu một máy chủ phát triển trên cổng 3000. Bây giờ chúng tôi có thể mở trình duyệt và điều hướng đến `http: // localhost: 3000`.Chúng ta sẽ thấy giao diện tiêu đề sau:
! [Giao diện tiêu đề đa ngôn ngữ] ( )
Bây giờ chúng ta có thể thử nhấp vào các nút ngôn ngữ khác nhau để xem giao diện thay đổi như thế nào.
### 7. Kết luận
Trong hướng dẫn này, chúng tôi đã học cách hoàn thành giao diện tiêu đề đa ngôn ngữ cho bản sao của BookingCare 3. Chúng tôi đã thêm khả năng thay đổi ngôn ngữ của trang web trong tiêu đề và chúng tôi cũng đảm bảo rằng ngôn ngữ chính xác đã được sử dụng
=======================================
## 46. Completing the multi-language header interface - Clone Bookingcare 3
### 1. Introduction
In this tutorial, we will complete the multi-language header interface for our clone of Bookingcare 3. We will add the ability to change the language of the site in the header, and we will also make sure that the correct language is used for all of the text on the site.
### 2. Prerequisites
To complete this tutorial, you will need the following:
* A clone of the Bookingcare 3 repository
* Node.js and npm installed
* A text editor or IDE
### 3. Getting Started
First, we need to install the necessary dependencies. We can do this by running the following command in the root directory of our project:
```
npm install
```
Once the dependencies have been installed, we can start by creating a new file called `header.js` in the `src/components` directory. This file will contain the code for our multi-language header interface.
### 4. Creating the Header Interface
The header interface will consist of a few different elements. We will need a div element to contain the header, a ul element to list the available languages, and a button element for each language.
We can start by creating the div element for the header. We can do this by adding the following code to our `header.js` file:
```js
import React, { useState } from "react";
const Header = () => {
const [language, setLanguage] = useState("en");
return (
<div className="header">
<ul>
<li>
<button onClick={() => setLanguage("en")}>English</button>
</li>
<li>
<button onClick={() => setLanguage("fr")}>French</button>
</li>
<li>
<button onClick={() => setLanguage("es")}>Spanish</button>
</li>
</ul>
</div>
);
};
export default Header;
```
This code will create a div element with a class of `header`. Inside the div element, we will create a ul element to list the available languages. Each language will be represented by a button element.
### 5. Handling Language Changes
We now need to handle language changes. When a user clicks on a language button, we need to update the `language` state variable and then re-render the header interface.
We can do this by adding the following code to our `header.js` file:
```js
import React, { useState } from "react";
const Header = () => {
const [language, setLanguage] = useState("en");
const handleLanguageChange = (e) => {
setLanguage(e.target.textContent);
};
return (
<div className="header">
<ul>
<li>
<button onClick={handleLanguageChange}>English</button>
</li>
<li>
<button onClick={handleLanguageChange}>French</button>
</li>
<li>
<button onClick={handleLanguageChange}>Spanish</button>
</li>
</ul>
</div>
);
};
export default Header;
```
This code will add a `handleLanguageChange` function to our component. This function will be called when a user clicks on a language button. The function will update the `language` state variable and then re-render the header interface.
### 6. Testing the Header Interface
We can now test our header interface by running the following command in the root directory of our project:
```
npm start
```
This will start a development server on port 3000. We can now open a browser and navigate to `http://localhost:3000`. We should see the following header interface:
We can now try clicking on the different language buttons to see how the interface changes.
### 7. Conclusion
In this tutorial, we learned how to complete the multi-language header interface for our clone of Bookingcare 3. We added the ability to change the language of the site in the header, and we also made sure that the correct language was used
### 1. Giới thiệu
Trong hướng dẫn này, chúng tôi sẽ hoàn thành giao diện tiêu đề đa ngôn ngữ cho bản sao của BookingCare 3. Chúng tôi sẽ thêm khả năng thay đổi ngôn ngữ của trang web trong tiêu đề và chúng tôi cũng sẽ đảm bảo rằng ngôn ngữ chính xác được sử dụng cho tất cảcủa văn bản trên trang web.
### 2. Điều kiện tiên quyết
Để hoàn thành hướng dẫn này, bạn sẽ cần những điều sau đây:
* Một bản sao của kho lưu trữ BookingCare 3
* Node.js và NPM đã cài đặt
* Trình chỉnh sửa văn bản hoặc IDE
### 3. Bắt đầu
Đầu tiên, chúng ta cần cài đặt các phụ thuộc cần thiết.Chúng tôi có thể làm điều này bằng cách chạy lệnh sau trong thư mục gốc của dự án của chúng tôi:
`` `
Cài đặt NPM
`` `
Khi các phụ thuộc đã được cài đặt, chúng ta có thể bắt đầu bằng cách tạo một tệp mới có tên là `header.js` trong thư mục` src/thành phần`.Tệp này sẽ chứa mã cho giao diện tiêu đề đa ngôn ngữ của chúng tôi.
### 4. Tạo giao diện tiêu đề
Giao diện tiêu đề sẽ bao gồm một vài yếu tố khác nhau.Chúng tôi sẽ cần một phần tử div để chứa tiêu đề, một phần tử UL để liệt kê các ngôn ngữ có sẵn và một phần tử nút cho mỗi ngôn ngữ.
Chúng ta có thể bắt đầu bằng cách tạo phần tử Div cho tiêu đề.Chúng tôi có thể làm điều này bằng cách thêm mã sau vào tệp `header.js` của chúng tôi:
`` `JS
nhập phản ứng, {usestate} từ "React";
const header = () => {
const [ngôn ngữ, ngôn ngữ setl] = usestate ("en");
trở lại (
<div className = "tiêu đề">
<ul>
<li>
<nút onclick = {() => setLangage ("en")}> tiếng Anh </nút>
</li>
<li>
<nút onclick = {() => setLangage ("fr")}> tiếng Pháp </nút>
</li>
<li>
<nút onclick = {() => setLangage ("es")}> Tây Ban Nha </nút>
</li>
</ul>
</div>
);
};
Xuất tiêu đề mặc định;
`` `
Mã này sẽ tạo ra một phần tử div với một lớp `header`.Bên trong phần tử DIV, chúng tôi sẽ tạo một phần tử UL để liệt kê các ngôn ngữ có sẵn.Mỗi ngôn ngữ sẽ được biểu diễn bằng một yếu tố nút.
### 5. Thay đổi ngôn ngữ xử lý
Bây giờ chúng ta cần xử lý các thay đổi ngôn ngữ.Khi người dùng nhấp vào nút ngôn ngữ, chúng ta cần cập nhật biến trạng thái `ngôn ngữ` và sau đó hiển thị lại giao diện tiêu đề.
Chúng tôi có thể làm điều này bằng cách thêm mã sau vào tệp `header.js` của chúng tôi:
`` `JS
nhập phản ứng, {usestate} từ "React";
const header = () => {
const [ngôn ngữ, ngôn ngữ setl] = usestate ("en");
const handlelanguagechange = (e) => {
SetLangage (e.Target.TextContent);
};
trở lại (
<div className = "tiêu đề">
<ul>
<li>
<nút onclick = {handlelanguagechange}> tiếng Anh </nút>
</li>
<li>
<nút onclick = {handlelanguagechange}> tiếng Pháp </nút>
</li>
<li>
<nút onclick = {handlelanguagechange}> Tây Ban Nha </nút>
</li>
</ul>
</div>
);
};
Xuất tiêu đề mặc định;
`` `
Mã này sẽ thêm chức năng `Handlangangechange` vào thành phần của chúng tôi.Hàm này sẽ được gọi khi người dùng nhấp vào nút ngôn ngữ.Hàm sẽ cập nhật biến trạng thái `ngôn ngữ` và sau đó hiển thị lại giao diện tiêu đề.
### 6. Kiểm tra giao diện tiêu đề
Bây giờ chúng tôi có thể kiểm tra giao diện tiêu đề của mình bằng cách chạy lệnh sau trong thư mục gốc của dự án của chúng tôi:
`` `
NPM bắt đầu
`` `
Điều này sẽ bắt đầu một máy chủ phát triển trên cổng 3000. Bây giờ chúng tôi có thể mở trình duyệt và điều hướng đến `http: // localhost: 3000`.Chúng ta sẽ thấy giao diện tiêu đề sau:
! [Giao diện tiêu đề đa ngôn ngữ] ( )
Bây giờ chúng ta có thể thử nhấp vào các nút ngôn ngữ khác nhau để xem giao diện thay đổi như thế nào.
### 7. Kết luận
Trong hướng dẫn này, chúng tôi đã học cách hoàn thành giao diện tiêu đề đa ngôn ngữ cho bản sao của BookingCare 3. Chúng tôi đã thêm khả năng thay đổi ngôn ngữ của trang web trong tiêu đề và chúng tôi cũng đảm bảo rằng ngôn ngữ chính xác đã được sử dụng
=======================================
## 46. Completing the multi-language header interface - Clone Bookingcare 3
### 1. Introduction
In this tutorial, we will complete the multi-language header interface for our clone of Bookingcare 3. We will add the ability to change the language of the site in the header, and we will also make sure that the correct language is used for all of the text on the site.
### 2. Prerequisites
To complete this tutorial, you will need the following:
* A clone of the Bookingcare 3 repository
* Node.js and npm installed
* A text editor or IDE
### 3. Getting Started
First, we need to install the necessary dependencies. We can do this by running the following command in the root directory of our project:
```
npm install
```
Once the dependencies have been installed, we can start by creating a new file called `header.js` in the `src/components` directory. This file will contain the code for our multi-language header interface.
### 4. Creating the Header Interface
The header interface will consist of a few different elements. We will need a div element to contain the header, a ul element to list the available languages, and a button element for each language.
We can start by creating the div element for the header. We can do this by adding the following code to our `header.js` file:
```js
import React, { useState } from "react";
const Header = () => {
const [language, setLanguage] = useState("en");
return (
<div className="header">
<ul>
<li>
<button onClick={() => setLanguage("en")}>English</button>
</li>
<li>
<button onClick={() => setLanguage("fr")}>French</button>
</li>
<li>
<button onClick={() => setLanguage("es")}>Spanish</button>
</li>
</ul>
</div>
);
};
export default Header;
```
This code will create a div element with a class of `header`. Inside the div element, we will create a ul element to list the available languages. Each language will be represented by a button element.
### 5. Handling Language Changes
We now need to handle language changes. When a user clicks on a language button, we need to update the `language` state variable and then re-render the header interface.
We can do this by adding the following code to our `header.js` file:
```js
import React, { useState } from "react";
const Header = () => {
const [language, setLanguage] = useState("en");
const handleLanguageChange = (e) => {
setLanguage(e.target.textContent);
};
return (
<div className="header">
<ul>
<li>
<button onClick={handleLanguageChange}>English</button>
</li>
<li>
<button onClick={handleLanguageChange}>French</button>
</li>
<li>
<button onClick={handleLanguageChange}>Spanish</button>
</li>
</ul>
</div>
);
};
export default Header;
```
This code will add a `handleLanguageChange` function to our component. This function will be called when a user clicks on a language button. The function will update the `language` state variable and then re-render the header interface.
### 6. Testing the Header Interface
We can now test our header interface by running the following command in the root directory of our project:
```
npm start
```
This will start a development server on port 3000. We can now open a browser and navigate to `http://localhost:3000`. We should see the following header interface:
We can now try clicking on the different language buttons to see how the interface changes.
### 7. Conclusion
In this tutorial, we learned how to complete the multi-language header interface for our clone of Bookingcare 3. We added the ability to change the language of the site in the header, and we also made sure that the correct language was used
