// import React, { Component } from "react";
// import ReactDOM from "react-dom";

// import React from "./kkreact/";
// import ReactDOM from "./kkreact/ReactDOM";

import React from "./kReact";
import ReactDOM from "./kReact/react-dom";

import "./index.css";

class ClassCpm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
  handle = () => {
    this.setState({
      counter: this.state.counter + 1,
    });
    console.log("handle", this.state.counter);
  };
  render() {
    return (
      <div className="border">
        {this.props.name}
        <button onClick={this.handle}>{this.state.counter}</button>
        {[0, 1, 2].map(item => {
          return <FuncCmp key={item} name={"function組件" + item} />;
        })}
      </div>
    );
  }
}

function FuncCmp(props) {
  return <div className="border">{props.name}</div>;
}

let jsx = (
  <div className="box border">
    <p className="border">這是React</p>
    <FuncCmp name="function組件" />
    <ClassCpm name="class組件" />
  </div>
);

ReactDOM.render(jsx, document.getElementById("root"));