Different of Bootstrap in HTML and React

#HelloFront-end #HelloErmine #HelloWorld2021

ความแตกต่างของการใช้ Bootstrap ใน HTML กับ React

HTML

ภายใน HTML จะถูกใช้คำว่า class เป็น Attribute ในการเรียกใช้ CSS

<div class="container">
<div class="row">
<div class="col-8">8</div>   
<div class="col-4">4</div>   
</div>

React

ภายใน React จะถูกใช้คำว่า className เป็น Attribute ในการเรียกใช้ CSS

<Container>
<Row>
<Col className='col-8'>8</Col>
<Col className='col-4'>4</Col>
</Row>
</Container>

ความแตกต่างของ syntax

ภายใน React จะมี component react ในการใช้ Bootstrap มาให้เป็น prop หากมีตัว Bootstrap ที่ไม่มี prop สามารถใช้ className แทนได้

สามารถเขียนได้ทั้ง component react

<Button variant="primary">i am button</Button>

หรือ เรียกใช้ className ก็ได้

<Button className='btn-primary'>i am button</Button>

ผลลัพธ์ด้านบน คือ การใช้ component react ส่วนด้านล่าง คือ className

สามารถเขียนได้ทั้ง prop หรือ เรียกใช้ className ก็ได้ แต่หากมี prop ให้ เลือกใช้ prop จะดีกว่า