Wrikka Learn

Dark mode

ต่อไปนี้คือคำอธิบายและตัวอย่างโค้ดสำหรับ HTML elements ที่ระบุใน React โดยใช้รูปแบบที่คุณต้องการ:

<div> ​

อีลีเมนต์ทั่วไปที่ใช้เป็น container สำหรับจัดกลุ่มอีลีเมนต์อื่น ๆ ไม่มี semantic meaning ใช้สำหรับการจัดเลย์เอาต์หรือ styling

jsx
function MyComponent() {
  return (
    <div style={{ background: 'lightgray', padding: '10px' }}>
      <h1>Hello</h1>
      <p>Content</p>
    </div>
  );
}

<form> ​

สร้างฟอร์มสำหรับรับข้อมูลจากผู้ใช้ ส่งข้อมูลไปยัง server หรือจัดการใน client ด้วย onSubmit event

jsx
function MyForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

<input> ​

รับข้อมูลจากผู้ใช้ เช่น ข้อความ, รหัสผ่าน, หรือ checkbox รองรับ type ต่าง ๆ เช่น text, checkbox, radio

jsx
import { useState } from 'react';

function MyInput() {
  const [value, setValue] = useState('');

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Enter text"
    />
  );
}

<option> ​

กำหนดตัวเลือกใน <select> element ใช้ร่วมกับ <select> เพื่อสร้าง dropdown menu

jsx
function MySelect() {
  return (
    <select>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
    </select>
  );
}

<progress> ​

แสดงแถบความคืบหน้า (progress bar) สำหรับงานที่กำลังดำเนินการ เช่น การโหลดไฟล์ โดยใช้ value และ max

jsx
function MyProgress() {
  return <progress value={50} max={100}>50%</progress>;
}

<select> ​

สร้าง dropdown menu เพื่อให้ผู้ใช้เลือกตัวเลือกจากรายการ ใช้ร่วมกับ <option> และจัดการด้วย onChange

jsx
import { useState } from 'react';

function MySelect() {
  const [value, setValue] = useState('apple');

  return (
    <select value={value} onChange={(e) => setValue(e.target.value)}>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
    </select>
  );
}

<textarea> ​

สร้างช่องสำหรับป้อนข้อความหลายบรรทัด รองรับการจัดการค่าและ events เช่น onChange

jsx
import { useState } from 'react';

function MyTextarea() {
  const [text, setText] = useState('');

  return (
    <textarea
      value={text}
      onChange={(e) => setText(e.target.value)}
      rows={4}
      cols={50}
      placeholder="Enter your text"
    />
  );
}

กำหนดการเชื่อมโยงไปยังทรัพยากรภายนอก เช่น stylesheet มักใช้ใน <head> แต่ใน React สามารถใช้ใน JSX หรือจัดการผ่าน preinit/preload

jsx
import { preinit } from 'react-dom';

function MyComponent() {
  preinit('https://example.com/style.css', { as: 'style' });
  return <div>Styled content</div>;
}

<meta> ​

กำหนด metadata เช่น charset, viewport, หรือ description สำหรับหน้าเว็บ มักใช้ใน <head> และจัดการใน React ผ่าน libraries เช่น react-helmet

jsx
import { Helmet } from 'react-helmet';

function MyComponent() {
  return (
    <div>
      <Helmet>
        <meta name="description" content="My page description" />
      </Helmet>
      <h1>Page Content</h1>
    </div>
  );
}

<script> ​

โหลดหรือกำหนด JavaScript ในหน้าเว็บ ใน React มักจัดการผ่าน preinit หรือ external module imports แทนการใช้ <script> โดยตรง

jsx
import { preinit } from 'react-dom';

function MyComponent() {
  preinit('https://example.com/script.js', { as: 'script' });
  return <div>Script loaded</div>;
}

<style> ​

กำหนด CSS styles ภายในหน้าเว็บ ใน React สามารถใช้ inline styles หรือ CSS-in-JS แทนการใช้ <style> โดยตรง

jsx
function MyComponent() {
  return (
    <div>
      <style>{`.my-class { color: blue; }`}</style>
      <div className="my-class">Styled text</div>
    </div>
  );
}

<title> ​

กำหนดชื่อของหน้าเว็บ มักใช้ใน <head> และจัดการใน React ผ่าน libraries เช่น react-helmet

jsx
import { Helmet } from 'react-helmet';

function MyComponent() {
  return (
    <div>
      <Helmet>
        <title>My Page Title</title>
      </Helmet>
      <h1>Page Content</h1>
    </div>
  );
}