- React elements คือ Javascrip Object ธรรมดาๆ ที่สร้างมาเหมือนว่ามันคือ HTML Elements และ Element พวกนี้มันไม่ได้มีหน้าที่ทำงานบนบราวเซอร์แต่แค่เป็นตัวแทนของ HTML Tags เช่น <h1>..</h1>, <div>...</div>
Components คือ React elements ที่เราสร้างขึ้นมานั่นเองซึ่งจริงๆ แล้วมันคือ UI ที่ประกอบด้วย (HTML tags) กับฟังก์ชัน (events ต่างๆ)
JSX คือ JavaScript ที่เอาไปร่วมกับ XML ให้สามารถเขียน Tags ลงไปใน JavaScript มีนามสกุลเป็น .jsx
Virtual DOM คือ สิ่งรวมเอา JavaScript Object (React elements, Components) มาทำงานด้วยกัน
Component
React จะแยก ส่วนต่างๆ ออกเป็นส่วนๆ เรียกว่า Component แล้วเอามารวมกันตอนที่ระบบ render เช่นแยก Header, Footerโค้ด: เลือกทั้งหมด
class Hello extends Component { render() { return ( <div>Hello, World!</div> ) } }
State
ตัวนี้จะเป็นการส่งค่า เก็บค่า เปลี่ยนแปลงค่า การทำงานมีการเปลี่ยนแปลงอะไร state ก็จะเป็นตัวทำหน้าที่ต่อจากนั่นระบบจึงทำ patch UI การเรียกค่าจะผ่าน this.state.[Param]; ส่วนการกำหนดค่าจะเรียกผ่าน this.setstate(***);โค้ด: เลือกทั้งหมด
class Hello extends React.Component { constructor(props) { super(props); this.state = {clicked: props.clicked}; } isClicked() { this.setState({clicked: !this.state.clicked}); } render() { var buttonClass = this.state.clicked ? 'red' : '' return ( <div className={buttonClass}>Hello {this.props.name} <button onClick={this.isClicked.bind(this)}> click me!!! </button> </div> ); } } Hello.propTypes = { clicked: React.PropTypes.bool }; Hello.defaultProps = { clicked: false };
Props
ตัวนี้เป็นแค่การส่งค่าบางอย่างตอนที่ระบบ render UI เข้าไปใน UI แต่ละ Component โดยจะเรียกค่าผ่าน this.prop.[Param] แล้วนำไปใช้งานต่อ แบบตัวอย่างบน render ส่ง name แล้วเอาไปใช้ในของ Componentโค้ด: เลือกทั้งหมด
var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ReactDOM.render( <Hello name='Algoritmtut' />, document.getElementById('container') );
อ้างอิง : https://www.algorithmtut.com/, https://reactjs.org/
Component (คอมโพแนนท์) State (เสตท) และ Props (พร็อพ) คอนเซ็ปของ React (รีแอกซ์)
Moderator: mindphp, ผู้ดูแลกระดาน
- Wallapa
- PHP Super Member
- โพสต์: 343
- ลงทะเบียนเมื่อ: 30/10/2017 10:22 am
Component (คอมโพแนนท์) State (เสตท) และ Props (พร็อพ) คอนเซ็ปของ React (รีแอกซ์)
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
- 0 ตอบกลับ
- 5241 แสดง
-
โพสต์ล่าสุด โดย Wallapa
31/10/2017 2:20 pm
-
-
โพสต์ใหม่ How to Add Animation and Transitions to React Components?
โดย Codalien » 06/11/2023 2:33 pm » ใน JavaScript & jQuery Ajax & Node.JS - 0 ตอบกลับ
- 6128 แสดง
-
โพสต์ล่าสุด โดย Codalien
06/11/2023 2:33 pm
-
-
-
โพสต์ใหม่ react js ไม่สามารถ get data มาไว้บนหน้า web โดยการ select จาก ID ได้
โดย kikkokkikkik » 18/01/2022 4:10 pm » ใน JavaScript & jQuery Ajax & Node.JS - 1 ตอบกลับ
- 1150 แสดง
-
โพสต์ล่าสุด โดย mindphp
19/01/2022 7:30 am
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 57