javascript/React.js

react.js 예제

토마토오이 2019. 9. 20. 12:51

react.js 사용을 위한 필요한 라이브러리

 

  1. react.js

  2. react-dom.js

  3. browser.min.js

  4. jquery.min.js

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 

 

Html ——————————

 

<body>

<div id="content"></div>

</body> 

 

 

<script type="text/babel> //babel 로 타입 지정해야 한다.

 

var CommentBoxs = React.createClass({

    render: function() {

           return ( <div className="commentBox"> Hello, world! I am a CommentBox. {this.props.name}</div> );

    }

});

ReactDOM.render( <CommentBoxs name=“test" />, document.getElementById('content') );

 

</script> 

 

 

 

> result : Hello, world! I am a CommentBox. test

 

 

 


 

JSX없이 코드 작성한 경우

 

var CommentBoxs = React.createClass({

    render: function() {

         return React.DOM.div({className:'commentBox'}, 'Hello' + this.props.name);

    }

});

React.render(

     React.createFactory(CommentBoxs)({name : "test"}), document.getElementById('content')

);