នៅក្នុងការបង្កើតកម្មវិធី React គេនិយមបង្កើតផ្នែកផ្សេងៗនៃកម្មវិធី ដាច់ដោយឡែកពីគ្នា រួចបានយកមកផ្គុំគ្នាបង្កើតបានជាកម្មវិធី React ទាំងមូល។ ផ្នែកដាច់ដោយឡែកពីគ្នាទាំងនោះ ត្រូវគេអោយឈ្មោះជាភាសាអង់គ្លេសថា «Component» ។
យ៉ាងណាម៉ិញ នៅក្នុងការបង្កើតកម្មវិធី React ដែលជាផ្នែកខាងមុខ (fronted) នៃគេហទំព័រ វាទាមទារចាំបាច់អោយយើងបង្កើតផ្នែកក្បាល ដងខ្លួន និងផ្នែកជើងនៃគេហទំព័រ រួចបានយកផ្នែកទាំងនោះមកផ្គុំគ្នា បង្កើតបានជាទំព័រមុខទាំងមូល។ ហើយការបង្កើតផ្នែកក្បាលនៃគេហទំព័រ អាចត្រូវធ្វើឡើងតាមរបៀបដូចខាងក្រោមនេះ៖
import './App.css'
import './styles/global.css'
import Header from './components/header'
function App() {
return (
<div className="App">
<Header />
</div>
)
}
export default App;
import '../styles/header.css'
function Header(){
return (
<div className="Header ">
<div class='wrapper region'>
<div class='logo'>កម្មវិធី React</div>
<form class='search'>
<input type="text" name='q' required />
<input type='submit' value='បញ្ជូន' />
</form>
<div class='logout'>ទំព័រដើម | ចូលក្នុង</div>
</div>
</div>
)
}
export default Header
.Header{
background: var(--background-dark);
color: white;
padding: 5px 0;
}
.Header .wrapper{
display: grid;
grid-template-columns: 30% auto 25%;
align-items: center;
}
.Header .wrapper .logo{
font: 30px/1.5 Anton, Limonf3;
}
.Header .wrapper .search{
display: grid;
grid-template-columns: auto 20%;
}
.Header .wrapper .search input{
font: 14px/1.5 Vidaloka, OdorMeanChey;
padding: 0 10px;
}
.Header .wrapper .logout{
text-align: right;
font-size: 18px;
}