Cơ bản về React

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