JSX là gì?
- JSX là viết tắt của JavaScript XML, nó cho phép chúng ta viết HTML trong React.
- JSX giúp viết và thêm HTML trong React dễ dàng hơn
- JSX cho phép chúng ta viết các phần tử HTML bằng JavaScript và đặt chúng trong DOM mà không cần bất kỳ phương thức createElement () và / hoặc appendChild () nào.
- JSX là một phần mở rộng của ngôn ngữ JavaScript dựa trên ES6 và được dịch sang JavaScript thông thường trong thời gian chạy
- Bạn không bắt buộc phải sử dụng JSX
Ví dụ về sử dụng và không sử dụng JSX:
1 2 3 4 5 6 7 8 9 10 | <span class="token comment">// Có JSX</span> <span class="token comment">// index.js</span> <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom/client'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> myelement <span class="token operator">=</span> <span class="token operator"><</span>p<span class="token operator">></span>Đẹp trai là một tội ác thì toàn bộ zai bách khoa phải đi tù<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>p<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>myelement<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> |
1 2 3 4 5 6 7 8 9 10 | <span class="token comment">// Không có JSX</span> <span class="token comment">// index.js</span> <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom/client'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> myelement <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token string">'Đẹp trai là một tội ác thì toàn bộ zai bách khoa phải đi tù!'</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>myelement<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> |
- Hãy so sánh 2 đoạn code, dễ thấy code sử dụng JSX đơn giản, dễ hiểu hơn.
Một số quy ước trong JSX
- Đặt tên trong JSX
- tên thẻ luôn viết thường
- tên các React component phải viết hoa chữ cái đầu
- sử dụng className và htmlFor thay thế cho class và for
- Các thuộc tính trong thẻ phải được viết dưới dạng camelCase (vd: onClick, className,…)
- Với JSX, bạn có thể viết các biểu thức bên trong dấu ngoặc nhọn {}
1 2 3 4 5 | <span class="token keyword">const</span> apple <span class="token operator">=</span> <span class="token number">30</span><span class="token punctuation">;</span> <span class="token keyword">const</span> myelement <span class="token operator">=</span> <span class="token operator"><</span>h1<span class="token operator">></span><span class="token constant">C</span>ó <span class="token punctuation">{</span>apple<span class="token punctuation">}</span> quả táo<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token keyword">const</span> myelement <span class="token operator">=</span> <span class="token operator"><</span>h1<span class="token operator">></span><span class="token constant">C</span>ó <span class="token punctuation">{</span><span class="token number">30</span> <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">}</span> quả táo<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> |
- Để viết HTML trên nhiều dòng, hãy đặt HTML bên trong dấu ngoặc đơn và đồng thời luôn có một thẻ mẹ bao quanh tất cả.
1 2 3 4 5 6 7 | <span class="token keyword">const</span> myelement <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>p<span class="token operator">></span>Đoạn văn thứ nhất<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Đoạn văn thứ hai<span class="token operator"><</span><span class="token operator">/</span>p<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> |
- Nhưng nếu bạn chỉ muốn có 2 thẻ p mà không cần thẻ div bao quanh thì có thể làm như sau.
1 2 3 4 5 6 7 | <span class="token keyword">const</span> myelement <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token operator"><</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Đoạn văn thứ nhất<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Đoạn văn thứ hai<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">)</span> |
- Hoặc
1 2 3 4 5 6 7 | <span class="token keyword">const</span> myelement <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token operator"><</span>fragment<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Đoạn văn thứ nhất<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Đoạn văn thứ hai<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>fragment<span class="token operator">></span> <span class="token punctuation">)</span> |
- Thêm class cho các thẻ trong JSX.
1 2 | <span class="token keyword">const</span> myelement <span class="token operator">=</span> <span class="token operator"><</span>p className<span class="token operator">=</span><span class="token string">"par1"</span><span class="token operator">></span>Đoạn văn thứ nhất<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> |
- Thêm thuộc tính cho các thẻ trong JSX như trong html.
1 2 | <span class="token keyword">const</span> myelement <span class="token operator">=</span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> value<span class="token operator">=</span><span class="token string">""</span> size<span class="token operator">=</span><span class="token string">"10"</span> <span class="token operator">/</span><span class="token operator">></span> |
- Thêm event cho các thẻ trong JSX như trong html.
1 2 | <span class="token keyword">const</span> myelement <span class="token operator">=</span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>functionHandle<span class="token punctuation">}</span><span class="token operator">></span>Click here<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> |
Trên đây là những gì mình hiểu về JSX, nếu bạn có ý kiến, thắc mắc hay bổ sung gì hãy comment cho mình biết nhé!
Cảm ơn vì đã đọc đến đây!!!