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 Conditional Component trong ReactJS
Trong loạt bài tập này về ReactJS về Conditional Rendering, mình sẽ thực hiện Bài 4 - "Conditional Component". Trong bài này, mình sẽ tạo hai components ComponentA và ComponentB, và một component ConditionalComponent để hiển thị một trong hai component dựa trên một biến điều kiện.
Conditional Component trong ReactJS
Mình sẽ bắt đầu bằng việc tạo một ứng dụng React mới và thêm các components cần thiết vào đó.
Bước 1: Tạo một ứng dụng React mới
npx create-react-app react-conditional-component cd react-conditional-component
Bước 2: Tạo các components ComponentA và ComponentB
Trong thư mục src, tạo hai file mới có tên là ComponentA.js và ComponentB.js. Các file này sẽ chứa các components tương ứng.
ComponentA.js
import React from 'react';
const ComponentA = () => {
return <div>This is Component A</div>;
};
export default ComponentA;
ComponentB.js
import React from 'react';
const ComponentB = () => {
return <div>This is Component B</div>;
};
export default ComponentB;
Bước 3: Tạo component ConditionalComponent
Trong thư mục src, tạo một file mới có tên là ConditionalComponent.js. File này sẽ chứa component ConditionalComponent.
ConditionalComponent.js
import React from 'react';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
const ConditionalComponent = ({ showComponentA }) => {
return <div>{showComponentA ? <ComponentA /> : <ComponentB />}</div>;
};
export default ConditionalComponent;
Bước 4: Sử dụng component ConditionalComponent trong App
Sửa nội dung file src/App.js để sử dụng component ConditionalComponent.
App.js
import React from 'react';
import ConditionalComponent from './ConditionalComponent';
function App() {
// Assume the value of showComponentA is retrieved from somewhere
const showComponentA = true;
return (
<div className="App">
<h1>React Conditional Component Exercise</h1>
<ConditionalComponent showComponentA={showComponentA} />
</div>
);
}
export default App;
Bước 5: Chạy ứng dụng React
Quay lại terminal và chạy lệnh sau để khởi động ứng dụng React:
npm start
Mở trình duyệt và truy cập http://localhost:3000 để xem ứng dụng của bạn. Bạn sẽ thấy một trong hai component ComponentA hoặc ComponentB được hiển thị, tùy thuộc vào giá trị của biến showComponentA.
Kết bài:
Với bài tập "Conditional Component" này, mình đã tạo một component để hiển thị một trong hai component dựa trên một biến điều kiện. Điều này là một phần quan trọng trong việc điều chỉnh hiển thị các phần tử trong ứng dụng ReactJS của bạn dựa trên các điều kiện khác nhau. Hãy tiếp tục thực hành và tìm hiểu các tính năng khác của ReactJS để nâng cao kỹ năng lập trình của bạn!
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Tạo một component SimpleConditionalRendering trong ReactJS
- Tạo một component UserAuthentication trong ReactJS
- Tạo một component RoleBasedAccessControl trong ReactJS
- Tạo Conditional Component trong ReactJS
- Tạo một component WeatherDisplay trong ReactJS
- Tạo một component ErrorMessage trong ReactJS
- Tạo một component ConditionalStyling trong ReactJS
- Tạo một component LoginForm trong ReactJS
- Tạo một component ShowHideElement trong ReactJS
- Tạo một component ConditionalRenderingWithList trong ReactJS
- Tạo một component SubscriptionPlan trong ReactJS
- Tạo một component OnlineOfflineStatus trong ReactJS
- Tạo một component ShoppingCart trong ReactJS
- Tạo một component ShowHideModal trong ReactJS
- Tạo một component ConditionalNavigation trong ReactJS
