รายละเอียดสำหรับเรียนรู้ React ปี 2020-2023 โดยโค้ชพล ดูหลักสูตรได้ที่ https://www.nextflow.in.th/react-training
เราสามารถเอา React มาใช้งานในเว็บเพจเราได้ทันที ผ่านการใช้งาน <script>
<script src="https:/unpkg.com/react@16.8.0/umd/react.development.js"></script>
<script src="https:/unpkg.com/react-dom@16.8.0/umd/react-dom.development.js"></script>
เราสามารถใช้คำสั่ง ReactDOM.render()
ในการสั่งให้ render Component ตามที่เราต้องการ
ตัวอย่างด้านล่าง เราใช้ React.createElement( elementName, style, content)
ในการสร้าง Component
<body>
<div id="root"></div>
<script type="text/javascript">
ReactDOM.render(
React.createElement("h1", {"style": {"color": "red"}}, "Hello World"),
document.getElementById("root")
);
</script>
</body>
บันทึกไฟล์ และเปิดดูใน Web Browser จะเห็นว่าแสดงข้อความขึ้นมาได้
หรือจะกดดูใน CodePen ของพล ก็ได้ครับ
สำหรับคนที่ไม่สามารถใช้ Project ในเครื่องได้ ให้ลองใช้ CodePen ตัวนี้ได้
แต่แบบที่ใช้กันจริงๆ จะใช้ JSX มากกว่า