DEV Community

hambalee
hambalee

Posted on

เริ่มต้นใช้ 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" />
Enter fullscreen mode Exit fullscreen mode

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

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

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

อธิบายโค้ด
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"));
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

Top comments (0)