Hướng dẫn is html and jsx same? - html và jsx có giống nhau không?

Ngôn ngữ đánh dấu siêu văn bản (HTML) là ngôn ngữ tiêu chuẩn cho các tài liệu xác định cấu trúc của một trang web.

HTML là một ngôn ngữ rất quan trọng trong phát triển web. Mã của bạn có trong HTML ban đầu hoặc biên dịch cho nó để các trình duyệt có thể đọc nó.

JSX, mặt khác, có nghĩa là phần mở rộng cú pháp JavaScript hoặc JavaScript XML như một số người muốn đặt nó.

Nó được tạo ra như một đường cú pháp cho React.createElement(). Đây là một phần mở rộng của JavaScript cho phép các nhà phát triển viết HTML ngay trong JavaScript. Vì vậy, khi bạn viết JSX, về mặt kỹ thuật, bạn đang viết JavaScript và HTML cùng nhau.

Ngoài ra, điều đó có nghĩa là các từ khóa dành riêng của JavaScript phải được giữ nguyên. Và đó là lý do tại sao thuộc tính của For For trong HTML là HT HTMLFor, trong JSX, vì "cho" là một trong những từ khóa dành riêng cho JavaScript.

Về mặt hỗ trợ của các trình duyệt, HTML được hỗ trợ bởi tất cả chúng. JSX, mặt khác, không bao giờ thực sự có ý định, vì vậy bạn cần một trình biên dịch như Babel hoặc Webpack để chuyển JSX vào JavaScript mà trình duyệt hiểu.

Sự khác biệt chính giữa HTML và JSX

Bạn cần trả về một phần tử cha mẹ duy nhất trong JSX

Một trong những khác biệt chính giữa HTML và JSX là trong JSX, bạn phải trả về một phần tử mẹ duy nhất hoặc nó sẽ không biên dịch.

Rất nhiều nhà phát triển sử dụng

Trong HTML, bạn có thể tự do làm bất cứ điều gì bạn muốn vì bạn không phải trả lại một yếu tố cha mẹ duy nhất.

Bạn có thể triển khai JS trực tiếp trong JSX

Trong JSX, có thể viết JavaScript trực tiếp. Bạn có thể làm điều này bằng cách đặt JavaScript vào niềng răng xoăn {...}. Trong khi ở HTML, bạn cần một thẻ tập lệnh hoặc tệp JavaScript bên ngoài để triển khai JavaScript:

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

      
    
  );
};
export default Article;

Tất cả các thẻ tự đóng trong jsx

Thẻ có thể tự đóng trong JSX. Đó là, có thể có

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        

          Name
          
        
      
    
  );
};

export default Article;

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        

          Name
          
        
      
    
  );
};

export default Article;

Các thẻ tự đóng trong HTML có thể tự đóng mà không cần chém trước khung góc vuông, đó là

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        

          Name
          
        
      
    
  );
};

export default Article;

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        

          Name
          
        
      
    
  );
};

export default Article;

ClassName và HTMLFor, không phải lớp và cho trong JSX

Để xác định tên lớp và cho các thuộc tính trong JSX, bạn không làm điều đó là

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        

          Name
          
        
      
    
  );
};

export default Article;

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        

          Name
          
        
      
    
  );
};

export default Article;

Bạn thực sự tạo các thành phần lớp với từ khóa

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        

          Name
          
        
      
    
  );
};

export default Article;

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        

          Name
          
        
      
    
  );
};

export default Article;

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        

          Name
          
        
      
    
  );
};

export default Article;

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        

          Name
          
        
      
    
  );
};

export default Article;

Viết tất cả các thuộc tính HTML trong Camelcase trong JSX

Bạn cần viết tất cả các thuộc tính HTML và tài liệu tham khảo sự kiện trong Camelcase trong khi viết JSX. Vì vậy,

const Article = () => {
  const sayHI = () => {
    alert("Hi Campers");
  };

  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        ALert Hi
      
    
  );
};
export default Article;

const Article = () => {
  const sayHI = () => {
    alert("Hi Campers");
  };

  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        ALert Hi
      
    
  );
};
export default Article;

const Article = () => {
  const sayHI = () => {
    alert("Hi Campers");
  };

  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        ALert Hi
      
    
  );
};
export default Article;

const Article = () => {
  const sayHI = () => {
    alert("Hi Campers");
  };

  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        ALert Hi
      
    
  );
};
export default Article;

const Article = () => {
  const sayHI = () => {
    alert("Hi Campers");
  };

  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        ALert Hi
      
    
  );
};
export default Article;

Viết các kiểu nội tuyến dưới dạng đối tượng trong JSX

Và cuối cùng, để xác định các kiểu nội tuyến cho JSX, bạn viết nó thành một đối tượng, với các thuộc tính trong Camelcase, các giá trị trong trích dẫn, và sau đó bạn chuyển nó nội tuyến cho JSX.

Điều này có nghĩa là bạn phải mở một thuộc tính kiểu và sử dụng niềng răng xoăn thay vì trích dẫn. Điều này trái ngược với HTML nơi bạn tự do xác định hàng triệu kiểu ngay bên trong thẻ mở mà không viết chúng làm đối tượng và đưa chúng vào trích dẫn:

const Article = () => {
  const inlineStyle = {
    color: "#2ecc71",
    fontSize: "26px",
  };
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        ALert Hi
      
    
  );
};
export default Article;

Bạn có thể chọn viết đối tượng trực tiếp vào thuộc tính kiểu - nghĩa là, bằng cách mở hai niềng răng xoăn và đặt các thuộc tính và giá trị bên trong.

Nhưng một cách sạch hơn là xác định đối tượng bên ngoài JSX, và sau đó chuyển nó vào thẻ mở.

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

      
    
  );
};

export default Article;

Lưu ý rằng bạn không nên sử dụng Kiểu nội tuyến trong HTML đơn giản - bạn không muốn phá hỏng SEO của trang web của mình.

Đó là nó!

Cảm ơn bạn đã đọc. Để kết nối với tôi, hãy kiểm tra danh mục đầu tư của tôi hoặc theo dõi tôi trên Twitter, nơi tôi dành phần lớn thời gian để tweet và tham gia vào bất cứ điều gì phát triển web.