Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Tạo một component Clock có chứa state là currentTime trong ReactJS
Trong bài tập này, mình sẽ tạo một component ReactJS có tên là Clock. Component này sẽ chứa một trạng thái currentTime và hiển thị thời gian hiện tại. Đặc biệt, chúng ta sẽ cập nhật thời gian này mỗi giây bằng cách sử dụng lifecycle method setInterval.
Tạo một component Clock có chứa state là currentTime trong ReactJS
Bước 1: Tạo Component Clock
Mở file src/components/Clock.js và thêm nội dung sau:
// src/components/Clock.js
import React, { useState, useEffect } from 'react';
import './Clock.css';
const Clock = () => {
// Sử dụng hook useState để tạo trạng thái currentTime, khởi tạo là thời gian hiện tại
const [currentTime, setCurrentTime] = useState(new Date());
// useEffect sẽ được gọi mỗi khi component được render hoặc khi state thay đổi
useEffect(() => {
// setInterval để cập nhật currentTime mỗi giây
const intervalId = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
// Hủy bỏ interval khi component bị unmount
return () => clearInterval(intervalId);
}, []); // [] đảm bảo useEffect chỉ chạy sau lần render đầu tiên
// Cấu trúc JSX để hiển thị component Clock
return (
<div className="clock">
<p>Current Time: {currentTime.toLocaleTimeString()}</p>
</div>
);
};
export default Clock;
Giải thích:
useState Hook:
const [currentTime, setCurrentTime] = useState(new Date());: Sử dụng hookuseStateđể tạo trạng tháicurrentTime, khởi tạo là thời gian hiện tại.
useEffect Hook:
useEffect(() => { /*...*/ }, []);:Sử dụng hookuseEffectđể thực hiện các sideeffects. Trong trường hợp này, nó được sử dụng để thiết lập mộtsetIntervalđể cập nhậtcurrentTimemỗi giây.
setInterval và clearInterval:
const intervalId = setInterval(() => { setCurrentTime(new Date()); }, 1000);: Sử dụngsetIntervalđể gọi hàm và cập nhậtcurrentTimemỗi giây.return () => clearInterval(intervalId);: TronguseEffect,clearIntervalđược sử dụng để hủy bỏintervalkhicomponentbịunmountđể tránhmemory leak.
Cấu trúc JSX:
<div className="clock">:Một thẻ <div> với class là "clock" để tạo một vùng chứa cho các phần tử bên trong.<p>Current Time:{currentTime.toLocaleTimeString()}</p>: Hiển thị thời gian hiện tại dưới dạng văn bản, sử dụngtoLocaleTimeStringđể định dạng thời gian theo địa phương người dùng.
Bước 2: Tạo File CSS
Tạo một file mới có tên là Clock.css trong thư mục src/components. Thêm các quy tắc CSS để tùy chỉnh giao diện của Clock:
/* src/components/Clock.css */
.clock {
text-align: center;
margin-top: 20px;
padding: 20px;
background-color: #f4f4f4;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
p {
font-size: 24px;
font-weight: bold;
color: #333;
}Bước 3: Sử dụng Component trong App
Mở file src/App.js và sửa nội dung như sau:
// src/App.js
import React from 'react';
import Clock from './components/Clock';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<Clock />
</header>
</div>
);
}
export default App;
Bước 4: Chạy ứng dụng
Mở terminal và chạy ứng dụng bằng lệnh:
npm start
Ứng dụng sẽ mở trên http://localhost:3000 và hiển thị component Clock với thời gian hiện tại và được cập nhật mỗi giây.
Trong bài tập này, mình đã học cách sử dụng useState và useEffect hooks trong ReactJS để quản lý trạng thái và thực hiện các side effects. Mình đã tạo thành công một component Clock có chứa trạng thái currentTime, hiển thị thời gian hiện tại và cập nhật nó mỗi giây bằng cách sử dụng lifecycle method setInterval.
Việc này giúp mình hiểu rõ hơn về cách quản lý trạng thái và lifecycle trong ReactJS, điều quan trọng trong việc phát triển ứng dụng ReactJS thực tế. Đồng thời, mình đã áp dụng CSS để tùy chỉnh giao diện của component.
Hy vọng rằng bài tập này đã giúp bạn nắm vững kiến thức và sẽ hỗ trợ bạn trong việc xây dựng các ứng dụng ReactJS của mình. Hãy tiếp tục học và phát triển kỹ năng lập trình ReactJS của bạn. Cảm ơn bạn đã tham gia và chúc bạn thành công!
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Tạo một component Counter có chứa một state là count bằng ReactJS
- Tạo một component Clock có chứa state là currentTime trong ReactJS
- Tạo một component Toggle với một state là isOn trong ReactJS
- Tạo một component TodoList với state là một mảng todos trong ReactJS
- Tạo một component CountdownTimer với state trong ReactJS
- Tạo một component ColorPicker có chứa state trong ReactJS
- Tạo một component WeatherApp với state trong ReactJS
- Tạo một component QuizGame với state bằng ReactJS
- Tạo một component ImageCarousel với state bằng ReactJS
- Tạo một component ShoppingCart với state bằng ReactJS
