class Coldelab extends React.Component{
    render(){
        let text = "Hi i am coldelab";
        let style = {
            baackgroundColor:'aqua'       
        };
        return(
            // <div>Codelab</div>
            <div style={style}>{text}</div>
        )
    }
}
// 다른 컴포넌트에서 다시 사용할 수 있다.
class App extends React.Component{
    render(){
        return (
            <Codelab/>
        )
    }
}

// 페이지에 랜더링
// 실제 페이지에 jsx코드를 랜더링할때 사용합니다.
ReactDom.render(<App/>,document.getElementById("root"));

const Button = {
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      children: 'OK!'
    }
  }
}

const DeleteAccount = () => ({
  type: 'div',
  props: {
    children: [{
      type: 'p',
      props: {
        children: 'Are you sure?'
      }
    }, {
      type: DangerButton,
      props: {
        children: 'Yep'
      }
    }, {
      type: Button,
      props: {
        color: 'blue',
        children: 'Cancel'
      }
   }]
});

// React: You told me this...
// 여기서 From 이 component 라고 한다면 아래 props를 input으로 받아서 새로운 element를 output으로 내놓을 것이다.
{
  type: Form,
  props: {
    isSubmitted: false,
    buttonText: 'OK!'
  }
}
// React: ...And Form told me this...
{
  type: Button,
  props: {
    children: 'OK!',
    color: 'blue'
  }
}
// React: ...and Button told me this! I guess I'm done.
{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

// jsx
var a = (
    <div>
        Welcome to <b>React CodeLab</b>
    </div>
)

// javascript
var a = React.createElement(
    "div",
    null,
    "Welcome to",
    React.createElement(
        "b,
        null,
        "React.js CodeLab"
    )
)

    condition? true : false // {1==1? 'true':'false'}

class Coldelab extends React.Component{
    render(){
       return(
           <div>
                <h1>Hello {this.props.name}</h1>
                <div>{this.props.children}</div>
           </div>
        )
    }
}
// 다른 컴포넌트에서 다시 사용할 수 있다.
class App extends React.Component{
    render(){
        return (
            <Codelab name="merlin">이 사이에 있는거</Codelab> // "이 사이에 있는거" 가 위의 children에 나타납니다.
        )
    }
}

class App extends React.Component{
    render(){
        return (
            <Codelab name="merlin">이 사이에 있는거</Codelab> // "이 사이에 있는거" 가 위의 children에 나타납니다.
        )
    }
}

App.defaultProps = {
    value:0
}

App.propTypes = {
    value:React.PropTypes.string,
    secondValue:React.PropTypes.number,
    thirdValue:React.PropTypes.any.isRequired // 어떤 타입이든 필수로 입력이 되도록
}

class Counter extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      value:0
    };
    
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(){
    this.setState({
      value:this.state.value + 1
    });
  }
  
  
  
  render(){
    return (
      <div>
        <h2>{this.state.value}</h2>
        <button onClick={this.handleClick}>Press me</button>
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Counter />
    );
  }
};

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

class ContactInfo extends React.Component{
  render(){
    return (
      <div>{this.props.contact.name} {this.props.contact.phone}</div>
    )
  }
}

class Contact extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      contactData:[
        {name:'Abet',phone:"010-0000-0001"},
        {name:'Bbet',phone:"010-0000-0002"},
        {name:'Cbet',phone:"010-0000-0003"},
        {name:'Dbet',phone:"010-0000-0004"},
      ]
    }
  }
  
  render(){
    
    const mapToComponent = (data) => {
       return data.map((contact,i) => {
         return (<ContactInfo contact={contact} key={i} />) // 각 데이터에 identity를 주기 위해서.
       })
    };
    
    return (
      <div>
         {mapToComponent(this.state.contactData)} 
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
        <Contact />
    );
  }
};

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

$ npm i -g eslint // eslint 명령어를 사용하기 위해..
$ npm i -D eslint babel-eslint babel-preset-airbnb

module.exports = {
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "node": true
    },
    "extends": "airbnb",
    "rules": {
        "strict": 0,
        "react/jsx-filename-extension": 0,
        "react/no-array-index-key": 0

    }
};

// package.json 
{
  "name": "reactTest",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-preset-airbnb": "^2.4.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bable-loader": "0.0.1-security",
    "eslint": "^4.18.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.6.1",
    "react-hot-loader": "^3.1.3",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}