จากตัวอย่างในบทความก่อน เริ่มต้น 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/[email protected]/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/[email protected]/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 *