# JSX in web

# JSX in web

by jihoon kim

HTML

<script src="firebug-lite-debug"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script>
<div id="root">
</div>

<script type="text/babel">
const  a = <div>
aaaaaaaaaaaa
</div>;

// console.log(a);
// 1. 함수 컴포넌트
// const Message = props => <div name={props.name} style={props.defaultStyle}>this element name is "{props.name?props.name:'empty'}" {props.value} : {props.children}</div>    // 중괄호를 사용한 parameter값 삽입

// 2. 클래스 컴포넌트 
class Message extends React.Component {
  render() {
    return <div name={this.props.name} style={this.props.defaultStyle}>this element name is "{this.props.name?this.props.name:'empty'}" {this.props.value} : {this.props.children}</div>
        ;
  }
}

// /**/ 
Message.propTypes = {
   name:React.PropTypes.string  
  ,defaultStyle:React.PropTypes.object.isRequired
}

Message.defaultProps = {
	name:"test"
	, defaultstyle:{
  	color:"#00ff00"  ,
  	backgroundColor:"black"      
  }
} 

let styleHello = {
  color: 'grey',
  backgroundColor: 'skyblue'
};

let styleGoobye = {
  color: 'brown',
  backgroundColor: 'purple'
};

let styleChild = {
  color: 'Violet',
  backgroundColor: 'Snow'
};

const element = (
	// class가 아닌 className 속성
	<div className="container">

		//Component의 children Component
		<Message name="name_hello"  defaultStyle={styleHello}>Hello World
		<Message name="name_goodbye" defaultStyle={styleGoobye}>Goodbye World
    	<Message defaultStyle={styleChild}>child</Message>
      <Message>child2</Message>        
    </Message>
		</Message>
	</div> 
)
// console.log(element);
// console.log("test2"); 

ReactDOM.render(
  element,
  document.getElementById('root')
);
//...