Share
Trang chủ / Tất cả hướng dẫn / Lập trình web / Làm quen với React và JSX

Làm quen với React và JSX

Reactjs là gì?

Reactjs là một thư viện mã nguồn mở dùng để xây dựng giao diện người dùng. Nó cho phép bạn tạo view ( giao diện người dùng ) một cách nhanh chóng, có thể reuse mà vẫn đảm bảo rằng nó đồng bộ với dữ liệu bên dưới ( model ). Bài viết này hướng đến những người mới bắt đầu với react, giới hạn ở việc giới thiệu cú pháp cơ bản của React và JSX.

Làm quen với React

Có lẽ, cách dễ nhất để bắt đầu với React là sử dụng các file từ CDN. Bạn chỉ cần load file như load jquery từ CDN, Nhưng chúng ta sẽ không dùng cách này. Hoạc cũng có thể sử dụng npm hoặc download React Starter Kit từ website chính thức của React.

Để bắt đầu, chúng ta sẽ tạo thư mục cho project sao đó tạo file index.html có nội dung như sau:

Hãy xem chuyện gì sẽ xảy ra khi chạy đoạn code trên.

1 React được thiết kế theo component oriented development. Ý tưởng là chia nhỏ UI của bạn thành nhiều component. Trong trường hợp của chúng ta thì chỉ có một component tên là Greeting. Trong React, để tạo một component bạn sử dụng phương thức React.createClass(). Tất cả component đều phải có menthod render(), menthod này trả về code html để render ra trình duyệt ( thực ra không hẳn như vậy, mình sẽ nói ở phần sau ) . Trong ví dụ này thì chúng ta chỉ trả về một thẻ p với nội dung đơn giản. Nó sẽ được hiển thị ra page.

2 Một component không làm bất cứ tác vụ gì cho đến khi nó được render ra, để render bạn gọi phương thức ReactDOM.render() với tham số đầu tiên là component cần render. tham số thứ hai là html element mà bạn muốn render component này vào. Trong ví dụ này, chúng ta render component Greeting vào div có id là greeting-div

3 Bạn có thể sẽ chưa rõ thẻ Greeting là gì, vì nó không phải là một thẻ trong html, mà nó là JSX ( Javascript XML ) một loại cú pháp giống với HML cho phép bạn sử dụng các component đơn giản hơn. JSX chỉ là một tùy chọn, bạn không cần phải nhất thiết sử dụng nó trong React, nhưng nó có nhiều tính năng rất tuyệt vời, tiện lợi và không có lý do gì để bạn không đào sâu nghiên cứu và sử dụng nó cả.

Nếu không dùng JSX thì đoạn code sẽ giống như sau:

4 Bởi vì mặc định thì trình duyệt không thể hiểu được JSX, chúng ta cần phải chuyển nó lại thành JavaScript trước. Việc này được làm bởi Babel. Nó sẽ tự động chuyển các thẻ script có type là “text/babel” thành code JavaScript. Việc chuyển đổi này có lẽ là rất ổn khi bạn đang code, nhưng khi đưa vào production, bạn cần phải compile JSX thành JavaScript trước. như vậy thì code của bạn sẽ chạy nhanh hơn. Chúng ta sẽ nói về cách để compile sau.

Bây giờ bạn có thể mở file index.html bằng trình duyệt và sẽ thấy dòng chữ “Hello, Universe”. Bạn đã thấy hứng thú hơn chưa? Hãy tiếp tục theo dõi nhé.

Giới thiệu về Property trong React

React hoạt động dựa trên dòng dữ liệu một chiều. Điều đó có nghĩa là data chỉ đi một chiều từ object cha qua object con. Dữ liệu (properties) được truyền từ cha sang con thông qua attribute của JSX. Và bên trong component, bạn truy xuất các property này thông qua thuộc tính props. Mỗi khi các property thay đổi, React sẽ đảm bảo rằng UI được update.

Hãy sửa lại ví dụ lúc nảy một chút để hiển thị một message ngẫu nhiên sau 2 giây.

Đoạn code ở trên sẽ chọn ngẫu nhiên một message trong array và re-render lại component mỗi 2 giây. Message được chọn sẽ được truyền vào Greeting thông qua thuộc tính props. Như các bạn thấy, trong JSX chúng ta truyền vào giống hệt nhự trong HTML, còn trong component, chúng ta lấy giá trị message thông qua thuộc tính props.message.

Lưu ý rằng data được truyền thông qua thuộc tính props phải là là bất biến. Đừng bao giờ thay đổi giá trị của props trong compoment. Hãy giữ cho dữ liệu chỉ 1 chiều.

Giới thiệu State và Events

Như ở phần trước, mình có nói về việc đừng bao giờ thay đổi giá trị của props, vậy thì làm sao để update view? State chính là chìa khóa. Trong React, các component sẽ được đóng gói kèm theo khái niệm về state. State chứa giá trị của mỗi trạng thái của component và cung cấp lại các giá trị này để sử dụng trong component thông qua thuộc tính props. Nó đảm bảo rằng mỗi khi trạng thái của compoent thay đổi, giá trị của props cũng thay đổi. Và kết quả là khi props thay đổi, component cũng sẽ tự re-render, vậy là view được update dựa trên state của component.

Để hiểu kỹ hơn về state, chúng ta sẽ sửa lại ví dụ lúc nảy. Hãy thêm một button, và khi click vào button này, nó sẽ hiển thị một message ngâu nhiên. Để làm điều này, chúng ta cần hai component:

  1. RandomMessage : Đây là component cha, sẽ đảm nhiệm phần lựa chọn ngẫu nhiên một message.
  2. MessageView : Đây là component con, mục đích là để hiển thị message đã được chọn

Component RandomMessage chứa thuộc tính message trong state của nó. Mỗi Component trong react đều có phương thức getInitialState, phương thức này sẽ set giá trị cho state mặc định của component. Trong ví dụ này, khi component được init, state mặc định của nó chứ thuộc tính message có giá trị là ‘Hello, Universe’.

Tiếp theo chúng ta cần phải hiển thị một cái nút, và khi nút này được ấn, giá trị của thuộc tính message sẽ thay đổi:

Như bạn thấy, đoạn code này render một component thứ hai là MessageView và một button. Lưu ý rằng, message là thuộc tính của thuộc tính state, Nó được truyền vào cho component con ( MessageView ) thông qua cú pháp attribute của JSX. Component RandomMessage cũng handle sự kiện click vào button bằng phương thức onClick(). Hãy chú ý vào cách đặc tên của event. Trong html thuộc tính cho event click là onclick, nhưng trong JSX, nó đặc tên theo quy tắc camel, nên lúc này nó là onClick.

Phương thức onClick sẽ chọn lựa ngẫu nhiên một message, sau đó là phần quan trọng, để thay đổi state, chúng ta dùng phương thức setState().

this.setState({ message:randomMessage });

Phương thức này sẽ làm thay đổi props và từ đó React sẽ re-render lại view.

Giờ hãy định nghĩa component MessageView, đây là component sẽ chính thức hiển thị message:

Component này thì đơn giản, chỉ là hiển thị giá trị của message sau khi nó được truyền qua từ parent mà thôi.

Giờ chúng ta đã tạo ra được hết những component cần thiết. Hãy thử render component cha RandomMessage:

ReactDOM.render(
  <RandomMessage />,
  document.getElementById('greeting-div')
);

Kết quả như sau:

Giữ JSX thành file riêng biệt

Cho đến bây giờ, chúng ta đã viết code JSX ở trong thẻ script của file index.html. Để giữ app của chúng ta có cấu trúc, bạn cần phải tách code JSX ra những file riêng, đồng thời, hãy nhớ lại lưu ý lúc đầu, chúng ta cần phải compile các file JSX này khi đưa nó vào production, vì vậy lưu ra file riêng sẽ giúp chúng ta làm việc này dễ hơn.

<script type="text/babel" src="src/random-message.jsx"></script>

Kết quả cuối cùng sẽ như sau

Giờ bạn có thể tạo một server để chạy nó. Một cách đơn giản là cài module http-server của node:

npm install -g http-server

Di chuyển vào thư mục project của bạn và chạy:

http-server

Giờ truy cập vào trang http://127.0.0.1:8080/ để xem thành quả.

Compile JSX

Trong code html chúng ta compile lúc runtime bằng babel, tuy nhiên như vậy thì lại tốn thời gian compile trong khi môi trường lúc runtime là production, thật vô lý. Bạn nên precompile JSX trước khi đưa lên production. Và chúng ta sẽ sử dụng module babel-cli. Bạn có thể cài đặt nó thông qua npm.

npm init -y
npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015 babel-preset-react

Giờ tạo thư mục dist và chạy lệnh

babel --presets es2015,react --watch src/ --out-dir dist

Các file JSX của bạn sẽ được compile thành Javascript và lưu vào thư mục dist. Giờ bạn có thể sử dụng các file này trong html mà không cần phải dùng kèm theo babel nữa.

Virutal DOM

React rất nhanh bởi vì sử dụng một công nghệ có tên là Virtual DOM. React không update toàn bộ real DOM ( DOM đã được render và đang hiện hữu ở trình duyệt. ). Giá trị trả về của phương thức render không được đem đi render ra trình duyệt ngay lập tức mà nó chỉ nói cho React biết DOM mà bạn muốn trông như thế nào, và React sẽ tự động tính toán xem DOM đã được render và DOM mà bạn mô tả giống và khác nhau như thế nào, nó sẽ tự động tìm ra cách tốt nhất để update read DOM.

Lời kết

Đây là chỉ là một bài viết đơn giản mà mình dịch lại từ SitePoint, Mục đích chỉ là để các bạn làm quen và quan trọng là nhận ra rằng React cũng không có gì phức tạp. Cách đây nữa năm, Lúc mình đang đến với BackboneJs và Template của Underscorejs, thì trong mắt mình, ReactJs thật là phức tạp. Nhưng gần đây, khi mình bắt đầu nhả BackboneJs ra thì rõ là tấm lòng đã mở rộng cho nhiều thứ, đúng là thay đổi ở gốc rễ của tư duy là thay đổi lớn, mình bắt đầu thấy react đơn giản hơn, AngularJs cũng đơn giản hơn ngày xưa cả chục lần.