เริ่มต้นใช้ React

สอนใช้ React สำหรับมือใหม่ผู้เริ่มต้นหรือคนที่อยากทบทวน
สามารถอ่านได้ในภาษาไทยและจะพยายามอธิบายแบบเข้าใจง่าย

รู้จักเครื่องมือสำหรับมือใหม่ที่ชื่อว่า Codepen.io

Codepen.io คืออะไร ?
เป็นเครื่องมือสำหรับทดลองสร้างและทดสอบโค้ด เหมาะสำหรับ Front-end
เข้าใช้งานได้ที่ https://codepen.io/

เริ่มต้นใช้ Codepen.io

เมื่อเข้ามาแล้วกด Start Coding เพื่อเริ่มเขียนโค้ดได้เลย

ก่อนอื่นต้องตั้งค่าก่อนเพื่อให้สามารถใช้งาน React ได้
กดปุ่ม Setting
กดเลือก JS
ส่วนของ JavaScript Preprocessor เลือกเป็น Babel
ส่วนของ Add External Scripts/Pens พิมพ์ค้นหาว่า React แล้วเลือก react และ react-dom
กด close เพื่อปิด

เริ่มต้นเขียน React

เขียนโค้ดในส่วน HTML

<div id="app" />

อธิบายโค้ด
id สำหรับใช้อ้างอิง

เขียนโค้ดในส่วน CSS

.person {
  display: inline-block;
  margin: 20px;
  padding: 20px;
  border: solid 5px #555;
  box-shadow: #aaa 8px 5px 9px;
  width: 200px;
}

อธิบายโค้ด
display ให้อยู่ในบรรทัดเดียวกัน
padding กำหนดระยะห่างจากด้านใน
margin กำหนดระยะห่างจากด้านนอก
border ขอบ
box-shadow เงาของขอบ
width ความกว้าง

เขียนโค้ดในส่วน JS

function Person(props){
  return (
    <div className="person">
      <h1>Name : {props.name}</h1>
      <h2>Age : {props.age}</h2>
    </div>
  );
}

var app = (
  <div>
    <Person name="A" age="1" />
    <Person name="B" age="2" />
  </div>
);

ReactDOM.render(app, document.querySelector("#app"));

อธิบายโค้ด
function Person เป็นการสร้างฟังก์ชันโดยรับค่ามาเป็น props

var app สร้างตัวแปรโดยให้รีเทิร์นออกเป็นภาษา JSX (HTML อยู่ใน JS) โดยในตัวแปรจะมีการใช้งาน Person แล้วมีการส่ง props เป็น name และ age

ReactDOM.render เป็นตัวที่แปลงทำให้ react ทำงานได้

จะได้ผลลัพธ์ดังนี้