Chuyển Đổi HTML Sang JSX

Chuyển đổi HTML sang React JSX tức thì — className, htmlFor, style inline và thẻ self-closing

Chia sẻ:

Chuyển Đổi HTML Sang JSX

HTML → JSX
Đầu vào HTML
HTML
Đầu ra JSX
JSX 

                        

                            

                                
                                
// JSX output appears here

                            

                        

                    

                

            

        



        

            
Tại sao chuyển đổi HTML sang JSX?
            

            
Khi migrate các template HTML hiện có sang React, bạn phải thủ công chuyển đổi class thành className, for thành htmlFor và style inline từ chuỗi thành đối tượng JavaScript. Công cụ này tự động hóa các chuyển đổi này ngay lập tức và cho phép bạn tập trung vào logic component.
            

            

                                    

                        
🔄

                        

                            Chuyển đổi thuộc tính

                        
class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength và nhiều hơn nữa

                    

                                    

                        
🎨

                        

                            Đối tượng style inline

                        
Chuyển đổi style="color:red;" thành style={{color:'red'}} — ký hiệu đối tượng JS của React

                    

                                    

                        
🏷️

                        

                            Thẻ self-closing

                        
Thêm dấu gạch chéo đóng cho các phần tử void: <br> → <br />, <input> → <input />

                    

                            

        

        

            

                Chuyển đổi HTML sang JSX trong 3 bước

            

                                    

                        

                            1

                        

                            Dán HTML

                        

                            Dán template HTML, xuất từ Figma hoặc đoạn code HTML vào bảng trái

                    

                                    

                        

                            2

                        

                            Tự động chuyển đổi

                        

                            Công cụ chuyển đổi tức thì tất cả thuộc tính, style và phần tử void sang cú pháp JSX

                    

                                    

                        

                            3

                        

                            Sao chép JSX

                        

                            Sao chép JSX đã chuyển đổi và dán vào khối render/return của component React

                    

                            

        

        

            
Các trường hợp sử dụng chuyển đổi HTML sang JSX
            

            

                                                        

                        
🚀

                        

                            
Migrate sang React

                            
Migrate trang HTML hoặc template hiện có sang component React mà không cần chuyển đổi thuộc tính thủ công

                        

                    

                                                        

                        
🅱️

                        

                            
Bootstrap trong React

                            
Chuyển đổi component Bootstrap HTML sang JSX để dùng với react-bootstrap

                        

                    

                                                        

                        
📧

                        

                            
Template email

                            
Chuyển đổi template email HTML sang JSX để hiển thị với React Email

                        

                    

                                                        

                        
📝

                        

                            
Từ CMS sang React

                            
Chuyển đổi template HTML WordPress hoặc CMS truyền thống sang cấu trúc component React

                        

                    

                            

        

        

            
Lời khuyên cho chuyển đổi HTML sang JSX
            

            

                                                        

                        
✓ class → className quan trọng

                        
class là từ khóa JavaScript dành riêng. Trong React, phải dùng className cho các lớp CSS.

                    

                                                        

                        
✓ for trong label → htmlFor

                        
Thuộc tính for trên <label> trở thành htmlFor trong JSX. Bỏ sót điều này làm hỏng khả năng tiếp cận.

                    

                                                        

                        
✓ Cập nhật xử lý sự kiện sau khi chuyển đổi

                        
Thuộc tính HTML onclick='...' không tự động chuyển đổi trong JSX. Thay thủ công các handler inline bằng mẫu onClick={handler} của React.

                    

                                                        

                        
✓ Chú thích HTML trở thành chú thích JSX

                        
<!-- chú thích --> được chuyển đổi thành {/* chú thích */} trong JSX.

                    

                            

        

        

            

                ❓ Câu hỏi thường gặp

            

                                                            

                            
Tại sao React dùng className thay vì class?

                            
class là từ khóa JavaScript dành riêng (dùng cho lớp ES6). Vì JSX là JavaScript, class tạo xung đột cú pháp. React chọn className để tránh sự mơ hồ.

                        

                                                                                                                    

                            
Công cụ có xử lý các event handler của React không?

                            
Không — các handler HTML onclick, onsubmit, v.v. không tự động chuyển đổi sang onClick, onSubmit của React. Cần cập nhật thủ công.

                        

                                                                                                                    

                            
Sự khác biệt giữa HTML và JSX là gì?

                            
JSX là extension cú pháp JavaScript tương tự HTML được biên dịch sang lệnh gọi React.createElement(). Các khác biệt chính: tất cả thuộc tính ở camelCase, class→className, for→htmlFor, phần tử void cần self-closing, biểu thức dùng {} thay vì chuỗi.

                        

                                                                                                                    

                            
Tại sao phần tử void cần self-closing trong JSX?

                            
JSX được Babel phân tích như cú pháp tương tự XML và yêu cầu đóng đúng tất cả phần tử. Các phần tử void như <br>, <img>, <input> không có con và yêu cầu /> self-closing.