เริ่มต้น Hello World ใน React.js

ต่อจากบทความก่อน React คืออะไร ครั้งนี้จากลองในเขียน React.js กันแบบเริ่มต้นง่ายๆด้วยตัวอย่าง Classic อย่างแสดงข้อความ Hello World กัน โดยตัวอย่างนี้จะใช้รูปแบบ include ไฟล์จาก cdn เข้ามาในไฟล์ html ที่สร้างขึ้นแบบง่ายๆก่อน

เริ่มแรกก็สร้างไฟล์ html ขึ้นมา 1 ไฟล์ จากนั้นในก็เขียนโค้ดปิดเปิด tag html ให้เรียบร้อยหรือ text editor ของใคร generate มาให้แล้วก็ข้ามไปได้เลยครับ

ส่วนต่อมาคือการ include ไฟล์ react ซึ่งจะไปกอบด้วย 3 ไฟล์หลักคือ react.js, react-dom.js และ babel.js ซึ่งไม่ต้องทำการโหลดไฟล์มาวางไว้ที่เดียวกับไฟล์ html อีกแล้วใช้งานผ่าน link ของ cdn ได้เลย โดยมีโค้ดตัวอย่างทั้งหมดดังนี้

<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">
		ReactDOM.render(
		<h1>Hello world</h1>,
		document.querySelector('#app'))
	</script>
</body>
</html>

จากโค้ดตัวอย่างจะเห็นว่าในส่วนของ body นั้นจะมีการสร้าง div ขึ้นมาที่มี id=”app” ซึ่งเราจะกำหนดให้ตัว Rect update ข้อมูลเนื้อหาที่อยู่ใน tag div ที่เราได้ทำการสร้างขึ้นมาถัดลงมาจะมี tag script ที่ type=”text/babel” ซึ่งส่วนตรงนี้จะเป็นโค้ด Rect เขียนเพื่อทำการ update content ใน tag div ที่มี id=”app” นั้นเอง โดยจากตัวอย่างจะเห็นว่า Rect นั้นมี method render() ซึ่งจะเป็น method หลักๆที่ใช้งาน โดยสิ่งสำคัญของการใช้ render นั้นคือ content ข้อมูลอะไร แล้วต้องการให้ไป update ตรงไหน รูปแบบตามด้านล่างนี้ครับ

ReactDOM.render( what , where)

โดยในตัวอย่างจะเป็นข้อมูลที่ประกอบด้วยความ Hello world ที่อยู่ใน tag h1 นั้นเอง แล้วให้ไป update DOM ที่มี id = ‘app’ ซึ่งข้อมูล tag h1 นั้นสังเกตว่าจะอยู่ในรูปแบบ JSX

เมื่อเราเขียนโค้ดเสร็จแล้วก็ลองเปิดไฟล์ html ก็จะเห็นข้อความ Hello world ที่เป็น tag h1 นั้นเอง

แล้วเจ้า babel คืออะไรละ มันคือ library ตัวแปลง javascript ที่เราเขียนให้ไปเป็น javascript version เก่า เช่นเมื่อเราเขียนด้วย jsx หรือ ES6 แล้ว browser ที่ใช้งานยังเป็นรุ่นเก่ารองรับแค่ ES5 ละปัญหาเกิดเลย เพราะ script จะไม่สามารถทำงานได้ แต่เจ้า babel จะทำการเปลี่ยน script ที่เราทำให้เป็น javascript แบบเก่าเพื่อให้ browser หลากหลาย version สามารถรองรับและใช้งานได้นั้นเอง ซึ่ง script ที่เราต้องการแปลงต้องอยู่ใน เปิดปิด tag script ที่มี type=”text/babel” นั้นเอง

ก็เป็นอันว่าเราได้เริ่มต้นตัวอย่าง classic อย่างแสดงข้อความ Hello world ใน React แล้วนะครับ

Leave a Reply

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