Tìm hiểu ReactJs từ cơ bản đến cách sử dụng

Nếu bạn chưa sử dụng ReactJs trước đây, bạn đã đến đúng nơi rồi đấy. Ngay cả khi bạn đã từng sử dụng React nhưng gặp phải những vấn đề khó hiểu, hãy đọc bài viết này. Hướng dẫn này sẽ cung cấp cho bạn kiến thức cơ bản về ReactJs và cách sử dụng nó.

ReactJs là gì và tại sao bạn nên sử dụng nó?

Trang chủ ReactJs đã trả lời cho câu hỏi đầu tiên một cách rõ ràng. Tuy nhiên, nếu bạn hỏi ý kiến của tôi, tôi sẽ định nghĩa ReactJs là "một cơ chế hiển thị giao diện dựa trên nền tảng JavaScript". Đáng lưu ý là tôi đã bỏ "HTML" ra khỏi định nghĩa vì ReactJs có thể làm việc với nhiều đối tượng khác nhau, không chỉ giới hạn trong HTML. Tôi cũng bỏ "browser" ra khỏi định nghĩa vì ReactJs có thể được sử dụng trên server và các ứng dụng native. Đối với tôi, "Engine" trong định nghĩa của ReactJs tương tự như các game engine. Với ReactJs, bạn chỉ cần xác định trạng thái của ứng dụng, chuyển nó sang view, và nếu có bất kỳ thay đổi nào xảy ra, bạn chỉ cần render lại nó để nhận được view mới.

Chúng tôi đã chuyển từ việc sử dụng Backbone views sang React views. Với React, việc duy trì tính đồng bộ giữa trạng thái ứng dụng và view trở nên đơn giản. Chỉ cần render lại, clean-up, và lặp đi lặp lại. Điều này cho phép bạn dễ dàng xây dựng các thành phần giao diện hoàn toàn độc lập và có thể tái sử dụng. Nếu có bất kỳ thay đổi nào, bạn hoàn toàn có thể tái cấu trúc lại các views một cách linh hoạt!

Hello world

Một ví dụ đơn giản và phổ biến nhất của ReactJs:

React.render(   
Hello, world!
,   document.body );

Thật đơn giản phải không? ReactJs là một công cụ cực kỳ mạnh mẽ, nhưng chúng ta lại sử dụng nó để in ra câu nói nhàm chán "Hello, world!". Hãy tạm quên ví dụ trên và chúng ta sẽ thảo luận về JSX, một tính năng quan trọng trong React.

JSX

Nếu bạn đã từng nghe về ReactJs, bạn cũng có thể đã nghe qua về JSX. Để thực sự cảm thấy hứng thú khi sử dụng JSX, bạn cần lưu ý hai điều sau:

1. Bạn phải thực sự hiểu JSX là gì và tất cả các sắc thái của nó.
2. Bạn phải có kinh nghiệm để quyết định khi nào nên sử dụng JSX và xem nó như một điều cần thiết.

Đầu tiên, hãy nhớ rằng JSX không phải là một ngôn ngữ template. JSX chỉ đơn giản là một cú pháp thay thế cho JavaScript. Ví dụ trên có thể được viết lại như sau:

React.render(   React.createElement('div', {}, 'Hello, world!'),   document.body );

Chúng ta coi như React.createElement là một phương thức chưa biết, vì vậy chúng ta sẽ làm cho nó trở nên rõ ràng hơn một chút. Khi sử dụng ReactJs, bạn thường không làm việc trực tiếp với DOM. Thay vào đó, bạn tạo ra các thành phần Virtual DOM. Virtual DOM là các đối tượng JSON, thể hiện cấu trúc dưới dạng DOM nhưng không mang bất kỳ đặc tính nào của DOM thật. ReactJs sẽ chuyển đổi các thành phần này thành các thành phần DOM thực tế khi cần thiết. React.createElement là một phương thức được sử dụng để tạo ra các đối tượng JSON này. Cú pháp như sau:

React.createElement(elementNameOrClass, props, children...);

Trong ví dụ Hello world ở trên, chúng ta sử dụng một thẻ HTML làm tham số đầu tiên. Những thẻ HTML ở vị trí này cũng có thể được coi như các component classes. Tham số thứ hai được sử dụng để truyền các thuộc tính cho component class trước đó. Các tham số còn lại trở thành các thuộc tính đặc biệt, là các thành phần con của component. Chúng ta sẽ thảo luận về điều này sau. Bây giờ, bạn chỉ cần nhớ rằng JSX chuyển đổi đoạn code trên thành:

Với JSX, bạn có thể sử dụng JavaScript một cách linh hoạt. Bạn có thể sử dụng biểu thức, cấu trúc hàm và bất kỳ tính năng JavaScript nào khác trong views của bạn. Bạn không cần phải viết các tiện ích đặc trưng cho ngôn ngữ template của mình, chỉ cần sử dụng JavaScript:

var names = ['Moe', 'Larry', 'Curly'];  React.render(   
     {names.map(function (name) {       return 
Hello, {name}!
     })}   
,   document.body );

Dấu ngoặc nhọn {} cho phép chúng ta sử dụng JavaScript một cách tự do, chúng không phải là một cơ chế escape dữ liệu. Chú ý rằng trong hàm map, chúng ta trả về một đoạn mã là một thẻ div, bên trong nó lại có một biểu thức JavaScript. Đây là một ví dụ rõ ràng về việc JSX không phải là một ngôn ngữ template.

JSX không bắt buộc, nhưng lại rất hữu ích

Theo quan điểm cá nhân của tôi, JSX rất hữu ích vì hai lý do:

1. JSX cung cấp các biểu thức viết tắt hữu ích cho một số phần mẫu React mà bạn phải sử dụng, dù bạn có muốn hay không. JSX khiến cho mã HTML của bạn trông giống mã HTML. Ví dụ trên ngắn hơn so với các ví dụ chứa mã JavaScript tương đương. Dĩ nhiên, chúng ta có thể sáng tạo theo cách của riêng mình. Hãy xem ví dụ dưới đây:

var R = React.DOM; Greeting = React.createFactory(GreetingClass);  React.render(   R.div({id: "greeting-container", className: "container"}, Greeting({name: "World"})),   document.body );

React.DOM cung cấp một tập hợp các factories cho các thẻ HTML. React.createFactory chỉ là một trợ giúp để liên kết component class của bạn với React.createElement để bạn có thể tạo các factories riêng của mình. Theo quan điểm của tôi, vấn đề lớn ở đây là mã JavaScript được trộn lẫn với mã HTML. Hãy xem ví dụ sau:

R.p({}, 'The live example is the same. The only difference is that we render to ', R.code({}, 'mountNode' ), ', which is just the DOM node for the example.' )

Khi chuyển đổi sang JavaScript, nó sẽ trở nên khó nhìn:

R.p({}, 'The live example is the same. The only difference is that we render to ', R.code({}, 'mountNode' ), ', which is just the DOM node for the example.' )

Ví dụ trên là một vấn đề thực tế mà đã thuyết phục tôi nên sử dụng JSX.

2. Nếu bạn có một nhà thiết kế đang làm việc với HTML, việc chuyển sang JSX sẽ không đơn giản. Thay thế tất cả các mã HTML bằng JavaScript sẽ tốn rất nhiều công sức và nhà thiết kế có thể sẽ không hài lòng với điều đó!

Các components tùy chỉnh

Trên đây, tôi đã giải thích với bạn về JSX là gì và cách sử dụng nó cho các views của bạn. Tuy nhiên, đó chưa phải là lý do bạn nên sử dụng ReactJs. Một khi bạn bắt đầu tạo ra các components tùy chỉnh, bạn sẽ nhận thấy lý do thực sự khiến bạn không thể rời mắt khỏi ReactJs.

Component đầu tiên

Hãy thử tạo một ứng dụng ghi chú. Để giữ mọi thứ đơn giản, chúng ta sẽ bỏ qua việc lưu trữ dữ liệu trên server. Bắt đầu với một ứng dụng đơn giản và xác định dữ liệu cần để render:

var notepad = {   notes: [     { id: 1, content: "Hello, world! Boring. Boring. Boring." },     { id: 2, content: "React is awesome. Seriously, it's the greatest." },     { id: 3, content: "Robots are pretty cool. Robots are awesome, until they take over." },     { id: 4, content: "Monkeys. Who doesn't love monkeys?" }   ] }

Giờ chúng ta sẽ tạo một custom component và render một danh sách các ghi chú của chúng ta. Đầu tiên, dòng đầu tiên của ghi chú sẽ là tiêu đề (chưa xét đến tối ưu hóa):

var NotesList = React.createClass({   render: function () {     var notes = this.props.notepad.notes;     return (       
         {notes.map(function (note) {           var title = note.content.substring(0, note.content.indexOf('\n'));           title = title || note.content;           return (             
               {title}             
           );         })}       
     );   } });

Lưu ý rằng chúng ta đã đặt một thuộc tính key. Thuộc tính key là duy nhất, xác định một component bên cạnh các components liên quan. Nói chung, khi bạn sử dụng các phương thức map, filter hoặc tương tự, bạn cần gán một key cho mỗi phần tử. Đôi khi, ngay cả với một phần tử đại diện cho một thứ duy nhất, bạn cũng cần sử dụng key để đảm bảo ReactJs xóa DOM thay vì tái sử dụng nó. Chúng ta sẽ thảo luận về điều này sau. Bây giờ, bạn chỉ cần hiểu rằng ReactJs sẽ cảnh báo nếu bạn không làm điều đó. Và nếu bạn bỏ qua cảnh báo, có thể sẽ xảy ra các lỗi kỳ lạ.

Mọi thứ trở nên thú vị hơn. Nếu ReactJs chỉ có thể render các ghi chú của chúng ta, nhưng có thể ghi chú nào đó trông như thế này:

Chúng ta chỉ mới bắt đầu khám phá sức mạnh của ReactJs.