คอมโพเนนท์แบ่งเป็น 2 ประเภท

1.ฟังก์ชันคอมโพเนนท์ (Function Component)  เป็นคอมโพเนนท์ที่เป็นฟังก์ชัน การทำงานกับข้อมูลในคอมโพเนนท์ประเภทนี้ต้องอาศัยฟีเจอร์ที่เรียกว่า React Hooks ดังตัวอย่างโค๊ด

App.js

import React ,{useState} from 'react';
function App(){
    const [data,setData] = useState(0);
    return(
         <div>
             <p>
                ข้อมูลปัจจุบัน​ : {data}
             </pgt;
            <button onClick={()=>setData(data+1)} > คลิก </button>
        </div>
    );
}
export default App;

จะขึ้นต้นการประกาศด้วยคำว่า function และมีการใช้ React Hooks คือ useState(0) ที่ใช้แทน การกำหนดค่า State


2.คลาสคอมโพเนนท์ (Class Component) คอมโพเนนท์ประเภทนี้เป็นคลาส ที่สามารถทำงานร่วมกับข้อมูลได้ด้วยตัวมันเอง ดังตัวอย่างโค๊ด

App.js

import React ,{Component} from 'react';
class App extends Component{
   constructor(){
       super();
       this.state = {
            data:0
       };
   } 
  function test(){

  }
   render(){
       return (
           <div>
               <p> ข้อมูลปัจจุบัน : {this.state.data} </p>
               <button onClick={()=>this.setState({data:this.state.data+1})}></button>
           </div>  
       );
   }
}
export default App;

จะเห็นว่าขึ้นต้นประกาศด้วย class มี constructor มี render() และมี function ที่จัดการต่าง ๆ ได้ภายใน class มี state คือตัวแปรที่เปลี่ยนค่าได้