Component ใน React.js เบื้องต้น

จากตัวอย่างในบทความก่อน เริ่มต้น Hello World ใน React.js คราวนี้จะลองเขียนแยกออกมาเป็น component เบื้องต้นกัน เริ่มแรกจากโค้ดเก่าให้ทำการแก้โค้ดใน script tag

โดยสร้าง Class ที่มีชื่อว่า App ทำการ extends มาจาก React.Component โดยมี method render ที่ return ข้อมูลออกมาเป็นข้อความ tag h1 ซึ่งมีโค้ดดังนี้

<!DOCTYPE html>
<html>
<head>
	<title>Hello World</title>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
<div id="app"></div>
<script type="text/babel">
	class App extends React.Component{
		render(){
		  return <h1>Hello from class App Component</h1>
		}
	}
</script>
</body>
</html>

เมื่อทำการแก้โค้ดเสร็จ ลองเปิดหน้าเพจดูกับพบว่าเป็นหน้าเปล่าๆ เพราะยังไม่ได้ทำการ render ผ่าน visual DOM นั้นเอง ซึ่งต้องใช้คำสั่ง ReactDOM.render โดยมีโค้ดในส่วนของ script tag ดังนี้ครับ

class App extends React.Component{
  render(){
    return <h1>Hello from class App Component</h1>
  }
}
var mount = document.querySelector('#app')
ReactDOM.render(<App/>, mount)

สังเกตว่ามีการประกาศตัวแปร mount ขึ้นมาให้เก็บค่า DOM ที่เราต้องการ render ข้อมูล แล้วใช้คำสั่ง ReactDOM.render ที่ยังคง concept เดิมคือ

ReactDOM.render( อะไร, ที่ไหน )

โดย class App ที่เป็น component ที่เราสร้างขึ้นนั้นให้ใช้เป็น close tag ของชื่อ class ที่เราสร้างขึ้นคือ <App /> นั้นเอง เมื่อลอง refresh เพจอีกรอบก็จะแสดงข้อความออกมาตามภาพด้านล่างครับ จุดสังเกตจะเห็นว่าแม้กระทั่งใน class component ก็ยังบังคับให้ใช้ method render แล้ว return ค่าออกมา

Leave a Reply

Your email address will not be published. Required fields are marked *