Component (คอมโพแนนท์) State (เสตท) และ Props (พร็อพ) คอนเซ็ปของ React (รีแอกซ์)

[Wallapa]

• 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
  

  โค้ด: เลือกทั้งหมด

  class Hello extends Component {
    render() {
      return (
      <div>Hello, World!</div>
      )
    }
  }
  

  React จะแยก ส่วนต่างๆ ออกเป็นส่วนๆ เรียกว่า Component แล้วเอามารวมกันตอนที่ระบบ render เช่นแยก Header, Footer
  
  State
  

  โค้ด: เลือกทั้งหมด

  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 };

  ตัวนี้จะเป็นการส่งค่า เก็บค่า เปลี่ยนแปลงค่า การทำงานมีการเปลี่ยนแปลงอะไร state ก็จะเป็นตัวทำหน้าที่ต่อจากนั่นระบบจึงทำ patch UI การเรียกค่าจะผ่าน this.state.[Param]; ส่วนการกำหนดค่าจะเรียกผ่าน this.setstate(***);
  
  Props
  

  โค้ด: เลือกทั้งหมด

  var Hello = React.createClass({
    render: function() {
      return <div>Hello {this.props.name}</div>;
    }
  });
   
  ReactDOM.render(
    <Hello name='Algoritmtut' />,
    document.getElementById('container')
  );

  ตัวนี้เป็นแค่การส่งค่าบางอย่างตอนที่ระบบ render UI เข้าไปใน UI แต่ละ Component โดยจะเรียกค่าผ่าน this.prop.[Param] แล้วนำไปใช้งานต่อ แบบตัวอย่างบน render ส่ง name แล้วเอาไปใช้ในของ Component
  
  อ้างอิง : https://www.algorithmtut.com/, https://reactjs.org/