http://blog.javarouka.me/
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES사용자 인터페이스라는건 보다 실무적으로 말하면 화면을 구성하는 UI 컴포넌트를 말한다.
<SearchBox lang='ko'/> <Navigation /> <section> <Advertise rolling='hour'/> <LoginBox /> <News /> </section>
<form action="/articles"> <input type="text" name="id"> </form>
var input = React.createElement('input', { type: 'text', name: 'id' }), form = React.createElement('form', { action: '/' }, input);
var form = ( <form action='/'> <input type='text' name='id' /> </form> );
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>React Test</title> </head> <body> <div class="nav"></div> <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> <script type="text/jsx" src="Navigation.jsx"></script> </body> </html>
// @file Navigation.jsx (function(React) { // 보여줄 링크 var linkList = [ { title: "쿠팡", href :"http://www.coupang.com/" }, { title: "아마존", href :"http://www.amazon.com/" }, { title: "11번가", href :"http://www.11st.co.kr/" }, { title: "Yes24", href :"http://www.yes24.com/" } ]; var Navigation = React.createClass({ links: function() { var self = this; return linkList.map(function(link) { return ( <li><a href={link.href} target={link.target || "_self"}>{link.title}</a></li> ); }); }, render: function() { return ( <ul classname="nav"> {this.links()} </ul> ); } }); React.render( <Navigation/>, document.querySelector(".nav") ); })(React);
//@ Main.js require.config({ baseUrl: '.', waitSeconds: 1000, urlArgs: '_v_=1', deps: [ 'jquery', 'react', 'App' ], paths: { 'react': 'path/react/react.min', 'JSXTransformer': 'path/react/JSXTransformer', 'jquery': 'path/jquery/dist/jquery.min' }, shim: { 'JSXTransformer': { 'exports': 'JSXTransformer' } } });
// @Navigation.jsx define([ 'react' ], function(React) { var linkList = [ { title: "쿠팡", href :"http://www.coupang.com/" }, { title: "아마존", href :"http://www.amazon.com/" } ]; var Navigation = function() { this.component = React.createClass({ links: function() { return linkList.map(function(link) { return ( <li><a href={link.href} target={link.target || '_self'}>{link.title}</a></li> ); }); }, render: function() { return ( <ul className="nav"> {this.links()} </ul> ); } }); }; Navigation.prototype.render = function(renderArea) { React.render( React.createElement(this.component, { linkList: linkList }), renderArea ); }; return Navigation; });
// @App.js define([ 'Navigation' ], function(Navigation) { 'use strict'; var view = document.querySelector('[data-view]'); (function initialize() { var nav = new Navigation(); nav.render(view); })(); });
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>React-Test</title> </head> <body> <div data-view></div> <script type="text/javascript" src="path/to/require.js" data-main="Main"></script> </body> </html>
... paths: { ... 'noext': 'path/to/requirejs-plugins/src/noext', ... }
define([ 'jquery', 'noext!Navigation' ], function($, Navigation) { ...
... paths: { ... 'text': 'path/to/requirejs-text/text', ... }
React.createClass({ links: function() { return this.props.linkList.map(function(link) { return ( <li><a href={link.href} target={link.target || '_self'}>{link.title}</a></li> ); }); }, render: function() { return ( <ul className="nav"> {this.links()} </ul> ); } });
// @Navigation.js define([ 'jquery', 'react', 'JSXTransformer', 'text!./Navigation.jsx.text' // text 플러그인 사용 ], function($, React, JSXTransformer, sourceCode) { var navigationSource = JSXTransformer.transform(sourceCode); var linkList = [ { title: "쿠팡", href :"http://www.coupang.com/" }, { title: "아마존", href :"http://www.amazon.com/" } ]; var Navigation = function() { this.component = eval(navigationSource.code); // 변환된 소스코드를 eval해서 Raact 객체를 얻는다. }; Navigation.prototype.render = function(renderArea) { React.render( React.createElement(this.component, { linkList: linkList }), renderArea ); }; return Navigation; });
paths: { 'react': 'path/to/react/react.min', 'JSXTransformer': 'path/to/react/JSXTransformer', 'jsx': 'path/to/requirejs-react-jsx/jsx', // 이녀석이다. 'jquery': 'path/to/jquery/dist/jquery.min' }
define([ 'jquery', 'jsx!Navigation' ], function($, Navigation) { ...