Cơ bản về React giới thiệu sơ lược về cài đặt React, cách sử dụng ban đầu, ReactDOM. Sơ lược về JSX để kết xuất HTML, cách dùng component…
Giới Thiệu Cơ bản về React
React hay ReactJS là framework giúp phát triển các ứng dụng web UI (User Interface). ReactJS được phát triển bởi Facebook từ năm 2011, published năm 2013. Được cộng đồng hết sức ủng hộ, phát triển liên tục, mạnh mẽ. Đến ngày 14/6/2022 version mới nhất đã là 18.2
React Element
Một React element là một đối tượng đơn giản, mô tả một DOM node và những thuộc tính của nó (ví dụ như color
), và những children trong nó.
JSX trong React
JSX là một cách viết code khá hay trong React giúp viết code html trực quan hơn, dễ đọc hơn. Ví dụ:
const chuc=<h1>Chào bạn <b>Tèo</b> Chúc an lành</h1>
const chao=<h1>Chào {ten}</h1>
JSX trong React giúp bạn viết code HTML đơn giản, bớt các dấu nháy không cần thiết.
Sử dụng biến, biểu thức, gọi hàm trong JSX
Bạn có thể gán giá trị 1 biến hay biểu thức vào trong JSX bằng cách dùng dấu { } . Mời xem ví dụ về cách dùng biến, biểu thức và gọi hàm trong JSX
let hoten = 'Đào Kho Báu';
const element = <p>Chào <b>{hoten}</b> </p>;
let x = 3; const element = <p>x<sup>2</sup> = { Math.pow(x,2) } </p>;
Gọi hàm trong JSX cũng đơn giản, không có gì khác lạ
let a= 3, b= 4;
function tinhtong(x,y){ return x+y}
const element = <div> {a} + {b} = { tinhtong(a,b) } </div>;
Một số chú ý khi viết code trong JSX
Cấu trúc code JSX khá giống với HTML, nhưng có 1 số điểm khác biệt :
Mô tả | Code HTML | Code trong JSX |
Tên class | <tag class=””> | <tag className=””> |
Thuộc tính value <input /> | <input value=”” /> | <input defaultValue=”” /> |
Thuộc tính for của <label> | <label for=””> | <label htmlFor=””> |
Giá trị của <select><option> | <option value=””> | <option value={}> |
Style trực tiếp bên trong tag | <tag style=”width: 10%”> | <tag style={{ width: ‘10%’ }}> |
Event | <tag onclick=”functionName()”> | <tag onClick={functionName}> |
Website giúp chuyển đổi HTML sang JSX: https://transform.tools/html-to-jsx
Cài đặt React
Để lập trình với React cần cài hai thứ: NodeJS và cài gói create-react-app
Cài đặt NodeJS
Cài đặt NodeJS rất đơn giản. tải NodeJS về chạy file download là xong. Chi tiết hướng dẫn nếu bạn muốn xem thì vào link này https://longnv.name.vn/lap-trinh-nodejs/co-ban-ve-nodejs
Cài đặt gói create-react-app
Create React App là công cụ giúp tạo project React cho bạn. Để cài gói này, mở command line rồi gõ lệnh:
npm install -g create-react-app
Tạo project React
Để tạo project React, bạn mở command line và gõ lệnh:
create-react-app thuctapreact
Trong đó thuctapreact là tên project (chữ thường hết nhé), lệnh chạy mất 1 lúc để down các gói thư viện và cấu hình ứng dụng cho bạn. Khi lệnh chạy xong, bạn sẽ có 1 folder ứng dụng với cấu trúc như sau:
thuctapreact ├── README.md //hướng dẫn sử dụng project ├── node_modules // rất nhiều module trong này ├── package.json ├── public //chứa các static file, như hình, css, js │ └── index.html //trang mà react sẽ đổ dữ liệu vào │ └── manifest.json └── src //folder chứa source code └── App.css └── App.js └── App.test.js └── index.css //định dạng css └── index.js //code react viết ở đây để đưa ra html └── setupTests.js


Chạy ứng dụng react
Trong command line, chuyển nào bên trong folder ứng dụng (lệnh cd ) và chạy ứng dụng với lệnh npm start
cd thuctapreact npm start
Khi start xong, trình duyệt mở ra và request đến ứng dụng ở địa chỉ http://localhost:3000/
. Và bạn sẽ thấy như màn hình bên dưới. Mặc định ứng dụng chạy ở port 3000 nhưng nếu đụng port thì nó sẽ chuyển qua port 3001

Để dừng ứng dụng, bạn gõ Ctrl-C trong command line
Component App trong React
Khi mới tạo, project đã có sẵn 1 component là tên App trong file App.js như sau:

Bạn có thể định nghĩa lại code trong return nếu muốn. Và tùy ý chình sửa định dạng css trong file App.css

Bài viết cơ bản về React đã giới thiệu những cơ bản về React . Phần component sẽ tiếp ở bài sau: Component trong React