GSP.DEV
  • about
    • ✌️ สวัสดีครับ 😊
  • ⬜introduction
    • 🌐Web Development
      • 🖼️Frontend Developer
      • 🖥️Backend Developer
      • 🎓Full Stack Developer
      • 🚀DevOps Engineer
  • 📖Software
    • 🌐Web Development
      • Language
        • Javascript
        • TypeScript
        • PHP
        • Python
      • Runtime
        • Javascript Runtime
          • Node.js
          • Bun
      • Frontend Framework
        • CSS Framework
          • Tailwind CSS
        • Vite
        • Vue.js
          • Global API
          • Composition API
          • Single-File Component (SFC)
        • Nuxt.js
        • React.js
          • ตัวอย่างการใช้งาน React JS
        • Next.js
      • Backend Framework
        • Express.js
        • NestJS
        • Laravel
    • 🖥️Opeating System
      • Linux
        • Debian
        • Ubuntu
    • 📚Database
      • Relational Databases
        • MySQL
        • Postgres
      • Non-relational Database
        • Document
          • MongoDB
        • Key-value
          • Redis
        • Time Series
          • Prometheus
    • ⚙️Container
      • Docker
        • คำสั่ง Docker พื้นฐาน
      • LXC (Linux Containers)
        • การใช้งาน LXC
        • การใช้งาน Proxmox LXC
      • Container Runtime
        • Docker Container Runtime
        • Containerd
      • Container Orchestration
        • Docker Swarm
        • Kubernetes
    • 🛡️VPN
      • Wireguard
      • Tailscale
    • ☁️Serverless
      • Amazon S3 + Cloudfront
      • Vercel
      • Cloudflare Pages
      • AWS Lambda
    • 📦CDN
      • Cloudfront
    • 🗃️Storage
      • Amazon S3
      • MinIO
    • ✏️Content Management System
      • WordPress
    • 📷Photo Management Software
      • Immich
  • 🏭Infrastructure
    • 🌐Network
      • Firewall
      • Subnet
      • Router
      • Internet
      • Domain
      • DNS
      • Private Network
      • SDN
      • IPAM
      • Protocol
        • IP Address
        • DHCP
        • RTMP
        • TCP
        • UDP
        • HTTP
        • HTTPS
  • ⚙️Technology
    • Cloud Computing คืออะไร
    • VPN คืออะไร
    • Container
  • 🗣️เรื่องเล่า
    • การลดขนาด Image Docker
      • สำหรับ Next.js
    • รีวิว Github Copiot
  • 👨‍💻ลงโค้ด
    • Vue 3
      • การใช้งาน ref
      • การใช้งาน script setup
      • การใช้งาน await ใน script setup
Powered by GitBook
On this page

Was this helpful?

  1. Software
  2. Web Development
  3. Frontend Framework
  4. React.js

ตัวอย่างการใช้งาน React JS

ตัวอย่างการใช้งาน React JS

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>เพิ่ม</button>
      <button onClick={() => setCount(count - 1)}>ลด</button>
    </div>
  );
}

export default App;

ในตัวอย่างข้างต้น เราใช้ React Hook ที่เรียกว่า useState เพื่อจัดการค่าตัวแปร count ซึ่งเป็นตัวนับในแอปพลิเคชัน React ของเรา

PreviousReact.jsNextNext.js

Last updated 4 months ago

Was this helpful?

📖
🌐