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 cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
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 Greeting trong ReactJS
Tiếp theo trong bài tập này, mình sẽ thực hiện Bài 2: "Greeting Component trong ReactJS". Nhiệm vụ của mình là tạo một component có tên là Greeting, có khả năng nhận một prop là name và hiển thị thông điệp chào hỏi "Hello, [name]!". Hãy cùng đi qua từng bước để thực hiện nhiệm vụ này trong một ứng dụng React.
Tạo một component Greeting trong ReactJS
Bước 1: Mở dự án hiện tại
Nếu bạn đã thực hiện Bài 1, hãy tiếp tục sử dụng dự án React hiện tại của bạn. Nếu không, bạn có thể tạo một dự án mới bằng cách sử dụng create-react-app.
Bước 2: Tạo Component Greeting
Mở file src/components/Greeting.js và thêm nội dung sau:
// src/components/Greeting.js
import React from 'react';
const Greeting = ({ name }) => {
return (
<div>
<p>Hello, {name}!</p>
</div>
);
};
export default Greeting;
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 Greeting from './components/Greeting';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<Greeting name="freetuts.net" />
</header>
</div>
);
}
export default App;
Giải thích:
-
Import React và Greeting Component: Import React và component Greeting từ file Greeting.js.
-
Functional Component App: App cũng là một functional component, và nó trả về JSX.
-
Sử dụng Greeting Component: Trong JSX, mình sử dụng <Greeting /> và truyền prop name với giá trị "freetuts.net". Khi component Greeting được sử dụng như này, nó sẽ hiển thị "Hello, freetuts.net!".
Bước 4: Chạy ứng dụng
Mở terminal và chạy ứng dụng bằng cách sử dụng lệnh sau:
npm start
Ứng dụng sẽ khởi chạy trên http://localhost:3000, và bạn sẽ thấy một trang web hiển thị "Hello, freetuts.net!".
Mình đã thành công tạo ra một component Greeting trong ReactJS, có khả năng nhận một prop là name và hiển thị thông điệp chào hỏi tương ứng. Việc sử dụng Props giúp mình truyền dữ liệu giữa các components một cách dễ dàng, tạo nên một hệ thống linh hoạt và tái sử dụng trong ứng dụng React của mình. Hãy tiếp tục với những bài tập tiếp theo để hiểu rõ hơn về sức mạnh của ReactJS.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Tạo một component ReactJS đơn giản
- Tạo một component Greeting trong ReactJS
- Tạo một component PersonList trong ReactJS
- Tạo một component ProductCard trong ReactJS
- Tạo một component Avatar trong ReactJS
- Tạo một component BlogPost bằng ReactJS
- Tạo một component BookList bằng ReactJS
- Tạo một component UserProfile bằng ReactJS
- Tạo một component ProductList bằng ReactJS
- Tạo một component CommentSection bằng ReactJS
