//1.function方式元件
function MyAddress(props) {
    return <h1 style={MyStyle}>第一個function元件：{props.parameter1}</h1>
 }
 
 function MyName(props) {
    return <h1 style={MyStyle}>第二個function元件：{props.parameter2}</h1>
 }
 
 const MyStyle = {//新增樣式
    color: "blue"
 }
 
 
 
 //最後：渲染引擎ReactDOM.render
 ReactDOM.render(
 
    <div>
    //標籤方式引用元件，並props傳遞引數
    <MyAddress parameter1="[這是=props1引數傳遞]"/>,
    <MyName parameter2="<這是=propos2引數傳遞>"/>,
    </div>,
    document.getElementById('example')
 );
 
 
 
 -----------------------------------------------------------------------
 
 
 
 //Class元件（state）：必有extends，render，return！！！
 class WebSite extends React.Component {
    constructor() {//初始化構造器
        super();//指父級
        this.state = {//指此外掛.狀態引數state
            name: "菜鳥教程"
        }
    }
    render() {//元件級渲染
        return (
            <div>
                 
                <Name name={this.state.name} />
            </div>
        );
    }
 }
 //巢狀元件
 class Name extends React.Component {
    render() {
        return (//this.props.實際渲染時傳入引數，可以直接點出（<Name name={this.state.name} />）
            <h1>{this.props.name}</h1>
        );
    }
 }
 
 ReactDOM.render(
    <WebSite />,
    document.getElementById('example')
 );
 
 
 
 -----------------------------------------------------------------------
 
 
 
 class TextButton extends React.Component {
        constructor() {//初始化構造器
            super();//指父級
            this.update = this.update.bind(this);//構造器內部指定.bind(this)
        this.state = {//指此外掛.狀態引數state
            p1: "傳遞點選按鈕事件引數this.state.p1"
        }
    }
 
    update() {//構造器內部指定.bind(this)
        this.props.onChange('小明名字改了')//DoSomeThing
    }
 
    // 這個語法確保了 `this` 繫結在  handleClick 中
    handleClick = () => {//定義一個按鈕點選觸發的函式
        alert(this.state.p1);
    }
 
    render() {
        return (
            <button onClick={this.handleClick}>
                Click me
            </button>
        );
    }
 }
 
 ReactDOM.render(
    <TextButton />,
    document.getElementById('example')
 );
 
//  表單
//  onchange配合value
 class Child extends React.Component {
    state = {
        name: '小明'
    }
 
    constructor(props) {
        super(props)
        this.update = this.update.bind(this)
    }
 
    update(e) {
        this.setState({
            name: e.target.value
        })
    }
 
    render() {
        return (<div>
            <input onChange={this.update} value={this.state.name} />
        </div>)
    }
 }
 ReactDOM.render(
    <Child />,
    document.getElementById('example')
 );