เรียนรู้ React.js ใน 5 นาที
คำแนะนำเบื้องต้นกับ JavaScript Library ที่นิยมมากที่สุด
บทช่วยสอนนี้จะทำให้เข้าใจพื้นฐานของ React.js โดยจะสอนให้สร้างแอปพลิเคชันง่ายๆ ซึ่งหัวข้อนี้อาจจะไม่ลงรายละเอียดลึกมาก
เมื่ออ่านบทความนี้ก็มีการแนะนำหลักสูตร React ฟรีได้ที่นี้ https://scrimba.com/g/greactchatkit

การตั้งค่า

เมื่อเริ่มต้นด้วย React ควรใช้การตั้งค่าที่ง่ายที่สุด: ได้แก่ ไฟล์ HTML ที่นำเข้า React และไลบรารี ReactDOM โดยใช้แท็กสคริปต์นี้

นอกจากนี้เราอาจจะ import Babel เนื่องจาก React จะใช้สิ่งที่เรียกว่า JSX เพื่อเขียนตัว Markup เราจะต้องแปลง JSX นี้เป็น JavaScript ธรรมดาเพื่อให้เบราว์เซอร์สามารถเข้าใจว่า
JSX คืออะไร สามารถเข้าไปอ่านเพิ่มเติมได้ที่ลิงค์นี้ https://reactjs.org/docs/introducing-jsx.html

มีอีกสองสิ่งที่อยากให้สังเกตุ:
1.id=”root” คือ entry point
2.แท็ก script คือส่วนที่เราจะเขียนโค้ด React.js ลงไป

Components

ใน React มีสิ่งที่เราต้องรู้หลัก ๆ คือ 3 Concept

1. Component – ส่วนต่าง ๆ ในเว็บเราจะมองเป็น Component
2. State – ข้อมูลที่อยู่ใน Component แต่ละชิ้น เราเรียกว่า State
3. Props – ข้อมูลที่ถูกส่งต่อจาก Component ชั้นบนลงไปชั้นล่าง เราเรียกว่า Props (Properties)

Component ก็เหมือนกับการเขียน HTML แต่ใน React ใช้สิ่งที่เรียกว่า JSX ในการแสดงผลเว็บไซต์ หน้าตาจะเหมือน HTML มาก แตกต่างตรงที่เราสามารถเข้าไปเขียนในไฟล์ JavaScript ได้เลย แทนการเขียนไฟล์ HTML ทำให้เราสามารถเล่นอะไรกับมันได้มากกว่า
โดยเราสามารถเขีนน class React-Component ยกตัวอย่าง componente(‘Hello world”)

class Hello extends React.Component {
render() {
       return <h1> Hello wprld!</h1>;
}
}

เราสามารถกำหนด method สำหรับ component สำหรับตัวอย่างเรากำหนดหนึ่งcomponent นั้น ละจะมีสิ่งที่เรียนว่า "render()" ซึ่งข้างในของ render() จะ return สิ่งที่เราต้องการให้ React แสดงบนหน้าเว็บ ในตัวอย่างของเรา คือเราต้องการให้ React แสดงคำว่า Hello world! ในแท็กเพื่อให้ตัวอย่างของเราแสดงผลบนหน้าจอเราต้องใช้ ReactDOM.render()

ReactDOM.render(
   <Hello/>,
  document.getElementById("root")
);

หลังจากนั้นก็จะเชื่อม Component ด้วย <Hello/> และ div id="root" ก็จะแสดงผลดังนี้

ใน syntax ของ html ที่เราพึ่งดูไป แท็ก h1 และ แท็ก Hello ซึ่งจะเป็น JSX ที่เราได้อธิบายไว้แล้ว ซึ่งไม่ใช้ทำงานเหมือน html ที่เราเคยใช้ทั่วไป แต่จะต้องมีส่วนของ
ReactDOM.render() อยู่ด้วย

การจัดการข้อมูล

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

ความแตกต่างที่สำคัญคือ “state” นั้นเป็น private และสามารถเปลี่ยนแปลงได้จากภายในคอมโพเนนต์เอง props คือ external และจะไม่ถูกควบคุมโดย Component มันถูกส่งผ่านจากล่างของ Component ที่สูงกว่า และยังควบคุมข้อมูลทั้งหมด

Component จะสามารถเปลี่ยน state ภายในได้โดยตรง แต่ส่วนของ props ไม่สามารถเปลี่ยนได้โดยตรง

Props

คอมโพเนนต์ Hello มีความเป็น static มาก และมันสามารถเรนเดอร์กี่ครั้งก็ได้ด้วยข้อความ Hello World เดิม สิ่งสำคัญของ React คือความสามารถในการนำกลับมาใช้ใหม่ (reusability) หมายความว่าเราสามารถนำคอมโพเนนต์ที่เราเคยเขียนไว้ นำกลับมาใช้ใหม่ได้เรื่อยๆตามที่เราต้องการ ดังตัวอย่างข้างล่าง แต่เราจะเปลี่ยข้อความกันเล็กน้อย

เพื่อให้ตรงกับหลักการนำกลับมาใช้ใหม่ เราจึงส่ง props ชื่อ message เข้าไปใน คอมโพเนนต์ Hello

ReactDOM.render(
<Hello massage="my friend"/>
   document.getElementById("root")
);

ซึ่ง props จะเรียก message ที่มีค่า "my friend" ได้ component hello โดยการใช้ถึง this.props.message

class Hello extends React.Component {
  render() {
   return <h1>Hello {this.props.massage}!</h1>;
}
}

ซึ่งก็จะแสดงผลได้แบบนี้

นี้จึงเป็นเหตุผลที่เราเขียน {this.props.message} ด้วยเครื่องหมายปีกกา เนื่องจากเราต้องบอก JSX ว่าเราต้องการเพิ่มตัวแปรมาที่ต้องการเชื่อมต่อกันของ JavaScript โดยเรียวิธีการนี้ว่า escaping

ดังนั้นตอนนี้เรามีคอมโพเนนต์ที่นำกลับมาใช้ใหม่ซึ่งสามารถแสดงข้อความที่เราต้องการได้แล้ว

อย่างไรก็ตาม จะเกิดอะไรขึ้นถ้าเราต้องการให้ component สามารถเปลี่ยนข้อมูลไปมาได้ ทีนี้จะมาแนะนำให้ใช้ state แทน!

State

อีกวิธีหนึ่งในการจัดเก็บข้อมูลใน React นั้นอยู่ใน component-state และไม่เหมือนกับ props ซึ่งไม่สามารถเปลี่ยนแปลงได้ โดยตรงแต่ state ทำได้

ดังนั้นหากคุณต้องการให้ข้อมูลในแอปของคุณเปลี่ยนแปลง ตัวอย่างเช่นอิงจากการโต้ตอบของผู้ใช้งาน ข้อมูลนั้นจะต้องถูกจัดเก็บใน component-state

Initializing state (กำหนดค่าเริ่มต้นให้ state)

ในการกำหนดค่าเริ่มต้นให้ state เราจะใช้เมธอด Constructor() ของคลาส state ของเราเป็น object และตอนนี้ขอกำหนดแต่ message มีค่า “my friend (from state)!” ไปก่อน

class Hello extends React.Component {
constructor(){
   super();
   this.state = {
       message: "my friend (from state)!"
     };
}
render(){
   return <h1>Hello {this.state.message}!</h1>;
}
}

ก่อนที่เราจะเซต state() เราจะต้องเรียก super() ใน constructor ก่อน เพราะว่า
this จะได้ไม่มีค่าใดๆก่อน super() จะทำงาน

การเปลี่ยน state

หากต้องการแก้ไข state ให้เรียก this.setState () โดยส่งผ่าน new state object เป็นอาร์กิวเมนต์ เราจะทำสิ่งนี้ข้างในเรียกว่า updateMessage

class Hello extends React.Component {
constructor(){
   super();
   this.state = {
       message: "my friend (from state)!"
     };
      this.updateMessage = this.updateMessage.bind(this);
}
   updateMessage() {
      this.setState({
           message: "my friend (from changed state)!"
      });
}
render(){
   return <h1>Hello {this.state.message}!</h1>;
}
}

หมายเหตุ: ในการทำให้งานนี้เราต้องผูกคำหลักนี้กับเมธอด updateMessage ไม่เช่นนั้นเราจะไม่สามารถเข้าถึงสิ่งที่เราต้องการ

ขั้นตอนต่อไปคือการสร้างปุ่มเพื่อคลิกเพื่อให้เราสามารถเรียกใช้เมธอด updateMessage() ดังนั้นให้เพิ่มปุ่มลงใน render()

ที่นี่เรากำลังเชื่อมเหตุการณ์เข้ากับปุ่มเพื่อทำ onClick เมื่อมีการทริกเกอร์เราจะเรียกใช้เมธอดของ updateMessage นี่คือองค์ประกอบทั้งหมด:

updateMessage จะเรียก this.setState () ซึ่งเปลี่ยนค่า this.state.message และเมื่อเราคลิกปุ่มนี่คือจะได้ผลตามนี้:

จำไว้นะครับว่า props คือการส่ง ค่าจาก Component A ไปยัง Component B และเวลาใช้ ให้ {this.props.ชื่อprops}
ส่วน State จะอยู่ใน Component ตัวเอง เมื่อ State เปลี่ยนจะส่งผลให้ Component เปลี่ยนนะครับ