1
2
3
4
5

let h1=React.createElement('h1',null,'Hello World!')
ReactDOM.render(
    h1,
    document.getElementById('content')
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

let h1=React.createElement('h1',null,'Hello World!')
class HelloWorld  extends React.Component {  -----React 컴포넌트 클래스 정의(이름은 대문자로 시작!)
    render(){ --- 엘리먼트 하나를 반환하는 함수 render()를 생성한다
        return React.createElement('div',null,h1,h1) ---return 문에는 React 엘리먼트를 반환하도록 
                                                ---구현하여 Rect 클래스가 render()를 실행하면
                                                --- 두개의 <h1>엘리먼트를 감싼 <div>엘리먼트를 받을 수 있다
    }
}
ReactDOM.render(  --- React 엘리먼트를 ID가 content인 실제 DOM에 넣어준다
    React.createElement(HelloWorld,null), ----첫번째 인자로 HelloWorld를 전달하여 엘리먼드를 생성한다.
                                            ----이때HelloWorld클래스는 문자열이 아닌 객체다
    document.getElementById('content')
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

class HelloWorld extends React.Component {
  render() {
    return React.createElement(
      'h1',
      this.props, # 모든 속성을 자식 엘리먼트에게 전달한다 {id: 'ember',frameworkName: 'Ember.js',title: 'A framework ..'}) 요런 속성이 그대로 넘어간다
      'Hello ' + this.props.frameworkName + ' world!'
    )
  }
}

ReactDOM.render(
  React.createElement(
    'div',
    null,
    React.createElement(HelloWorld, {
      id: 'ember',
      frameworkName: 'Ember.js',
      title: 'A framework for creating ambitious web applications.'}),
    React.createElement(HelloWorld, {
      id: 'backbone',
      frameworkName: 'Backbone.js',
      title: 'Backbone.js gives structure to web applications...'}),
    React.createElement(HelloWorld, {
      id: 'angular',
      frameworkName: 'Angular.js',
      title: 'Superheroic JavaScript MVW Framework'})
  ),
  document.getElementById('content')
)

# createElement(객체,{속성1:value1,...속성n:value n},) ... 구조

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

React.createElement(
name,
{key1:value1,key2:value2,...},
 child1,child2,child3...childN
 )

# JSX
<name key1=value1 key2=value2 ...>
    <child1/>
    <child2/>
    ...
    <childN/>
</name>   

let helloWorldReacElement= <h1> Hello World </h1>
ReactDOM.render(
    helloWorldReactElement,
    document.getElement('content')
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

# react
class DateTimeNow extends React.Component{
    render(){
        let dateTimeNow=new Date().toLocalString()
        return React.createElement(
            'span',
            null,
            'Current Time ${dateTimeNow}'
        )
    }
}

# JSX
class DateTimeNow extends React.Component{
    render(
        let dateTimeNow=new Date().toLocalString()
        return <span>Current time {dateTimeNow}</span>
    )
}

<span> string.. {this.props.usrName} ..{dateTimeNow} </span>
<p> string ... {new Date(Date.now()).toLocalTimeString()}</p>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

let helloWorldReactElement = <h1>Hello world!</h1>
class HelloWorld extends React.Component {
  render() {
    return <div>
      {helloWorldReactElement}
      {helloWorldReactElement}
    </div>
  }
}
ReactDOM.render(
  <HelloWorld/>,
  document.getElementById('content')
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

class HelloWorld extends React.Component {
  render() {
    return <h1 {...this.props}>Hello {this.props.frameworkName} world!!!</h1>
  }
}

ReactDOM.render(
  <div>
    <HelloWorld
      id='ember'
      frameworkName='Ember.js'
      title='A framework for creating ambitious web applications.'/>
    <HelloWorld
      id='backbone'
      frameworkName='Backbone.js'
      title='Backbone.js gives structure to web applications...'/>
    <HelloWorld
      id='angular'
      frameworkName='Angular.js'
      title='Superheroic JavaScript MVW Framework'/>
  </div>,
  document.getElementById('content')
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

class Content extends React.Component{
    getUrl(){
        return 'http://naver.com'
    }
    render(){
        return(
            <div>
                <p> Your REST API URL is <a href={this.getrl()}>{this.getUrl()}</a></p>
            </div>
        )
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

...
render(){
    if (this.props.user.session)
        return <a href='/logout'>Logout</a>
    else
        return <a href='/login'>Login</a>
}
...

# 삼항연산자
let msg= (userAUth) ? 'welcome' : 'fail'

render(){
    let sessionFlag=this.props.user.session
    return <div>
        <a href={(sessionFlag) ?  '/logout':'/login'}>  {(sessionFlag) ? 'Logout' : 'Login'} </a>
        </div>
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

calss MyReactComp extends React.Compenent{
    render(){
       // JSX 상요하지 않는 영역에서 변수 생성
        let varname = ... //if/else,  삼항연산자 등
        return (
            //JSX 사용 출력 ,  삼항 연산자 , 함수 실행 결과 {} 로 표시
            /* 주석 여려줄
            ...ㅁㄴㅇㄹ
            */
        )
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

class Clock extends React.Component {
  constructor(props) {  //생성자 이름은 반듯이 이 이름으로 해야한다
    super(props)   //부모에 속정 전달 -꼭 해야함
    this.launchClock()
    this.state = {currentTime: (new Date()).toLocaleString()}
  }
  launchClock() {
    setInterval(()=> {   // => 화살표 함수
      console.log('Updating time...')
      this.setState({
        currentTime: (new Date()).toLocaleString()
      })
    }, 1000)
  }
    /*
    this로 바인당 다른 방법
        setInterval(**function(){**
              this.setState({
                    currentTime: (new Date()).toLocaleString()
              })
            **}.bind(this)**   , 1000)    
    */



render() {
    console.log('Rendering Clock...')
    return <div>{this.state.currentTime}</div>
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

//script.jsx
ReactDOM.render(
  <Clock />,
  document.getElementById('content')
)

//clock.jsx
//상태 저장 컴포넌트
class Clock extends React.Component {
  constructor(props) {
    super(props)
    this.launchClock()
    this.state = {
      currentTime: (new Date()).toLocaleString()
    }
  }
  launchClock() {
    setInterval(()=> {
      console.log('Updating...')
      this.setState({currentTime: (new Date()).toLocaleString()})
    }, 1000)
  }
  render() {
    console.log('Rendering...')
    return <div>
      <AnalogDisplay time={this.state.currentTime}/>
      <DigitalDisplay time={this.state.currentTime}/>
    </div>
  }
}

//digital-display.jsx
//상태 비저장 컴포넌트
const DigitalDisplay = function(props) {
  return <div>{props.time}</div>
}

//analog-display.jsx
//상태 비저장 컴포넌트
const AnalogDisplay = function(props) {
  let date = new Date(props.time)
  let dialStyle = {
    position: 'relative',
    top: 0,
    left: 0,
    width: 200,
    height: 200,
    borderRadius: 20000,
    borderStyle: 'solid',
    borderColor: 'black'
  }
  let secondHandStyle = {...}
  let minuteHandStyle = {...}
  let hourHandStyle = {...}  
                         
  return <div>
    <div style={dialStyle}>
      <div style={secondHandStyle}/>
      <div style={minuteHandStyle}/>
      <div style={hourHandStyle}/>
    </div>
  </div>
}  

1
2
3
4

const DigitalDisplay = function(props) {
  const locale= time => (new Date(time)).toLocaleString('en')
  return <div>{locale(props.time)}</div>
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

//script.jsx
ReactDOM.render(
  <div>
    <Content />
  </div>,
  document.getElementById('content')
)


//content.jsx
class Content extends React.Component {
  constructor(props) {
    super(props)
    this.launchClock()
    this.state = {
      counter: 0,
      currentTime: (new Date()).toLocaleString()
    }
  }
  launchClock() {
    setInterval(()=>{
      this.setState({
        counter: ++this.state.counter,
        currentTime: (new Date()).toLocaleString()
      })
    }, 1000)
  }
  render() {
    if (this.state.counter > 2) return <div/>
    return <Logger time={this.state.currentTime}></Logger>
  }
}



//logger.jsx
class Logger extends React.Component {
  constructor(props) {
    super(props)
    console.log('constructor')
  }
  componentWillMount() {
    console.log('componentWillMount is triggered')
  }
  componentDidMount(e) {
    console.log('componentDidMount is triggered')
    console.log('DOM node: ', ReactDOM.findDOMNode(this))
  }
  componentWillReceiveProps(newProps) {
    console.log('componentWillReceiveProps is triggered')
    console.log('new props: ', newProps)
  }
  shouldComponentUpdate(newProps, newState) {
    console.log('shouldComponentUpdate is triggered')
    console.log('new props: ', newProps)
    console.log('new state: ', newState)
    return true
  }
  componentWillUpdate(newProps, newState) {
    console.log('componentWillUpdate is triggered')
    console.log('new props: ', newProps)
    console.log('new state: ', newState)
  }
  componentDidUpdate(oldProps, oldState) {
    console.log('componentDidUpdate is triggered')
    console.log('old props: ', oldProps)
    console.log('old state: ', oldState)
  }
  componentWillUnmount() {
    console.log('componentWillUnmount')
  }
  render() {
    console.log('rendering... Display')
    return (
      <div>{this.props.time}</div>
    )
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<!- index.html -->
<!DOCTYPE html>
<html>

  <head>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
  </head>

  <body>
    <div class="container-fluid">
      <div id="content"></div>
      <script src="js/logger.js"></script>
      <script src="js/content.js"></script>
      <script src="js/script.js"></script>
    </div>
  </body>

</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

constructor
componentWillMount is triggered
componentDidMount is triggered
	DOM node:  <div>2021. 1. 23. 오후 4:52:48</div>
componentWillReceiveProps is triggered
	new props:  {time: "2021. 1. 23. 오후 4:52:49"}
shouldComponentUpdate is triggered
	new props:  {time: "2021. 1. 23. 오후 4:52:49"}
	new state:  null
componentWillUpdate is triggered
	new props:  {time: "2021. 1. 23. 오후 4:52:49"}
	new state:  null
componentDidUpdate is triggered
	old props:  {time: "2021. 1. 23. 오후 4:52:48"}
	old props:  null
componentWillReceiveProps is triggered
	new props:  {time: "2021. 1. 23. 오후 4:52:50"}
shouldComponentUpdate is triggered
	new props:  {time: "2021. 1. 23. 오후 4:52:50"}
	new state:  null
componentWillUpdate is triggered
	new props:  {time: "2021. 1. 23. 오후 4:52:50"}
	new state:  null
componentDidUpdate is triggered
	old props:  {time: "2021. 1. 23. 오후 4:52:49"}
	old props:  null
componentWillUnmount

1

shouldComponentUpdate(newProps, newState){ return this.state.opacity !== + newProps.isVisible}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

class SaveButton extends React.Component {
  constructor(props){
    super(props)
    this.handleSave=this.handleSave.bind(this) // 생성자에서 바인딩하면 아래버튼처럼 곳곳에서 bind할 필요없다
  }
  handleSave(event) {
    console.log(this, event)
  }
  render() {
    return <div>
      {/* <button onClick={((event)=>{console.log(this, event)})}>Save</button> */}
      {/*<button onClick={this.handleSave.bind(this)}>Save</button> // bind()가 반환하는 함수정의를 onClick에 전달하다*/}
      <button onClick={this.handleSave}> Save </button>
      
    </div>
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

class Mouse extends React.Component {
  render() {
    return <div>
      <div
        style={{border: '1px solid red'}}
        onMouseOverCapture={((event)=>{
          console.log('mouse over on capture event')
          console.dir(event, this)}).bind(this)}
        onMouseOver={((event)=>{
          console.log('mouse over on bubbling event')
          console.dir(event, this)}).bind(this)} >
          Open DevTools and move your mouse cursor over here
        </div>
    </div>
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

•currentTarget: 이벤트를 캡처한 요소의DOMEventTarget(대상 요소 또는 부모 요소일 수 있다.)

•target:DOMEventTarget, 이벤트가 발생한 요소

•nativeEvent:DOMEvent, 브라우저 내장 이벤트 객체

•preventDefault(): 링크나 폼 전송 버튼처럼 기본 동작을 방지하는 메서드

•isDefaultPrevented(): 기본 동작이 방지되었을 때 실행하면true를 반환한다.

•stopPropagation(): 이벤트 전파 중단

•isPropagationStopped(): 이벤트 전파가 중단되었을 때 실행하면true를 반환한다.

•type: 태그명 문자열

•persist(): 합성 이벤트를 이벤트 풀에서 꺼낸 후 사용자 코드에서 이벤트에 대한 참조를 유지할 수 있도록 한다.

•isPersistent(): 합성 이벤트를 이벤트 풀에서 꺼낸 경우 실행하면true를 반환한다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

//index.html
<!DOCTYPE html>
<html>

  <head>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
  </head>

  <body>
    <div id="content"></div>
    <script src="js/click-counter-button.js"></script>
    <script src="js/content.js"></script>
    <script src="js/script.js"></script>
  </body>

</html>



//script.jsx
ReactDOM.render(
  <Content/>,
  document.getElementById('content')
)



//content.jsx
class Content extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = {counter: 0}
  }
  handleClick(event) {
    this.setState({counter: ++this.state.counter})
  }
  render() {
    return (
      <div>
        <ClickCounterButton
          counter={this.state.counter}
          handler={this.handleClick}/>
      </div>
    )
  }
}

//click-counter-button.jsx    
//상태비저장 컴포넌트로, 부모이벤트를 사용하기에, 이 ㅌ컴포넌트를 다른 곳에 사용할수 있다 . 좋은 구조임
class ClickCounterButton extends React.Component {
  render() {
    return <button
      onClick={this.props.handler}
      className="btn btn-danger">
      Increase Volume (Current volume is {this.props.counter})
    </button>
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

//content.jsx 가   counter.jsx, click-counter-button.jsx 를 관장해서  연결성을 최소화한다
class Content extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = {counter: 0}
  }
  handleClick(event) {
    this.setState({counter: ++this.state.counter})
  }
  render() {
    return (
      <div>
        <ClickCounterButton handler={this.handleClick}/>
        <br/>
        <Counter value={this.state.counter}/>
      </div>
    )
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

//radio.jsx
class Radio extends React.Component {
  constructor(props) {
    super(props)
    this.handleResize = this.handleResize.bind(this)
    let order = props.order
    let i = 1
    this.state = {
      outerStyle: this.getStyle(4, i),
      innerStyle: this.getStyle(1, i),
      selectedStyle: this.getStyle(2, i),
      taggerStyle: {top: order*20, width: 25, height: 25}
    }
  }
  getStyle(i, m) {
    let value = i*m
    return {
      top: value,
      bottom: value,
      left: value,
      right: value,
    }
  }
  componentDidMount() {   // 미지원 이벤트를 생성한 핸들러에 연결해준다
    window.addEventListener('resize', this.handleResize)
  }
  componentWillUnmount() {   // DOM 제거될때 Event를 반듯이 제거해준다, 메모리 누수발생
    window.removeEventListener('resize', this.handleResize) 
  }
  handleResize(event) {
    let w = 1+ Math.round(window.innerWidth / 300)
    this.setState({
      taggerStyle: {top: this.props.order*w*10, width: w*10, height: w*10},
      textStyle: {left: w*13, fontSize: 7*w}
    })
  }
  render() {
    return <div>
      <div className="radio-tagger" style={this.state.taggerStyle}>
        <input type="radio" name={this.props.name} id={this.props.id}>
        </input>
        <label htmlFor={this.props.id}>
          <div className="radio-text" style={this.state.textStyle}>{this.props.label}</div>
          <div className="radio-outer" style={this.state.outerStyle}>
            <div className="radio-inner" style={this.state.innerStyle}>
              <div className="radio-selected" style={this.state.selectedStyle}>
              </div>
            </div>
          </div>
        </label>
      </div>
    </div>
  }
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

class Content extends React.Component {
  constructor(props) {
    super(props)
    this.handleRadio = this.handleRadio.bind(this)
    this.handleCheckbox = this.handleCheckbox.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleInput = this.handleInput.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleSelectChange = this.handleSelectChange.bind(this)
    this.handleFirstNameChange = this.handleFirstNameChange.bind(this)
    this.state = {
      description: `With the right pattern, applications will be more scalable and easier to maintain.
If you aspire one day to become a Node.js architect (or maybe you're already one and want to extend your knowledge), this presentation is for you.`,
      radioGroup: {
        angular: false,
        react: true,
        polymer: false
      },
      checkboxGroup: {
        node: false,
        react: true,
        express: false,
        mongodb: false
      },
      selectedValue: 'node'
    }
  }
  handleRadio(event) {
    let obj = {}   // 다른 radio 삭제
    obj[event.target.value] = event.target.checked // true target.checked 속성을 이용해서 라디오 버튼이 선택되었는지 여부를 확인한다.
    this.setState({radioGroup: obj})
  }
  handleCheckbox(event) {
    let obj = this.state.checkboxGroup
    obj[event.target.value] = event.target.checked // true or false
    this.setState({checkboxGroup: obj})
  }
  handleChange(event) {
    console.log('onChange event: ', event.target.value, event.target.checked)
  }
  handleInput(event){
    console.log('onInput event: ', event.target.value, event.target.checked)
  }
  handleFirstNameChange(event) {
    this.setState({firstName: event.target.value})
  }
  handleSubmit(event){
    console.log(event.target.value, event.target.checked)
    fetch(this.props['data-url'], {method: 'POST', body: JSON.stringify(this.state)})
      .then((response)=>{return response.json()})
      .then((data)=>{console.log('Submitted: ', data)})
  }
  handleSelectChange(event) {
    this.setState({selectedValue: event.target.value})
    console.log(event.target.value, event.target.selected)
  }
  render() {
    return <div className="container">
      <form  onSubmit={this.handleSubmit}>
        <h2>input: text</h2>
        <input type="text" name="new-book-title" defaultValue="Node: The Best Parts"/>
        <hr/>
        <h2>input: password</h2>
        <input type="password" defaultValue="123456" onChange={this.handleChange} onInput={this.handleInput}/>
        <hr/>
        <h2>input: radio</h2>
        <label>
          <input type="radio" name="radioGroup" value='angular' checked={this.state.radioGroup['angular']} //상태 객체 또는 상태 객체에 있는 한 값에서 필요한 값을 가져와서 사용할 수 있다.
    onChange={this.handleRadio}/>
          Angular
        </label>
        <br/>
        <label>
          <input type="radio" name="radioGroup" value='react' checked={this.state.radioGroup['react']} onChange={this.handleRadio}/>
          React
        </label>
        <br/>
        <label>
          <input type="radio" name="radioGroup" value='polymer' checked={this.state.radioGroup['polymer']} onChange={this.handleRadio}/>
          Polymer
        </label>
        <hr/>
        <h2>input: checkbox</h2>
        <label>
          <input
            type="checkbox"
            name="checkboxGroup"
            value='node'
            checked={this.state.checkboxGroup['node']}
            onChange={this.handleCheckbox}/>
          Node
        </label>
        <br/>
        <label>
          <input
            type="checkbox"
            name="checkboxGroup"
            value='react'
            checked={this.state.checkboxGroup['react']}
            onChange={this.handleCheckbox}/>
          React
        </label>
        <br/>
        <label>
          <input
            type="checkbox"
            name="checkboxGroup"
            value='express'
            checked={this.state.checkboxGroup.express}
            onChange={this.handleCheckbox}/>
          Express
        </label>
        <br/>
        <label>
          <input
            type="checkbox"
            name="checkboxGroup"
            value='mongodb'
            checked={this.state.checkboxGroup['mongodb']}
            onChange={this.handleCheckbox}/>
          MongoDB
        </label>
        <hr/>
        <textarea
          name="description"
          defaultValue={this.state.description}
          onChange={this.handleChange}/>
        <hr/>
        <textarea
          name="description1"
          defaultValue={"Pro Express.js is for the reader\nwho wants to quickly get up-to-speed with Express.js, \nthe flexible Node.js framework"}
          onChange={this.handleChange}/>
        <hr/>
        <select value={this.state.selectedValue} onChange={this.handleSelectChange}>
          <option value="ruby">Ruby</option>
          <option value="node">Node</option>
          <option value="python">Python</option>
        </select>
        <hr/>
        <select multiple={true} defaultValue={['meteor', 'react']} readOnly>
          <option value="meteor">Meteor</option>
          <option value="react">React</option>
          <option value="jQuery">jQuery</option>
        </select>
        <hr/>
        <h2>input: first name [text]</h2>
        <input type="text" name="first-name" onChange={this.handleFirstNameChange}/>
        <hr/>
        <h2>input: button</h2>
        <input type="button" defaultValue="Send" onClick={this.handleSubmit}/>
        <hr/>
        <input type="text" name="title" value="Mr." />

      </form>
    </div>
  }
}

1

asdf

1
2
3

render() {
  return <textarea name="description" value={this.state.description}/>
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

class Content extends React.Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.state = {accountNumber: ''}
  }
  handleChange(event) {
    console.log('Typed: ', event.target.value)
    this.setState({accountNumber: event.target.value.replace(/[^0-9]/ig, 🤔})
  }
  render() {
    return <div>
      Account Number:
      <input
        type="text"
        onChange={this.handleChange}
        placeholder="123456"
        value={this.state.accountNumber}/>
      <br/>
      <span>{this.state.accountNumber.length > 0 ? 'You entered: ' + this.state.accountNumber: ''}</span>
    </div>
  }
}

1
2
3
4
5
6

let emailNode = ReactDOM.findDOMNode(this.refs.email)
let email = emailNode.value
또는 ReactDOM.findDOMNode메서드가 좀 길어서 쓰기 불편하므로 줄여서 작성해보자.

let fD = ReactDOM.findDOMNode
let email = fD(this.refs.email).value

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//이메일 폼 시작하기

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.submit = this.submit.bind(this)
        this.prompt = ‘Please enter your email to win $1,000,000.’ —\- 클래스 속성 정의
    }
    submit(event) {
        let emailAddress = this.refs.emailAddress
        let comments = this.refs.comments
        console.log(ReactDOM.findDOMNode(emailAddress).value) —\- 참조를 이용해서 이메일 주소 입력 값에 접근하여 출력한다.
        console.log(ReactDOM.findDOMNode(comments).value)
    }
    
    
render() {
    return (
        <div className=“well”>
            <p>{this.prompt}</p> —- Content 컴포넌트의 this.prompt 값을 출력한다.
            <div className=“form-group”>
                Email: <input ref=“emailAddress” className=“form-control” type=“text”
                placeholder=“hi@azat.co”/> —- placeholder 속성이 있는 이메일 입력 영역을 구현한다. placeholder 속성은 입력할 내용을 알려주는 시각적 장치다. className과 ref 속성도 사용했다.
            </div>
            <div className=“form-group”>
                Comments: <textarea ref=“comments” className=“form-control” placeholder=“I like
                your website!“/>
            </div>
            <div className=“form-group”>
                <a className=“btn btn-primary” value=“Submit” onClick={this.submit}>Submit</a> —- onClick 이벤트가 있는 제출 버튼에서 this.submit을 호출한다.
            </div>
        </div>
    )
}

1
2
3

<input type=“text” name=“new-book-title” defaultValue=“Node: The Best Parts”/>
<input type="text" name="new-book-title" defaultValue={this.props.title}/>
<input type="text" name="new-book-title" defaultValue={this.state.title}/>

1
2
3
4
5
6
7
8

class Datepicker extends React.Component{
    ...
}
Datepicker.defaultProps={
    currentDate: Date(),
    row : 4,
    locale : 'US'
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

class Content extends React.Component {
  render() {
    return (
      <div className="content">
        {this.props.children}  //모든 자식을 렌더링
      </div>
    )
  }
}

ReactDOM.render(
  <div>
    <Content>
      <h1>React</h1>
      <p>Rocks</p>
    </Content>
    <Content>
      <img src="images/azat.jpg" width="100"/>
    </Content>
    <Content>
      <a href="http://react.rocks">http://react.rocks</a>
    </Content>
    <Content>
      <a className="btn btn-danger" href="http://react.rocks">http://react.rocks</a>
    </Content>
  </div>,
  document.getElementById('content')
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

const LoadWebsite = (Component) => {
  class _LoadWebsite extends React.Component {
    constructor(props) {
      super(props)
      this.state = {label: 'Run', handleClick: this.handleClick.bind(this)} 
    }
    getUrl() {
      return 'https://facebook.github.io/react/docs/top-level-api.html'
    }
    handleClick(event) {
      document.getElementById('frame').src = this.getUrl()
    }
    componentDidMount() {
      console.log(ReactDOM.findDOMNode(this))
    }
    render() {
      console.log(this.state)
      return <Component {...this.state} {...this.props} />
    }
  }
  _LoadWebsite.displayName = 'EhnancedComponent'

  return _LoadWebsite
}

const EnhancedButton = LoadWebsite(Button)
const EnhancedLink = LoadWebsite(Link)
const EnhancedLogo = LoadWebsite(Logo)

class Content extends React.Component {
  render() {
    return (
      <div>
        <EnhancedButton />
        <br />
        <br />
        <EnhancedLink />
        <br />
        <br />
        <EnhancedLogo />
        <br />
        <br />
        <iframe id="frame" src="" width="600" height="500"/>
      </div>
    )
  }
}

class Button extends React.Component {
  render() {
    return <button
      className="btn btn-primary"
      onClick={this.props.handleClick}>
      {this.props.label}
    </button>
  }
}
class Link extends React.Component {
  render() {
    return <a onClick={this.props.handleClick} href="#">{this.props.label}</a>
  }
}
class Logo extends React.Component {
  render() {
    return <img onClick={this.props.handleClick} width="40" src="logo.png" href="#"/>
  }
}