Sử dụng React

Cơ bản về React

26/06/2021

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…

A. 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). React chạy trên môi trường client (trình duyệt) lẫn server ( trên nền NodeJS).

Framework này được phát triển bởi các lập trình viên Facebook. Một người anh em gần gũi của nó tên là React Native thì giúp phát triển các ứng dụng trên di động.

B. Sử dụng react phía client

1. NhúngReact vào trang htrml

Bạn có thể nhúng react vào trang web html đang có để sử dụng trong trình duyệt. Đơn giản là dùng tag script với địa chỉ từ CDN.

Bước 1: Trong trang html, tạo 1 tag div trống, để làm chỗ hiển thị các tính toán từ react

<!-- ... các code html tùy ỳ trong trang của bạn... -->
   <div id="ketqua"></div> 
<!-- ... các code html tùy ỳ trong trang của bạn... -->

Bước 2: Vào https://reactjs.org/docs/getting-started.html rồi nhắp CDN Links để lấy code script nhúng.

Sau đó paste code vào trang HTML của bạn.

Bước 3: Viết code react và đưa kết quả ra div đã chuẩn bị. Ví dụ: tạo file vd1.html

<body>
    <div id="kq"></div> 
</body>

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin ></script>

Và code React

<script>
 function LoiChuc()  {
    return React.createElement(
        'button', 
         { onClick:() =>  alert('Chào bạn! Chúc sức khỏe') }, 
         'Chúc'
    );
} //LoiChuc
ReactDOM.render(LoiChuc(), document.getElementById('kq'));
</script>

Chạy file vd1.html sẽ thấy button Chúc, nhắp vào sẽ thấy hiện text Chào Bạn! Chúc an lành! . Vậy là code React đã chạy trong trang rồi trong web của bạn.

Đó là cơ bản về việc nhúng react vào trang web để dùng ở client.

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ó. Như trong ví dụ trên, lệnh React.createElement là để tạo 1 element là button.

3. React và ReactDOM

Từ version React 0.14, các tính năng tương tác với DOM được tách biệt với phần core . ReactDOM dùng để tương tác với DOM trên trang web.

Cho nên với các ứng dụng web, bạn sẽ thường tham chiếu tới cả phần lõi lẫn phần DOM của React thông qua link CDN như ví dụ trên.

Ví dụ để hiển thị html ra trang, dùng ReactDOM.render():

<body>
    <div id="tinxemnhieu"></div> 
</body>
<script>
  var txn = React.createElement('h4', {'class':'abc'}, 'Tin xem nhiều');
  ReactDOM.render( txn, document.getElementById('tinxemnhieu') );
</script>

Kết quả:

<div id="tinxemnhieu"><h4 class="abc">Tin xem nhiều</h4></div>

4. Giới thiệu về JSX

Một trong những hiểu biết cơ bản về React đó là JSX, nó giúp bạn triển khai code HTML đơn giản hơn. Như trong ví dụ trên, dùng JSX sẽ viết gọn lại như sau:

ReactDOM.render(
  <h4>Tin xem nhiều</h4>,
  document.getElementById('tinxemnhieu')
);

a. JSX là gì ?

JSX (JavaScript XML) là một loại cú pháp JavaScript mở rộng viết theo kiểu XML. Mã lệnh viết bằng JSX sẽ được chuyển sang JavaScript thuần để trình duyệt có thể hiểu được. Ví dụ:

const chuc = <h1>Chào bạn <spanTèo</span> Chúc an lành </h1>;
const chao  = <h1>Chào {ten}</h1>;

Trình duyệt không thể đọc được các cú pháp JSX. Cách viết theo JSX là cú pháp viết mới và cần có sự hỗ trợ của thư viện Babel . Việc sử dụng JSX trong ReactJS rất hữu ích bởi:

JSX giúp kiểm tra và báo lỗi…
Giúp tạo các React element giống với HTML nên dễ dàng viết và đọc hiểu code.
Giúp tạo nội dung nhanh thay vì javascript thông thường.

5. JSX trong ReactJS

ReactJS không bắt buộc nhưng mọi nguời thường dùng JSX để làm việc cho nhanh. JSX cũng giúp kiểm soát và hiện lỗi hiệu quả hơn. Sau đây là ví dụ 1 dùng JSX:

<head>    
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<style> .chuc { color:darkorange;} </style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    var loichuc= <h2 className="chuc">Chào Bạn! Chúc an lành!</h2>;
    ReactDOM.render(
      loichuc,
      document.getElementById('root')
    );
  </script>
</body>

Ví dụ 2: Không dùng JSX thì viết như sau

<head>    
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<style> .chuc { color:darkorange;} </style>
</head>
<body>
    <div id="root"></div>
    <script>
    var loichuc = React.createElement(
            'h2', 
            { className: 'chuc', id:'chuc1' }, 
            'Chào Bạn! Chúc thành công!'
        );
    ReactDOM.render(
        loichuc,
        document.getElementById('root')
    );
    </script>
</body>

6. 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

<head>    
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<style> .solanchoi span { color:darkorange;} </style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    var user = { ten:"Tèo", soLanChoi:7 } ;
    var loichuc= 
        <h2 className="solanchoi">Chào <span>{user.ten}</span>! 
            Bạn đã chơi <span> {user.soLanChoi+1} </span> lần rồi
        </h2>; 
    ReactDOM.render(
      loichuc,
      document.getElementById('root')
    );
  </script>
</body>

Ví dụ 4: gọi hàm trong JSX cũng đơn giản, không có gì khác lạ

<head>    
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>  
    .solanchoi span { color:darkorange;} 
    .solanchoi em { color:darkcyan 
   </style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    var user = { ten:"Tèo", soLanChoi:7 } ;
    function nhanxet(slc) {
        if (slc>8) return "Bạn chơi nhiều quá, nghỉ đi thôi";
        else return "Mời bạn tiếp tục";
    }
    var loichuc= 
        <h2 className="solanchoi">Chào <span>{user.ten}</span>! 
            Bạn đã chơi <span> {user.soLanChoi+1} </span> lần rồi <br/>
            <em> {nhanxet(user.solanchoi) } </em>
        </h2>; 

    ReactDOM.render(
      loichuc,
      document.getElementById('root')
    );
  </script>
</body>

Ví dụ 5: Dùng JSX, giúp hiển thị các element có cấu trúc html phức tạp

<head>    
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>  
  .tbl{width:600px; color:darkorange;border-collapse:collapse; margin:auto;}
  .tbl td {padding:6px; border:1px solid darkcyan; margin:0 }
</style>
</head>
<body> <div id="root"></div>
<script type="text/babel">
var s = [ 
    { ten:"Thuật Tư Tưởng", gia:63000, tacgia:"Nguyễn Duy Cần" },
    { ten:"Hiểu Về Trái Tim", gia:125000, tacgia:"Minh Niệm" },
    { ten:"Nói với tuổi 20", gia:32000, tacgia:"Nhất Hạnh" } 
];
var tblSach= 
    <table className="tbl">
            <tbody>
            <tr><td>{s[0].ten}</td>
                <td align="right">{s[0].gia}</td>
                <td>{s[0].tacgia}</td>
            </tr>
            <tr><td>{s[1].ten}</td>
                <td align="right">{s[1].gia}</td>
                <td>{s[1].tacgia}</td>
            </tr>
            <tr><td>{s[2].ten}</td>
                <td align="right">{s[2].gia}</td>
                <td>{s[2].tacgia}</td>
            </tr>
            </tbody>
    </table>; 
ReactDOM.render( tblSach,  document.getElementById('root') );
</script>
</body>

7. Thuộc tính và phần tử con trong JSX

Có thể gán giá trị cho các thuộc tính html như thông thường, trường hợp có nhiều tag trong element thì bạn cần bao thêm 1 tag bên ngoài nó. Ví dụ như sau là lỗi

<head>    
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body> 
  <div id="root"></div>
  <script type="text/babel">
    var loichuc= <p>Chào Bạn!</p> <p>Chúc an lành!</p>;  //lỗi
    ReactDOM.render(loichuc, document.getElementById('root') );
  </script>
</body>

Bọc thêm 1 tag bên ngoài của element sẽ hết lỗi:

<head>    
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    var loichuc= 
    <h2>
       <p>Chào Bạn!</p> <p>Chúc an lành!</p>
    </h2>; //ko lỗi
    ReactDOM.render( loichuc, document.getElementById('root'));
  </script>
</body>

8. JSX thay cho react element

Nhiệm vụ của Babel dịch cú pháp JSX thành React element thông thường, giúp bạn code sẽ dễ dàng hơn

<head>    
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style> .chuc { color:darkorange;} </style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    /* var loichuc= 
     <h2 className="chuc" id="chuc1">Chào Bạn!Chúc an lành!
    </h2>;
    */
    const loichuc = React.createElement("h2",  
      { className: "chuc", id:'chuc1' },
      "Chào bạn! Chúc thành công" 
    );
    ReactDOM.render( loichuc, document.getElementById('root'));
  </script>
</body>

9. Khác biệt giữa HTML và 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. Chuẩn bị môi trường cho React: cài đặt NodeJS

Bạn cần chuẩn bị môi trường cho React hoạt động nhé, bao gồm việc cài đặt NodeJS và cài gói create-react-app

1- Download vài cài đặt NodeJS

a. Truy cập vào địa chỉ: https://nodejs.org/en/download/

Download xong bạn có một file .msi. Chạy file này để bắt đầu cài.

b- Cài đặt NodeJS: Sau khi mở file MSI, bạn cứ nhắp tuần tự các nút Next. Trong quá trình cài NodeJS, phần mềm NPM (Node Package Manager) cũng được cài luôn vào máy của bạn (rất tốt), đây là tool cần thiết quản lý các thư viện cho bạn.

c- Kiểm tra và cấu hình NodeJS: Mở cửa sổ CMD và thực thi các lệnh sau để kiểm tra phiên bản của NodeJS và NPM:

node -v
npm -v

d. Test họat động của NodeJS

– Tạo 1 folder tên tùy ý, ví dụ TestNodeJS

– Trong folder mới tạo, hãy tạo tiếp 1 file tên chao.js và rồi mở lên gõ code sau:

//chao.js
console.log('Chao ban! Chuc an lanh');

-. Mở command line chuyển vào folder mới tạo rồi gõ lệnh thực thi file chao.js

node chao.js

Thấy dòng chữ Chao ban! Chuc an lanh là thành công. Tới đây bạn đã cài xong NodeJS, chuẩn bị chiến đấu với React rồi đó.

2. Cài đặt gói create-react-app

Create React App là công cụ giúp tạo và cấu hình nhanh 1 ứng dụng React cho bạn. Nó thích hợp với người mới bắt đầu đến React. Để cài gói này, mở command line rồi gõ lệnh:

npm install -g create-react-app

3. Tạo project React

Để tạo project sử dụng React, bạn mở command line và gọ lệnh theo cú pháp bên dưới. Trong đó thuctapreact là tên project (chữ thường hết nhé)

create-react-app  thuctapreact

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:

first-app
 ├── README.md        //hướng dẫn sử dụng project
 ├── node_modules     // rất nhiều module trong này
 ├── package.json
 ├── public          //folder chứa các static file, như hình ành...
 │   └── index.html  //trang html 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 thường viết ở đây để đưa ra html
     └── setupTests.js

Trang index.html, có tag div với id là root, được tạo ra để hứng dữ liệu đổ ra từ React

Trang index.js, nơi hiện thực code React, sẽ hiện thị dữ liệu (component App) ra tag có id là root đã chuẩn bị ở trên. Có thể điều chỉnh coponent App nếu muốn hiện thông tin khác, có thể dùng nhiều lần lệnh Render để hiện dữ liệu khác

4. 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

Điều chỉnh ứng dụng: Mở file src/App.js để điều chỉnh text, lưu lại sẽ thấy thay đỗi trong trình duyệt (tự động)

Và nếu trong lúc code có gì sai, sẽ thấy lỗi trong trình duyệt

5. Component trong React

Compoment là 1 thành phần (bộ phận) thông tin mà bạn sẽ dùng để tính toán và hiển thị thông tin trong trang web. Có hai cách tạo component: class hoặc functional .

Khi mới tạo project, bạn đã có 1 component được tạo sẵn là App, được viết theo kiểu function trong file App.js như sau:

File App.js là nơi định nghĩa 1 component được biết theo kiểu function

Nhúng component App vào trang js được thực hiện như sau:

Bạn cũng có thể tạo component dạng class. Sau đây là ví dụ: Trong trang index.js, tạo component tên Tacgia như hình dưới. Khi kết thúc ra trang chủ bạn sẽ thấy thông tin mới

Trong mỗi component, bạn có thể định nghĩa nhiều hàm nếu muốn. Trong ví dụ trên, chỉ có hàm render(), các hàm khác có tể tạo thêm để thực hiện các nhiệm vụ riêng của component đó.

Bài viết cơ bản về React đã giới thiệu những cơ bản về React và đã dài quá rồi, tới đây tạm dừng nhé. Phần component còn tiếp ở bài sau: Component trong React