Introducing JSX
1 2 | <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token punctuation">,</span> world<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">;</span> |
Cú pháp trên không phải là string hay html, nó được gọi là JSX
, là một javascript syntax extension. JSX sẽ tạo ra các react elements, được sử dụng để mô tả cấu trúc của UI output.
JSX Syntax
Cú pháp để viết JSX khá đơn giản, vì được dựa trên cú pháp của XML:
1 2 | <span class="token operator"><</span>nodename<span class="token operator">></span>content<span class="token operator"><</span><span class="token operator">/</span>nodename<span class="token operator">></span> |
trong đó nodename là tên của thẻ, có thể là các tag có sẵn của html hoặc chúng ta tự định nghĩa.
JSX không phải là html, vì thế nên ReactDOM sẽ sử dụng camelCase
để khai báo các properties thay cho HTML attribute, vd class
của html sẽ là className
của JSX:
1 2 | <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"sidebar"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div |
Why JSX?
Việc sử dụng JSX trong reactJS là không bắt buộc. Tuy nhiên có nhiều lí do khiến chúng ta muốn dùng đến nó hơn là chỉ dùng js đơn thuần, vd:
- JSX có cú pháp gần giống XML, nên sẽ dễ dàng hơn trong việc định nghĩa và quản lý các component có cấu trúc phức tạp.
- JSX gần gũi với JS hơn, không làm thay đổi ngữ nghĩa của JS
Embedding Expressions in JSX
Ta có thể nhúng bất kì JS expression nào trong JSX bằng cách sử dụng dấu ngoặc nhọn {}
. Ví dụ như chúng ta định nghĩa 1 biến là name
và dùng nó trong JSX:
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'Thanos'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token punctuation">,</span> <span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">;</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span> element<span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
Hoặc 1 vd khác, nhúng JS function formatName(user)
vào thẻ <h1>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token keyword">function</span> <span class="token function">formatName</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> user<span class="token punctuation">.</span>firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> user<span class="token punctuation">.</span>lastName<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> firstName<span class="token operator">:</span> <span class="token string">'Tha'</span><span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">'Nos'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token operator"><</span>h1<span class="token operator">></span> Hello<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token function">formatName</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">!</span> <span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span> element<span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
JSX is an Expression Too
JSX bản thân nó cũng chính là 1 expression, có nghĩa là chúng ta có thể sử dụng nó trong các logic thông thường như if else, loop, gán vào biến, giá trị trả về…
1 2 3 4 5 6 7 | <span class="token keyword">function</span> <span class="token function">getGreeting</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token function">formatName</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token punctuation">,</span> Stranger<span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Specifying Attributes with JSX
Ta có thể sử dụng dấu ngoặc kép để chỉ định các chuỗi literals:
1 2 | <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>div tabIndex<span class="token operator">=</span><span class="token string">"0"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">;</span> |
Hoặc dấu ngoặc nhọn để nhúng js expression vào attribute:
1 2 | <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span>user<span class="token punctuation">.</span>avatarUrl<span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>img<span class="token operator">></span><span class="token punctuation">;</span> |
Specifying Children with JSX
Với một thẻ trống, ta có thể đóng lại ngay lập tức với />
, như với XML:
1 2 | <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span>user<span class="token punctuation">.</span>avatarUrl<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span> |
Để định nghĩa thẻ con cho JSX, ta có thể viết như sau:
1 2 3 4 5 6 7 | <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>h2<span class="token operator">></span>Good to see you here<span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
JSX Prevents Injection Attacks
1 2 3 4 | <span class="token keyword">const</span> title <span class="token operator">=</span> response<span class="token punctuation">.</span>potentiallyMaliciousInput<span class="token punctuation">;</span> <span class="token comment">// This is safe:</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>h1<span class="token operator">></span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">;</span> |
Chúng ta có thể nhúng các data mà user input vào JSX mà không sợ các vấn đề liên quan đến injection. Bởi vì mặc định thì React DOM sẽ escape các giá trị được nhúng vào JSX, convert tất cả thành string trước khi chúng được render. Việc này nhằm ngăn chặn nguy cơ bị tấn công XSS (cross-site-scripting)
Rendering Element
Rendering an Element into the DOM
Giả sử như chúng ta có 1 thẻ div:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Chúng ta gọi nó là root DOM vì mọi thứ bên trong nó sẽ được quản lý bởi React DOM. Với những app chỉ được build bằng React thường sẽ chỉ có duy nhất 1 root DOM node. Nếu trường hợp thêm React vào app đã có sẵn, ta có thể có nhiều root DOM theo ý muốn.
Để render React element vào trong một root DOM, ta sẽ dùng ReactDOM.render()
1 2 3 | <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token punctuation">,</span> world<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">;</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Updating the Rendered Element
Các React elements là bất biến. Tức là ta không thể thay đổi các element con hoặc các thuộc tính của chúng sau khi được khởi tạo. Mỗi react element giống như 1 cảnh trong bộ phim, nó đại diện cho UI ở một thời điểm nhất định, vì thế nên, để update UI thì chỉ có cách tạo thêm element mới, rồi sau đó truyền vào ReactDOM.render()
Cùng xem vd tik tok dưới đây:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">function</span> <span class="token function">tick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token punctuation">,</span> world<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>h2<span class="token operator">></span>It is <span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toLocaleTimeString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">setInterval</span><span class="token punctuation">(</span>tick<span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Cứ mỗi 1 giây thì ReactDOM sẽ render ra element mới.
React Only Updates What’s Necessary
ReactDOM sẽ so sánh element (và các element con của nó) với element cũ trước đó, và chỉ update các DOM cần thiết:
Mặc dù ở bên trên ta tạo mới element mỗi lần gọi vào function tick
, nhưng chỉ có những node bị thay đổi mới được ReactDOM update lại
Summary
Bài viết nhằm giới thiệu về 2 trong số những khái niệm chính của ReactJS là JSX và Rendering. Cảm ơn bạn đã dành thời gian theo dõi.
Source: