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 WeatherApp với state trong ReactJS
Trong bài tập này, mình sẽ xây dựng một ứng dụng thời tiết đơn giản sử dụng ReactJS. Component WeatherApp sẽ cho phép người dùng nhập tên thành phố và hiển thị nhiệt độ hiện tại thông qua một API thời tiết. Bạn sẽ có cơ hội thực hành việc sử dụng State, Lifecycle và kết nối với dữ liệu từ một nguồn bên ngoài.
Weather App trong ReactJS
Để sử dụng khóa API thực tế, bạn cần đăng ký và lấy khóa API từ trang web của OpenWeatherMap. Dưới đây là cách bạn có thể thay thế phần "YOUR_API_KEY" trong URL bằng khóa API thực tế:
Đăng ký và lấy khóa API:
- Truy cập trang web https://openweathermap.org/api và đăng ký tài khoản nếu bạn chưa có.
- Sau khi đăng ký và đăng nhập, vào trang API keys để tạo một khóa API mới.
Thay thế "YOUR_API_KEY" trong URL:
- Khi bạn đã có khóa API, thay thế phần
"YOUR_API_KEY"trong URL của bạn với khóa API thực tế bạn đã lấy được.
// src/components/WeatherApp.js
const fetchData = async () => {
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_ACTUAL_API_KEY&units=metric`
);
// ... (phần còn lại của hàm)
} catch (error) {
// ... (phần còn lại của hàm)
}
};
Bao gồm tất cả các file liên quan:
WeatherApp.js
// src/components/WeatherApp.js
import React, { useState, useEffect } from 'react';
import './WeatherApp.css';
const WeatherApp = () => {
const [city, setCity] = useState('');
const [temperature, setTemperature] = useState(null);
useEffect(() => {
// Hàm fetchData để gửi yêu cầu API và cập nhật trạng thái nhiệt độ
const fetchData = async () => {
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`
);
if (!response.ok) {
throw new Error('City not found');
}
const data = await response.json();
setTemperature(data.main.temp);
} catch (error) {
console.error('Error fetching weather data:', error.message);
setTemperature(null);
}
};
if (city) {
fetchData();
}
}, [city]);
// JSX để hiển thị component WeatherApp
return (
<div className="weather-app">
<h2>Weather App</h2>
<label htmlFor="cityInput">Enter City:</label>
<input
type="text"
id="cityInput"
value={city}
onChange={(e) => setCity(e.target.value)}
/>
{temperature !== null ? (
<p>Current Temperature in {city}: {temperature}°C</p>
) : (
<p>No data available</p>
)}
</div>
);
};
export default WeatherApp;
WeatherApp.css
/* src/components/WeatherApp.css */
.weather-app {
text-align: center;
margin-top: 20px;
}
label {
margin-right: 10px;
}
input {
margin-bottom: 15px;
padding: 5px;
}
p {
font-size: 18px;
font-weight: bold;
}
App.js
// src/App.js
import React from 'react';
import WeatherApp from './components/WeatherApp';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<WeatherApp />
</header>
</div>
);
}
export default App;
App.css
/* src/App.css */
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
Trong trường hợp trên, bạn cần thay thế "YOUR_API_KEY" trong URL của API OpenWeatherMap bằng khóa API thực tế của bạn.
Đảm bảo bạn đã cài đặt fetch polyfill (hoặc sử dụng axios) nếu bạn đang phát triển ứng dụng trên trình duyệt cũ không hỗ trợ fetch.
Lưu ý: Việc sử dụng API thời tiết của OpenWeatherMap có thể đòi hỏi bạn phải đăng ký một tài khoản để nhận khóa API.
Qua bài tập này, bạn đã có cơ hội thực hành và làm quen với các khái niệm quan trọng trong ReactJS. Việc tạo các component, quản lý props và state, cũng như tương tác với API là những kỹ năng quan trọng trong quá trình phát triển ứng dụng ReactJS. Chúc mừng bạn đã hoàn thành bài tập và hy vọng bạn sẽ áp dụng những kỹ năng này vào các dự án thực tế của mình.
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
