React là gì? Làm sao viết dòng "Hello World" đầu tiên? JSX là gì? Props khác State ra sao?
Tất cả sẽ được giải thích trong bài này, dành riêng cho người mới học frontend!
React là gì?
Cách tạo ứng dụng React Hello World
1. Tạo project
npx create-react-app hello-world
2. Chạy project
cd hello-world
npm start
Trình duyệt sẽ mở http://localhost:3000 với ứng dụng React mặc định.
3. Viết chương trình Hello World
Mở file src/App.js và thay nội dung bằng:
function App() {
return (
<div>
<h1>Hello World from React!</h1>
</div>
);
}
export default App;
Giải thích nhanh các khái niệm
➤ JSX: cú pháp giống HTML nhưng viết trong JavaScript
<h1>Xin chào!</h1>
➤ Component: đơn vị nhỏ để xây UI
function App() {
return <Header />;
}
➤ Props: truyền dữ liệu từ component cha xuống component con
function Welcome(props) {
return <h2>Xin chào, {props.name}!</h2>;
}
➤ State: dữ liệu thay đổi bên trong component
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Bạn đã bấm {count} lần</p>
<button onClick={() => setCount(count + 1)}>Bấm tôi</button>
</div>
);
}
Kết luận
Bạn đã tạo xong ứng dụng React đầu tiên, đồng thời hiểu được JSX, Component, Props, State – những nền tảng quan trọng nhất khi học React.
Xem bài viết chi tiết + video hướng dẫn tại:
Tạo Ứng Dụng React Hello World Và Các Thành Phần Cơ Bản - TruongDevs
Trong bài tiếp theo, mình sẽ chia sẻ sâu hơn về cách chia nhỏ component, quản lý dữ liệu giữa các component trong React.
